Theme-Voniss

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 support@diziana.com, 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.

[1] 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.

2.1 Prepare

• 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 left sidebar under the theme section to go to “Theme Editor”.  The Theme Editor would open with Help Center’s homepage code.

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 following image).

• Remove existing code (as shown in 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 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 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 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.

• Update Javascript Code for Zendesk Theme Templates
• Click “JS” tab in Theme Editor View
• Remove existing Javascript code 
• 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.
• Click “Save” button to save updated Javascript code.

• 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.

2.3 Publish

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

This section requires basic understanding of html, css, and javascript. You must at least know how to write basic html, css and javascript code. Nothing advanced, just basics to avoid any syntax errors.

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 “Header” (from dropdown) in Theme Editor
• Replace the filename of image (in  <div class="header-img"> as shown below) with one you copied in previous step. 

• Save and Publish changes to verify.

4.2  Add Category Icons

The theme automatically pulls category names along with its section list 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/';

• 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 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.3  Add videos

Theme has a section that shows videos on the page. To add your videos do the following: 

• Copy the embed video URL from your video hosting service. (YouTube, Vimeo etc)
• Open Home page template.
• Under <h3 class="video_tutorials"> replace the embed URL as shown:

• Save and publish the changes

4.4  Promoted articles

This section list all your promoted article along with the icons. To list you article under this section of home page:

• Add new or open any existing article.
• Mark the article as promoted.
• Update the article.

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.

4.6 Publish

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 customised 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 (support@diziana.com) for any questions or help.