Help Center – Adding icons into your theme

Hi Philip were you able to get anywhere with the dropdown.  I was able to do it on my site via Bootstrap framework that I already had implemented. 

Hi Wes,

I am trying to do something similar to Andrew, and everything works great thanks to the lines of code you provided as long as my Help Center is in English. But we are planning to have it in different languages, which means that I need to change the titles of the categories in the buttons and the web address that you are pointing for each language. Which is a good way to do it? Maybe a sort of controller in HTML... something like if(language == English) { ...} if(language == Japanese) { ....}.  How do you code this in HTML?

Thank you for your help!

Marina

Hi Marina - There are a couple of ways you can accomplish this.  You could have different Div's with the different languages that are hidden but based on the language selected it would unhide that Div.  You can also accomplish this through JQuery by doing something similar to what you stated.

if(currentLanguage === 'Japanese') {
$('input').attr('placeholder','TEXTINNEWLANGUAGE');}

The last sentence there would need to be changed to the correct class.  I would need to actually see your Help Center to know what you called that class.

Wes,

Thanks a lot for the fast answer. I think the best way to go here is to use the Div's proprieties directly in HTML. Indeed, your Java script can work but it only modifies the name that appears on the icon, and not the url that I open by clicking on the icon (I need to be able to modify that as well, as same page in different languages has different corresponding url). So I am trying something like:

<ul class="category-list", style="visibility: hidden; display: none;">

<li>
<a href="/hc/en-us/categories/200150036-The-Hitchhiker-s-Guide-to-EnSight"><i class="fa fa-book fa-2x"></i><br />The Hitchhiker's Guide to EnSight</a>
</li>

</ul>

<ul class="category-list">

<li>
<a href="/hc/it/categories/200150036-Guida-ad-EnSight-per-autostoppisti"><i class="fa fa-book fa-2x"></i><br />Guida ad EnSight per principianti</a>
</li>

Now, all I need is a way to control the "style="visibility: hidden; display: none;" based on the language selected. Any suggestion here?

Thanks for all your help and time.

Bests,

Marina

You can actually modify both the link and the text via JQuery.  For example here is some code that wrote the other day for someone that is changing both the text and link on the Search Page.

$("h2.search-results-subheading:contains('Community')").replaceWith('<h2>Partner Discussion <a href="/hc/communities/public/topics" class="search-results-subheading-link"> browse</a></h2> ');
$(".search-results-column a:contains('browse Community')").text('browse Partner Discussion');

For the route you are going you are going to control the display via jquery so it would look something like this.  My below example is using Dynamic Content which you could use here as well.  Hopefully this will help you into the right direction.

HTML to add:

<div id="promoted" style="display: none;">{{dc.promotedarticles}}</div>

JQuery to add:

 $("h3:contains('Promoted articles')").text($('#promoted').text());

Wes,

I managed to make it work. Actually, using dynamic content was enough. I  was not expecting it to be able to feed also the url field, but it looks like it works with no problem. So, now just one line of HTML takes care of all of it:

<li>
<a href={{dc.links\_guide}}><i class="fa fa-book fa-2x"></i><br />{{dc.guide}}</a>
</li>

Pretty powerful this dynamic content.

Thanks a lot for your time and suggestions!

@Marina - I knew if I pointed you in the right direction you would figure it out.  Also, thanks for posting your code as someone else will be looking for the exact same thing.  If you need any additional help just let me know.

I also have alot of useful code through my custom community theme.  You can take a look at some of the code from the following post.

https://support.zendesk.com/entries/41702416

@Marina, yes, thanks for sharing your code! I'm sure it'll help someone else. 

I haven't followed along too closely...but if what you did is different from Wes's original tip, maybe it should be a separate tip??

If so, I'd love for you to post it as a new tip. :)

Hi Wes,

Great thread. This is very helpful.

I am new to Zendesk a happy user. We would like to replace the Black Boxes in the Humble Squid theme with the Large Icons (white boxes, icons, button, etc.) exactly as you show in your example.

Can you give me some pointers on how to do this. I have six categories on my Help Central.

Hi James and welcome to the Zendesk family.  I'll be glad to help you get your Help Center up and going.  The example of the boxes above were created with the bootstrap framework and I will be glad to pass you that code however you will need to add the Bootstrap framework into your Help Center.  To get started take a look at these two tutorials. 

https://support.zendesk.com/entries/27080976-Help-Center-Responsive-Design

https://support.zendesk.com/entries/26807203

Please make sure you are on a plan above the Starter Plan as you are unable to customize the Help Center from a starter plan.  This should get you started and if you need any additional help just let me know.  I also just recently helped build two help centers for other users so I will be glad to help get yours built also if needed.

Hi Wes,

We were planning on starting with the Starter Plan (we are a startup) and switching to Regular after we got products on the market.

I have been wondering what you can/cannot do in terms of customization with the Starter Plan. How does Zendesk distinguish between Starter Plan customization and Regular plan customization?

Take a look here:  http://www.zendesk.com/product/pricing/

Scroll down to you see Customer Self Service and what you are looked for his Advanced Customization as you can see its not available on the Starter Plan.  Once you do decide to move up then you will be able to fully customize your entire Help Center (HTML, CSS, JavaScript\JQuery).  

