Theme-Galltine

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

• 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 the 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)
  

3.3  Change font family

The theme provide an option to change font family using Zendesk font options. In order to change the fonts:

• Go to Customize Design > Appearance option Fonts
• On use Font 1 to change the fonts.
• Save and publish the changes

4. Branding/Appearance: Customizing Theme’s header, footer, and more

This section requires basic understanding of the HTML, CSS, and JavaScript. You must at least know how to write the basic HTML, CSS, and JavaScript. Nothing advanced, just basics to avoid any syntax errors.

4.1 Add Header links and change the HC Title and it’s description

• Open “Header” HTML template in Theme Editor
• Add or update links (html <li><a href="#">Home</a></li> items (as shown in following image)
• Example:
  <li><a href="https://my-hc.zendesk.com/hc/en-us">Home</a></li>

• The link could be the link of your web page i.e either Zendesk HC content page or any other external web page.

• Save and Publish the Changes to see it in effect.

• Change  the HC title and the description

• The Theme shows the HC title on the home page, to change this click General > Help Center settings.

• Add the text here.

• Now to further change the description go to Theme Editor> HTML  > Home page and under <p> tag replace the text description with the one you want to add.

• Save and publish the changes.

4.2  Home page Custom blocks

The theme gives an option to set and display the custom block based on your choice. You simply need to put the title and it’s description along with the URL.

To do this :

• Add a new category/section/articles or open any existing category/section/article.

• Copy the URL of the category (shown in the address bar of your browser).

• Keep the URL relative i.e /hc/categories/200999725. (This is because this URL won’t rely on your subdomain, in case you change the HC URL it won’t affect the URL you have hard coded here)
• You can also add the external URL i.e URL of the pages that belong to your Website.
• Go to Customize design > Edit theme >Home page.
• Scroll down to reach the end of the page.
• Under heading tag  (<!-- Custom Blocks-->) add the text title and it’s description for each block with its URL as shown

• Save and publish the changes.

Replace the Icons

 In order to replace the icons/images

• Open “Theme Editor and click on “Assets” tab.

• Upload the icons and copy its name.

• Come to home page
• For a custom block in <img> tag (<img src="{{asset 'custom-icon-1.png'}}" alt="Custom Icon" />) Replace the image name with its alt text you have just uploaded as shown.

• Save, Publish, and Verify (visit Help-Center) changes.

• Repeat the same for each block.

Add more custom blocks

• To further add more custom blocks (i.e. an 5th one) just do the following.
• Paste the below code in the home page template as shown:

<li>

<a href="#!">

 <img src="{{asset 'custom-icon-4.png'}}" alt="Custom Icon" />

 <h3>Custom Block 4</h3>

 <p>Lorem ipsum dolor sit amet, consectetuer  sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales.</p>

</a>

</li>

• Further, add the description and text as specified in above steps.
• Save, Publish, and Verify (visit Help-Center) changes.

4.3  Product Support

The theme automatically pulls the category names from your Zendesk HC configuration and display them as Product Support 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:

• 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  Changing links in Footer of Help-Center 

• Open “Footer” HTML template in Theme Editor.

• Add/Update links(URL) and link texts.
• Save, and Verify (visit Help-Center) changes.

4.5 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 customized 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.