How can I install a theme?
You can install the theme just by following the below instruction.
If you have any problems, please go to www.diziana.com and speak to a live agent or leave a message. We'll be glad to help.
If you prefer not to spend time installing your theme, you can purchase an installation service and we will perform the installation for you.
Follow 3 simple steps to install the theme.
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.
Step 1. Prepare
- Unzip the file you downloaded from diziana.com/zendesktheme.com
- Login as admin into your Zendesk®instance.
- Click Customize design in the Tools panel on the lower-right side of the page.
- Under the Theme section of the panel, click Edit Theme.
The Theme editor appears with the Home Page code showing.
Zendesk® make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.
Step 2. Load HTML,CSS and JS
Customizing The HTML
Select a template to modify from the HTML menu in the Theme editor.
- Click “Document Head” tab and delete all the content from code view.
- Open package “Zendesk® Deployment Files” and go to html.
- Drag and drop HTML-code : Find document-head.html, open the file,copyits content and paste it to the corresponding code view.
- Click “Save”.
- Repeat with the same step for each html page type in Zendesk® theme editor.
Customizing The CSS
- Click “CSS” tab and delete all the content from code view.
- Drag and drop CSS-code : Open “css”folderinexisting package. Open file theme.css,copyitscontentandpast it to “CSS” tab code view.
- Click “Save”.
Customizing The JS
- Click “JS” tab and delete all the content from code view.
- Drag and drop JS-code : Open “css”folderinexisting package. Open file theme.js ,copyits content and paste it to “JS” tab code view.
- Click “Save”.
- Click Assets tab.
- Open “assets” folder in existing package and upload all the files.
- Copy the generated URL, go to document-head and replace ‘assets’ with the uploaded assets path
var __hc_assets_path_uri = 'assets'; and @hc_assets: 'assets';
with generated assets url
for example : "//p3.zdassets.com/hc/theme_assets/602825/200095532" i.e var __hc_assets_path_uri = '/p3.zdassets.com/hc/theme_assets/602825/200095532'; @hc_assets: '//p3.zdassets.com/hc/theme_assets/602825/200095532';
Step 3. Publish
When you’re ready to deploy your changes, click Publish changes at the top of the sidebar.
Congratulations!! You published your help center.
Making Branding Changes
Changing color scheme
Adjust the color of your help center by giving the color code.
Open color-code.txt and copy-paste the code following the color sequence.
In order to insert color of your choice give the color-code for each segment as describe in color-code.txt
Update Logo and Favicon
Set the options in the Branding to update your logo and favicon
- Click at Branding
- Upload logo and favicon from assets folder
- Publish the changes
Working with Theme Sidebar Navigation Menu
a.) Click “JS” tab and search for “Article sidebar navigation menu JS start” from code view.
b.) Add the id's of the categories you want to display in the sidebar navigation
_self.allowCategory = [200607102, 200687842];
Note: Must be comma sepearted
c.) Save and publish the changes
Adjusting General Settings for Mobile Layout
a.) Click General settings in the Tools panel on the lower-right side of the page.
b.) Now unselect the Mobile layout check-box to allow the theme to display. ( ignore if you want to use Zendesk Mobile layout )
c.) Select the Display unsafe content check box
d.) Click Update to save the changesContact us at firstname.lastname@example.org for any help.