How to find theme asset url?

Answered

15 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Jessica Chapin, you can add images like this:

     

    1). Upload the images, as assets, to your Help Centre assets folder.

     

    2). See I have uploaded the images to the assets folder.

     

     

    3). Select the image from the assets folder to add into CSS file.

     

    4).  Go to your stylesheet, and you can add with the background-image.

     

     

    5). OR, You can add image wth the psudo code - ::before

    .bclass_div::before {
    content:"";
    background-image:url($assets-dropdown-arrow-svg);
    width: 30px;
    height: 30px;
    }

     

     

    After adding the image you can see the image on preview mode. using inspect tool like in given screenshot.

     

     

     

     

    Hope it works for you or any confusion let me know :)

     

    Thanks

    Team

    1
  • Jessica Chapin

    Thank you for that! I tried the background url option and I get red squares where the icon should appear.

    CSS

    Footer

    Result

    Not sure what I'm doing wrong.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi, see what I did, 

    .footer-links-social li.twitter a{
    background-image: url($assets-twitter-png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* must add */
    display:block;
    height: 30px;
    width:30px;
    text-indent: -999px; /* Hide the text twitter */
    }

     

    I think it's because of  background-size: cover;

    add this property in your code and let me know if it works.

     

    1
  • Jessica Chapin

    Excellent! Managed to fix that bit. The remaining broken bit is our article voting icons.

    They're svg files being appended by a script on the page. Is there a better way to do this?

    Voting section

    Script

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Can you share the public URL of your HC after working theme set as live, then I can figure out what's the issue in JS.

    0
  • Uzair

    it's not working.

    0
  • Jessica Chapin

    @... It's https://help.nexmo.com/hc/en-us

    The issue with the footer social media icons seems to have been having the wrong link for the images. I updated that in the CSS.

    The second issue is that I commented out the script to run Algolia search so I could revert to native Zendesk search. That affected a script on the article page template which was put in place to render table styles, bullet point styling, and the article voting images. The script is supposed to run after the document is ready, and commenting out the Algolia script in the document head seems to prevent the document from being ready.

    I'm trying to understand why those style elements are in a script on the article page instead of in the CSS.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi,

    You need to update the CSS for background social icon, have look at what I did:

    1). You current code for linkedin icon -

    .Footer-links-social li.linkedin a {
    background-image: url(//theme.zdassets.com/theme_assets/39809/2a0de24.png) center center no-repeat;
    display: block;
     height: 30px;
     width: 30px;
    background-size: 30px;
    }

     

    After - 

    .Footer-links-social li.linkedin a {
    background: url(//theme.zdassets.com/theme_assets/39809/2a0de24.png) center center no-repeat;
    display: block;
     height: 30px;
     width: 30px;
    background-size: 30px;
    }

     

    What I did =>

    background-image   =>   background

     

    2). Output is 

    Current:

     

    After:

     

     

    And

    You would get the solution of your second question when your console error would be solved.

     

    What you did -

    You commented the CDN of Algolia search on document_head.hbs file see the below screenshot for the same.

     

    the condole error is -

     

    What I did - 

    I added the CDNs of Algolia search on document_head.hbs file, see the below screenshot for the same:

     

    and script code of Algolia search exists on script.js file, see the below screenshot for the same:

     

     

     

     The CDNs is commented that's why your Algolia code throwing error (Not defined). You just need to add CDNs for Algolia code on document_head file and add the function code on script.js file as I did.

     

    1). CDNs - Copy the CDN and paste it into document_head.hbs file.

    <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/algoliasearch.zendesk-hc/2/algoliasearch.zendesk-hc.min.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/algoliasearch.zendesk-hc/2/algoliasearch.zendesk-hc.min.js"></script>

     

    2). Copy the below Algolia code  and paste it into script.js file at the end of all code.

    $(document).ready(function(){
    //Algolia Search
    function algoliaSearch() {
    var client = algoliasearch('QWYTZ63XKQ', '89fd2fde7777d159b5a50846e5925379'); // search only API key
    var helpdesk = client.initIndex('zendesk_nexmo_articles');
    var developer = client.initIndex('production_nexmo_developer');

    var searches = [{
    autoselect: true,
    autoselectOnBlur: true,
    source: autocomplete.sources.hits(developer, { hitsPerPage: 10 }),
    displayKey: 'body',
    templates: {
    header: '<h4 class="Nx-search__title">Developer</h4>',
    suggestion: function(suggestion) {
    var descriptionEllipses = suggestion.description && suggestion.description.length > 110 ? '...' : '';
    var description = suggestion.description ? suggestion.description.substring(0, 110) + descriptionEllipses : '';
    var highlight = suggestion._highlightResult.body.value ? suggestion._highlightResult.body.value.substring(0, 110) : '';
    return '<a class="Nx-search__result" href=https://developer.nexmo.com' + suggestion.path + ' target="_blank">' +
    '<h6 class="Nx-search__result__title Vlt-blue-dark">' + suggestion.title + ' <small class="Vlt-grey-dark">' + suggestion.heading + '</small></h6>' +
    '<div><small class="Nx-search__result__desc Vlt-black">' + description + '</small>' +
    '<small class="Nx-search__result__snippet Vlt-grey-dark">...' + highlight + '...</small></div>' +
    '<div class="Vlt-badge Vlt-badge--grey">' + suggestion.product + '</div>' +
    '</a>';
    },
    empty: function() {
    return '<p class="Nx-search__no-results">No results</p>'
    }
    }
    },
    {
    autoselectOnBlur: true,
    autoselect :true,
    source: autocomplete.sources.hits(helpdesk, { hitsPerPage: 10 }),
    displayKey: 'title',
    templates: {
    header: '<h4 class="Nx-search__title">Knowledge base</h4>',
    suggestion: function(suggestion) {
    var highlight = suggestion._snippetResult.body_safe.value ? suggestion._snippetResult.body_safe.value.substring(0, 110) : '';
    var sectionEllipses = suggestion.section.full_path.length > 30 ? '...' : '';
    var section = suggestion.section.full_path ? suggestion.section.full_path.substring(0, 30) + sectionEllipses : '';
    return '<a class="Nx-search__result" href=https://help.nexmo.com/hc/en-us/articles/' + suggestion.id + '>' +
    '<h6 class="Nx-search__result__title Vlt-blue-dark">' + suggestion.title + '</h6>' +
    '<div><small class="Nx-search__result__snippet Vlt-grey-dark">...' + highlight + '...</small></div>' +
    '<div class="Vlt-badge Vlt-badge--grey">' + section + '</div>' +
    '</a>';
    },
    empty: function() {
    return '<p class="Nx-search__no-results">No results</p>'
    }
    }
    }]
    autocomplete('.Nx-home-search #query', {}, searches);
    autocomplete('.Nx-search #query', {}, searches);
    }

    algoliaSearch();
    });

     

    And then let me know if another issue arises.

    Have a nice day :)

     

    Thanks 

    Team

     

     

     

    1
  • Jessica Chapin

    We want to remove Algolia search, which is why I commented out the script. What is a better way to remove Algolia search?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    You have already  commented the CDNs but the function exists so remove the function algoliaSearch(); on script file wherever it's calling.

    0
  • Jessica Chapin

    I tested removing the Algolia section from the js file and it still interferes with the script on the article_page.hbs

    <script>

     $(document).ready(function () {
    // Style tables
    $(".article-body table").each(function () {
    if (!$(this).parent().hasClass('Vlt-table')) {
    $(this).wrap('<div class="Vlt-table Vlt-table--data"/>');
    $(this).find("tr:first-of-type").insertBefore($(this).find('tbody')).wrap('<thead/>');
    $(this).find("thead td").each(function(){
    $(this).replaceWith($('<th>' + this.innerHTML + '</th>'));
    })
    }
    });

    $('table td, table th, table, table tr, table thead, table tbody, table span, table p, table div').attr('style', '');
    $('.article-body h1,.article-body h2, .article-body h3, .article-body h4, .article-body span, .article-body p, .article-body h5').attr('class', '').attr('align','');

    // Style lists

    $('.article-body ul').addClass('Vlt-list Vlt-list--simple');

    // Style feedback

    $('.Nx-article-vote__down').append('<svg class="Vlt-red"><use xlink:href="#Vlt-icon-unhappy"/></svg>');
    $('.Nx-article-vote__up').append('<svg class="Vlt-green"><use xlink:href="#Vlt-icon-happy"/></svg>');

     });
    </script>
    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay, just wait, I'll check what's the causes.

    0
  • Jessica Chapin

    Figured it out! There was a bit about Algolia further up on the js page that I missed. Thank you all for your help!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Please remove the function algoliaSearch(); on script file, the error still exists.

     

    -1
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    O O ! you got it.

    0

Please sign in to leave a comment.

Powered by Zendesk