Recent searches
No recent searches
Copenhagen Theme - Home Page Accordions
Posted Mar 03, 2017
Plan Requirement: Team Plan and up
Zendesk level: Intermediate
Knowledge: HTML & CSS
Time Required: 15 minutes
This snippet of code will allow you to have accordions on your Home Page. Accordions allow your HomePage to be more compact and allows your end users to easily find what they are looking for. Accordions seem to be widely used across Help Centers and Zendesk themselves use accordions on all of their Help Centers.
I've also included the code for you to have Accordions on your Category Page is you wish to use accordions there as well.
GETTING STARTED
In order to shorten this article, you can find all the code here. (recommend opening this in a new tab)
QUICK SUMMARY
We will be working with the following tabs
- HTML
- CSS
STEP 1
From the HTML tab open "Document Head" page.
Copy and paste the code (from the link above).
STEP 2
From the HTML tab open "Home" page.
Copy and paste the code (from the link above) overwriting the default Copenhagen theme code.
STEP 3
From the CSS Tab
Copy and paste the code (from the link above) at the very bottom or top of the CSS tab.
STEP 4
From the CSS Tab
Edit the colors, padding, etc to change the accordions to blend in with your theme's colors and design.
If you have any questions along the way - please post them below.
ENJOY!
0
65 comments
Brett Bowser
Glad to hear it Nikolay :)
0
Devin August Ornstein
I've successfully added this code into our Knowledge Base. However, when an agent accesses the Knowledge Base (Guide) in the side panel, while working on a ticket, the accordions don't work or appear. Does anyone have any ideas?
1
Brett Bowser
Can you confirm that you've enabled Display Unsafe Content in your Guide Admin Settings? You can find this under:
Let me know if this option is enabled and it's still not working on your end.
Cheers!
0
Devin August Ornstein
Brett Bowser
Hi Brett! Thanks for your response. For now, I've been told we're not approved to enable 'unsafe content' in our Zendesk Knowledge Base just yet.
Is that the only fix for this? That we need to enable unsafe content for the accordions to work in the side panel?
What exactly about the content makes it unsafe for end users? I understand it's a security issue, is that right?
0
Brett Bowser
Great question!
There are safe HTML tags and attributes that are allowed to be put in your articles by default. Other tags and attributes that are outside of those in the list are considered "unsafe". This functionality is designed to protect your end-users who will be browsing through your articles and what it does is to prevent these elements to be sent to the browser of your end-users and executed when opening your articles.
To answer your question, the warning applies to the editors who might accidentally insert unsafe HTML tags/use unsafe HTML attributes to your articles. This is a default web development standard for security across sites.
If you are sure that the elements that you are adding are safe/won't cause any security issues, then you may enable this option and proceed. Here's an example scenario where an editor will need to enable this option - Why are videos not displaying in Help Center?
Hope this information helps!
0