How to find theme asset url?
RespondidaHow do I find the hc/theme_assets/ url for an asset? Some images on our help center aren't displaying and an inspection of the page says the images aren't found. I want to make sure I have the correct hc/theme_assets/ url in the CSS calling the images. Any idea on how I can find this?
-
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
-
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.
-
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.
-
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
-
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.
-
it's not working.
-
@... 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.
-
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
-
We want to remove Algolia search, which is why I commented out the script. What is a better way to remove Algolia search?
-
You have already commented the CDNs but the function exists so remove the function algoliaSearch(); on script file wherever it's calling.
-
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> -
Okay, just wait, I'll check what's the causes.
-
Figured it out! There was a bit about Algolia further up on the js page that I missed. Thank you all for your help!
-
Please remove the function algoliaSearch(); on script file, the error still exists.
-
O O ! you got it.
Por favor, entrar para comentar.
15 Comentários