1. How can I install a theme?
You can install the theme by following instructions shared in this document.
If you have any problems, please go to http://www.diziana.com or send an email to firstname.lastname@example.org, and one of our support team members would get back to you.
If you don’t want to install the theme from yourself, you can purchase an installation service, and we would help you.
 Reformatting or restyling of articles to fit into the new design is not a part of this free service. If you want us to make sure all of your articles look good, we can help you with that as paid support.
2. Theme Installation Steps
Please follow the instructions below to install the theme in your Zendesk Help Center.
- You need admin access to the Zendesk Help Center to be able to perform the installation process.
- Presently, there isn’t an automatic process to follow the instructions carefully. It’s not complicated and only should take a couple of minutes.
- If your Zendesk plan comes with Sandbox, it is always recommended to install in Sandbox, and test things before you apply the process in production/live version of Help Center.
- Download the theme (deployment) files from your account in Diziana.com or ZendeskTheme.com
- Unzip the files on your local machine
- Login as admin into your Zendesk Help Center
- Sandbox or Live - https://yoursubdomain.zendesk.com/hc/en-us
- Click “Customize design” link in top navigation-bar (as shown below)
- Click “Edit Theme” in the panel in the left sidebar under the theme section to go to “Theme Editor”. The Theme Editor would open with Help Center’s homepage code.
If you have made modifications or have been using another custom theme, please take a backup (copy the code for each file, and keep locally on your machine) of existing theme before you make any changes. Having a backup would give you peace of mind, and more confidence while installing the new theme. You can always rollback the changes i.e. revert to default theme.
2.2 Deploy Theme Code(HTML, CSS, JSS) and Assets (Images, etc)
- Update HTML Code for Zendesk Theme Templates
- Select a Template to modify from the HTML menu option in the Theme editor.
- Click “Document Head” tab (as shown in the following image).
- Remove existing code (as shown in the following image)
- On your machine, Go to "Zendesk Deployment Files" folder (the files you downloaded), and open the folder which contains HTML files.
- Drag and Drop “document-head.html” in theme-code-editor (as shown in the following image).
- Or you can also copy the contents of document-head.html and paste in code editor
- Click “Save” button to save new code for “Document Head” template (as shown in the following image)
- Repeat last two steps for each template type (and HTML file in Zendesk Deployment Files folder).
- You would find matching (name) HTML files for each template type (as shown in the Drop-Down list in Theme Editor).
- Update CSS Code for Zendesk Theme Templates
- Click “CSS” tab in Theme Editor
- Remove existing CSS code from Theme Editor
- Drag and Drop “theme.css” file in Theme CSS Editor (as shown below).
- Or you can also copy contents of theme.css, and paste in theme editor.
- Click “Save” button to save updated CSS code.
- Click “JS” tab in Theme Editor View
- Drag and Drop “theme.js” file in Theme JS Editor (as shown below).
- Or you can also copy contents of theme.js, and paste in theme editor.
- Upload Assets (images, icons, etc.) to Zendesk
- Open “assets” folder in extracted deployment files on your local machine.
- Click Assets tab in Theme Editor.
- Drag and Drop all asset files (images) as shown below.
You are very close to setup the theme, to verify what you did above, hit “Publish Changes” button make new theme live (in your sandbox or production help-center).
Congratulations!! You just installed the theme in your Help Center.
Now let’s start on the theme Branding/Appearance to complete the integration.
3. Branding/Appearance: Changing Colors, Logo and Favicon
3.1 Changing Color Scheme of the Theme
- Expand “Appearance” section (Top Navigation > General >Customize Design)
- Change the colors (as shown in following image)
- The color-code.txt contains color codes, you may use your own color codes.
3.2 Upload Logo and Favicon image files
- Go to (Top Navigation > General >Customize Design)
- Upload Logo (logo.png) and Favicon (favicon.png)
- Click “Change” link under Logo (as shown below) or simply drag and drop the log in the box (square-box)
- Select and upload “logo.png” from “assets” folder (on your local machine)
- Click “Change” link under Favicon text or simply drag and drop the log in the box (square-box)
- Select and upload “favicon.png” from “assets” folder (on your local machine)
Click “Publish changes” button to Publish changes (color, logo, favicon)
4. Branding/Appearance: Customizing Theme’s header, footer, and more
4.1 Add/Update Hero image
The theme would show you the hero image but in case you want to change just do the following:
This changes the main image on the help-center’s homepage.
- Open “Theme Editor” (Top Navigation > General > Customize design > Edit Theme)
- Click on “Assets” tab
- Upload your own main-image (of right dimensions -- look at dimensions of current one to know requirements)
- Once image is uploaded, copy the filename of the upload image (as shown below)
- Open “Document Head” (from dropdown) in Theme Editor
- Replace the filename of the image (in .slider-sec as shown below) with the one you copied in the previous step.
- Save and Publish changes to verify.
Help Center Name
The theme pull the help center name from the Zendesk. To change the name :
- Click General> Help Center Settings.
- Scroll down
- Under the heading "Languages" change the title as per your locale.
- Save the changes
4.2 Adding links in theme’s header
- Open “Header” HTML template in Theme Editor
- Add or update links (html <li><a ..>Categories</a></li> items (as shown in following image)
- <li><a href="https://my-hc.zendesk.com/hc/en-us">Laptop</a></li>
Save and Publish Changes to see it in effect.
4.3 Add Category Icons
The theme automatically pulls category names from your Zendesk HC configuration, and displays those as different blocks/icons on theme(s) home page.
This would show you broken view, in order to set an icon/ images for each category block just do the following:
- Open “Theme Editor
- Click on “Assets” tab
- Copy the Base path where Zendesk keeps uploaded assets (as shown below)
- Click on “JS” tab in Theme Editor
- Scroll to see to very end of the file
- Or, search for the term “var _src”
- Change the value of var _src variable to the base path we copied earlier. It would look like this:
- var _src = '//p3.zdassets.com/hc/theme_assets/883925/200133909/';
- Similarly add your HC URL into the variable var hc_url = 'HC_URL';
- Save and Publish the changes
Note: In case you are using host mapping URL you need to give the URl as exist in your API.
- Go to Agent interface
- Click Admin settings icon
- Under Channels, click API
- Copy the URL
- Add the URL in JS
- Save and publish the changes
We are now ready to add icon to new/existing categories, let’s do it:
- Add a new category or open any existing category
- Copy the id of the category for URL (shown in address bar of your browser)
- On your machine, Rename the filename of the image (which you intend to use for category icon) to have category-id (we just copied above). It should be like this <category-id>.png.
- Click “Assets” tab in Theme Editor
- Upload all icon images (we renamed to have category as filename)
- Save, Publish, and Verify (visit Help-Center) changes.
4.4 Promoted articles and Recently viewed articles
This section list all your promoted and recently viewed articles. To list your article under this section of home page:
- Add new or open any existing article.
- Mark the article as promoted.
- Update the article.
- This would list the article under Promoted articles.
- Once you view the article this would list under Recently viewed articles.
4.5 Changing links in Footer of Help-Center
- Open “Footer” HTML template in Theme Editor
- Add/Update links and link texts.
- Save, and Verify (visit Help-Center) changes.
Congratulations! You are done with all steps, and now you need to verify what you did above, and hit “Publish Changes” button make new theme live (in your sandbox or production help-center).
Whenever you are ready, Publish Changes.
Congratulations!! Help Center should show you your new theme.
5. Change General Settings
We need to make some changes in General Settings (Top Navigation > General > Help Center Settings):
- Unselect “Mobile layout” (our themes are responsive and we don’t need Zendesk Mobile Layout pages)
- Select “Display unsafe content” (we use some advanced techniques to enable features in theme, and we need this to be enabled. Our themes don’t have any malicious HTML code).
- Click “Update” to save the settings.
Congratulations! You have just installed, branded and customized the theme for your Zendesk Help Center. Please share your feedback about our theme, this documentation, our website, or anything related to these.
Please feel free to contact us (email@example.com) for any questions or help.