We're happy to help you!

Submit a request
    Getting Started

    Getting started

    If you are new to Diziana here's some quick steps for how to get started.

    Knowledge Base

    Knowledge Base

    Find what you need in our Knowledge base.

    Community

    Community

    Be a part of Diziana Community to get advice from our customer service pros and try various tips and tricks.

    Theme-Rinda

    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.comand one of our support team members would get back to you.

    Premium themes come with free[1] installation service, so please let us know if you don’t want to install the theme by yourself. If you have downloaded one of the free themes, you can purchase an installation service, and we would help you.

    [1] Reformatting or restyling of articles to fit into new design is not 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 instructions below to install theme in your Zendesk Help Center.

    Note:

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

    2.1 Prepare

    • Download 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
    • Click “Customize design” link in top navigation bar (as shown below)

     

    • ClickEdit Theme” in the panel in the left sidebar under the theme section to go toTheme Editor”.  The Theme Editor would open with Help Center’s homepage code.diziana-hc

    Important Note:  If you have been using default Zendesk theme, you don’t have to worry about taking backup of the theme code files and assets. You can always revert to default theme.

    If you have made modifications or have been using another custom theme, please take a backup (copy 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 a 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 files 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

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

     

    3. Branding: 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

    • Expand “Branding” section (Top Navigation > General >Customize Design)

    • Upload Logo (logo.png) and Favicon (favicon.png) 
      • Click “Change” link under Logo (as shown below)
      • Select and upload “logo.png” from “assets” folder (on your local machine)
      • Click “Change” link under Favicon text
      • Select and upload “favicon.png” from “assets” folder (on your local machine) 

    •  Click “Publish changes” button to Publish changes (color, logo, favicon)

     

    4. Branding: 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  Adding links in theme’s header and change the hero image

    • Open “Header” HTML template in Theme Editor.
    • Add or update links (html <li><a ..>Categories</a></li> items (as shown in following image) 
    • Example: <li><a href="http://www.diziana.com/themes">Themes</a></li>
    • Save and publish the changes.

     

    4.2 Changing Category Icons on home page

    In order to set an icon/ images for each category block just do the following:

    • Open “Theme Editor.
    • Click on “Assets” tab.

    • Upload the icons/images and copy its name.
    • Go to HTML->Home page
    • Change the existing icons with the one you have uploaded by replacing the name.
    • Now, add the links of categories/section/other pages or article replacing '#'  <a herf = "#">
      • For an e.g.:

                 <a href="/hc/categories/208987654">

                <h3>API</h3>

              <img src="{{asset 'request-icon.png'}}" alt="icon" width="65" height="88"/>

                </a>

     

    • Save and Publish the changes

    4.3  Changing links in Footer of Help-Center

    • Open “Footer” HTML template in Theme Editor
    • Add/Update links and link texts.
      • For an e.g. To add a link and it's URL just do the following<li><a href="http://www.diziana.com/terms-and-conditions">Terms of Service</a></li>
    • Save and publish the changes

     

    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.

     

     

    Have more questions? Submit a request
    Avatar
    Tarun Sahu

    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.comand one of our support team members would get back to you.

    Premium themes come with free[1] installation service, so please let us know if you don’t want to install the theme by yourself. If you have downloaded one of the free themes, you can purchase an installation service, and we would help you.

    [1] Reformatting or restyling of articles to fit into new design is not 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 instructions below to install theme in your Zendesk Help Center.

    Note:

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

    2.1 Prepare

    • Download 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
    • Click “Customize design” link in top navigation bar (as shown below)

     

    • ClickEdit Theme” in the panel in the left sidebar under the theme section to go toTheme Editor”.  The Theme Editor would open with Help Center’s homepage code.diziana-hc

    Important Note:  If you have been using default Zendesk theme, you don’t have to worry about taking backup of the theme code files and assets. You can always revert to default theme.

    If you have made modifications or have been using another custom theme, please take a backup (copy 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 a 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 files 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

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

     

    3. Branding: 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

    • Expand “Branding” section (Top Navigation > General >Customize Design)

    • Upload Logo (logo.png) and Favicon (favicon.png) 
      • Click “Change” link under Logo (as shown below)
      • Select and upload “logo.png” from “assets” folder (on your local machine)
      • Click “Change” link under Favicon text
      • Select and upload “favicon.png” from “assets” folder (on your local machine) 

    •  Click “Publish changes” button to Publish changes (color, logo, favicon)

     

    4. Branding: 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  Adding links in theme’s header and change the hero image

    • Open “Header” HTML template in Theme Editor.
    • Add or update links (html <li><a ..>Categories</a></li> items (as shown in following image) 
    • Example: <li><a href="http://www.diziana.com/themes">Themes</a></li>
    • Save and publish the changes.

     

    4.2 Changing Category Icons on home page

    In order to set an icon/ images for each category block just do the following:

    • Open “Theme Editor.
    • Click on “Assets” tab.

    • Upload the icons/images and copy its name.
    • Go to HTML->Home page
    • Change the existing icons with the one you have uploaded by replacing the name.
    • Now, add the links of categories/section/other pages or article replacing '#'  <a herf = "#">
      • For an e.g.:

                 <a href="/hc/categories/208987654">

                <h3>API</h3>

              <img src="{{asset 'request-icon.png'}}" alt="icon" width="65" height="88"/>

                </a>

     

    • Save and Publish the changes

    4.3  Changing links in Footer of Help-Center

    • Open “Footer” HTML template in Theme Editor
    • Add/Update links and link texts.
      • For an e.g. To add a link and it's URL just do the following<li><a href="http://www.diziana.com/terms-and-conditions">Terms of Service</a></li>
    • Save and publish the changes

     

    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.

     

     

    0
    Comments
    Diziana Support

    Knowledge base

    Have more questions? Submit a request
    Theme-Rinda
    Was this article helpful?
    0 out of 0 found this helpful