The only sections that you currently cannot customize is the "Community", "Login Page", and "Registration Page" - those pages will be coming at some point in the future

Hope this helps and let me know if you need any additional help

The Pricing Table uses the term "advanced customization", which is pretty vague.

Does "advanced customization" mean editing the theme CSS, HTML, etc. in any form? So that someone on the Starter Plan does not even see the "customize theme" content?

@James - That is correct you will not have access to the CSS, HTML, etc on the Starter Plan.

Hi Wes,

We are really interested to understand we can reproduce a similar effect as the following one:

https://support.zendesk.com/attachments/token/yfrvjrlvwrftf1p/?name=wes_HC-FAHome.png

Our target is too include a button "Submit a request" to every boxes of the we need to access to the content related to the tag {{category_list}}, in order to make some modifications

Nevertheless, it seems that we cannot access to these contents.

Is there anyway to modify these contents in order to not loose the dynamic propriety of this tag (as the languages, etc...)

Thanks

@Matthieu -  I believe I have the exact code posted in another article  https://support.zendesk.com/entries/26807203-Help-Center-Adding-icons-into-your-theme

Take a look at the Bootply code there.  However as you can see my entire boxes are done manually as the only way I can think of keeping it dynamic is via JQuery however someone would have to keep that updated so I can't think of an automatic solution to this.  Take a look at the code and please let me know if you have any further questions.  If it goes off topic then feel free to send me a email via LinkedIn or we can chat via Skype.  I'm currently building a Help Center for someone so I will get back to you as soon as I can.

Hi im very new to Zendesk, also to css and i cant seem to add icons to my tiles, any advice please i have tried going with the guide but cannot find where to input the icon, 

thanks tom

Hi Wes i cant seem to make this work, help appreciated, thanks tom

@Tom - Welcome to Zendesk and can you give me some details on exactly what you are trying to add.  There is no CSS needed for this as everything is done directly in the HTML tab.

On your home page just add the below code and you then should see a button:  You can select any icon from here:

http://fortawesome.github.io/Font-Awesome/icons/

<aclass="btn btn-lg btn-success"href="#"><iclass="fa fa-flag fa-2x pull-left"></i>Button example</a>

Hi Wes i am trying to at icons on to my category tiles, i also want to move the headings down in the boxes, as i said im a newbie to this.

this is my help centre

https://point2educate.zendesk.com

also i want my logo to take the background colour

thanks tom

@Tom - There's a manual way of adding icons to your categories and there's an automatic way using JQuery.  I have done both but most of the time I hard code my categories as they hardly change.  I normally use Font Awesome icons like in the images above. The automatic way can be found here:

https://gist.github.com/moderatorwes/ee49daf8a47dbb6f6068

The automatic way uses images instead of icons.  I've signed up for an account on your Help Center so that I can take a look at what you are trying to do.

@Tom - Did you look at one of my current Zendesk themes.  The one I have active now is similar to the Humble squid and all you would need to do is just updated my theme.  You can see it live at http://moderatorwes.zendesk.com and you can download it from https://github.com/moderatorwes

Wes,

really liking this and want to apply this and have one question.  If we have different posts within a help desk Section, can we apply different icons to each posting title.  I would like to show a video icon next to video posts, but not sure how to tell the CSS or HTML how to not show the video camera for every post title.

@Bastian - I wrote some code similar to what you asking for on another post somewhere.  After digging I found the following code that you could try out.

 Just make sure the word "Video:" exist in your article title.  I'm using FontAwesome for the icons as thats what I always use since its easy to integrate.

Document Head (calls the CSS for the icons)
<!-- Font Awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

CSS 
.video:before{
content: "\f03d";
color: #a83030;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 18px;
}

If you would like to change your icon then look on the below list and put in the
icon code for content: " "

http://astronautweb.co/snippet/font-awesome/
You can also change the color of the icon and size if needed.

JS  tab
$('ul.article-list a:contains("Video:")').addClass('video');

Let me know if you run into any issues.

@Wes

You are THE man.  Awesome solution, and after figuring out what I had screwed up with the JS part of it (needs to go inside the (document) function) , it works brilliantly.  Was even able to expand to other section headings.  

thanks and keep up the great work.

@Bastian - Awesome and glad to hear you got everything working.  Yes I should have mentioned the JS code went below the document ready function.

I have alot more code to enhance Zendesk located here:   https://github.com/moderatorwes

Alot of tips and themes located here:  https://support.zendesk.com/entries/25424716-Help-Center-community-tips

Goodluck and you know where to find me if you need anything else.

I have read over these articles and everything works great, but when i try to change the icon to a different one, nothing shows up! any suggestions??

Hi Kristina -  First make sure you have the latest version in your Document Head.

Your code should look something like this:

If your still having issues and would like for me to take a look then please provide me a link to your Help Center and I'll be glad to take a look.

@Kristina - Well sorry it stripped out my code.

Document Head should contain the very first line here:  http://fortawesome.github.io/Font-Awesome/get-started/

Wes,

That is the code i already had in. I would love for you to look and see if you know what is wrong. Thank you

https://advisorrecon.zendesk.com/hc/en-us