Help Center – Adding icons into your theme

Hi Wes,

I am using the Humble Squid theme and successfully used your sample code in the comments to add icons to the individual category box, which worked.  However, when I tried to add a sublist in an individual list item (hoping to create a dropdown list), only the 1st item would show in each box.  Can you provide the sample code for the "Large icons on the Home Page:" example?  Thanks.

Hi Phillip - Are you trying to create a dropdown box or are you trying to show multiple links inside of that one box. 

Hi Wes, I want to let each box contain a small button near the bottom so when user click on it, it will show a dropdown menu containing either links to the sections below that category or specific articles I wish to make more prominent. 

@Phillip - Thanks for the screenshot as that really helps.  Let me see what I can come up with.  Give me a couple of days as I'm pretty busy.

Hi Wes, thanks a lot for the help.  I am very familiar w/ being busy myself.

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