Adding Navigation Images to Help Center (with use of dynamic content)
To ease navigation and make the Help Center experience simpler for our customers, we decided to add some quick-links in our front page. We call these "welcome images" - and each one is linked to a specific area of our Help Center. Furthermore, we made it bilingual, making use of Zendesk's dynamic content feature.
Editing the CSS
To begin, click on Customize design on the right-hand menu and edit your current theme.
Under HTML select Home page
Navigate to the CSS tab - This is where all the magic will be happening.
Here we added all of our CSS for both our welcome images and the buttons, which have an animation of its own. Here's a little preview of what we did:
/*
* Buttons
*/
[role=button]:hover, [type=button]:hover, [type=submit]:hover{
background-color: #64b9f4;
background-image:none;
}
input[type=submit] {
background-color: #41acf4;
background-image:linear-gradient(to bottom, #64b9f4, #0d98f5);
border-color: transparent;
color: #FFF;
}
a[role="button"]:hover {
text-decoration: none;
}
The images are hosted on our own server. Here's a preview of how they were implemented using CSS:
/*
* Welcome icons
*/
div.principal-container div.container-span4{
width: 21%;
margin-right: 4%;
float: left;
margin-top: 40px;
}
Create Dynamic Content
Each of the classes above are linked back to the dynamic content we created.
To create your own dynamic content, hover over to your Zendesk settings and click on Manage > Dynamic Content (more on this here: https://support.zendesk.com/entries/20720458-Providing-multiple-language-support-with-dynamic-content.)
Within each variant, we added HTML to reflect what each image/button is suppose to do, as each leads to a different version of our Help Center. The dynamic content string was then added to the HTML for the Home page in the Theme options. (Zendesk uses Handlebars.js - allowing for all the HTML that was created under Dynamic Content to be implemented here as a component, and sync up with the CSS shown above)
This will also allow us to easily recreate this in as many languages as we have, without having to make any additional changes to the CSS, and simply adding additional variants and editing the links using Dynamic Content.
-
Did you start out using one of the new Help Center forum templates? If so, which template did you use?
-
Hi John,
I used the default template provided by Zendesk.
-
So, this was built on the old platform? (When you upgrade to the new Help Center there are 5 optional templates.)
-
Hi John,
No, Andrea used HC, but she was an early release customer so I'm not sure she had theme options when she set it up. She can let you know though.
-
Thanks. It looks to me like the "Swiftest Elk" theme is closest to her design. I think I'll start with that and see what kind of success I have.
-
We started off with whatever the default one was (it might be Swiftest Elk)
Best of luck! I'm a full supporter of the new HC, love it, and so do our clients!
-
I am attempting to use this with our HC using the Swiftest Elk theme. I have done everything within the CSS tab that is listed here before the Dynamic Content section of the article, but I am not getting any results. I feel like I am missing something very basic here.
Any help would be greatly appreciated.
-
Hi Dan,
Go to your HC's general settings and make sure that the languages are enabled there as well. It's not enough to set it up on the admin panel, you also need to set it up within HC.
-
I'm struggling with the basics of how to add simple navigation icons like are shown in the first image. This seems like something a lot of people would want but it does not seem to be a standard option. It does not appear to be a part of any of the default themes and I cannot find any basic components to enable it.
What I see here seems more complicated than what I need. I just want 4 blocks that will display horizontally on a desktop and hopefully vertically on a mobile device. In each block, I would minimally like to select an icon (say from http://fortawesome.github.io/Font-Awesome/) and have a button/link under it (very much like what you see on at http://support.zendesk.com). The additional text description is nice but not necessary.
In looking above, I seem snippets of examples but not enough information for me to replicate the design. This seems to be much harder to do than I would have thought. Am I missing something?
Thanks!
-
Hi Chip!
Getting where you want to go here is going to require some custom coding.
You'll want to start out with the Humble Squid template, which gives you the blocks that you're looking for. After that is where the custom coding is going to come in.
We have a detailed Support Tip from one of our Advocates on how to customize those blocks with the image of your choice. You can find that here: Adding Images to Humble Squid's Category Boxes.
We have additional resources to help with other CSS customization available here: Help Center CSS Cookbook.
That should get you started! Please let us know if you have any other questions!
Post ist für Kommentare geschlossen.
10 Kommentare