Theme Customization

Through theme settings, configure your brand's color, logo, icons, etc. to align with your company's brand guideline. Here are some examples of designs possible with Elegante 360 theme.

Custom blocks are useful to highlight key information on the Help Center homepage or if you need to highlight certain categories, or need to include links to other websites outside the Help Center.

The X-Ray theme comes with 6 custom blocks. These blocks can be configured in the theme settings. You can change the icon, text, description and URL of each block.

How to add custom blocks?

This document contains detailed instructions to add more custom blocks (i.e. if you need more than 6 custom blocks):

1. Download the theme code
2. Edit home_page.hbs
3. Edit manifest.json
4. Import new theme file to Zendesk

Download the theme code

• In the Guide Admin section, navigate to the theme workbench.
  

• Click on the theme settings icon, and choose Download. This will download the theme zip file.
  

• Extract the .zip file into a folder.
  

Edit home_page.hbs file

• Once extracted open the folder theme file with your code or text editor app such as Notepad or Notepad++. In our example, we're using Visual Studio Code
  

• Locate homepage.hbs in templates folder and open it
  

• Find custom_block with Ctrl+F
  

• The custom block code is inside the {{#isnt setting.custom_block_<no. customblock>_title ''}} and end with {{/is}}, so you should copy all the code inside the if brackets, follow the image below
  

• {{#isntsettings.custom_block_1_title''}}
  
        <divclass="custom-blocks-item medium-blocks">
  
          <aclass="custom-block-link"href="{{#ifsettings.dc_toggle}}
  
                {{dc'custom_block_1_url'}}
  
                {{else}}
  
                {{settings.custom_block_1_link}}
  
                {{/if}}">
  
            <divclass="custom-block-icon">
  
              <imgsrc="{{settings.custom_block_1_icon}}"alt="{{settings.custom_block_1_title}}">
  
            </div>
  
            <h3class="custom-block-title">
  
              {{#ifsettings.dc_toggle}}
  
              {{dc'custom_block_1_title'}}
  
              {{else}}
  
              {{settings.custom_block_1_title}}
  
              {{/if}}
  
            </h3>
  
            <pclass="custom-block-description">
  
              {{#ifsettings.dc_toggle}}
  
              {{dc'custom_block_1_description'}}
  
              {{else}}
  
              {{settings.custom_block_1_desc}}
  
              {{/if}}
  
            </p>
  
          </a>
  
        </div>
  
        {{/isnt}}

• Paste the code below custom_block_6 don't forget to change the custom_block number, (ex: if you copy custom_block_1 rename to custom_block_7) , so basically it's number is in order, and make sure no duplicate number or your newest added custom block will be same with the one you copied.
  

Here is the list of code that you need to rename when copying follow the picture above:

• {{dc 'custom_block_<customblock no.>url'}}
• {{settings.custom_block_<customblock no.>url'}}
• {{settings.custom_block_<customblock no.>icon'}}
• {{dc 'custom_block_<customblock no.>title'}}
• {{settings.custom_block_<customblock no.>title'}}
• {{dc 'custom_block_<customblock no.>description'}}
• {{settings.custom_block_<customblock no.>description'}}

Now after adding new custom block from the homepage we need to add it's setting for the image and the title.

Edit manifest.json file

• Now that you've added the additional code for the new custom block. Let's update the manifest.json file. This way you can change the custom block settings through the theme settings (instead of editing the source code every time you need to update the additional custom block)
• Locate the manifest.json file and open it
  

• Find custom_block with Ctrl+F and then locate "label": "Custom Block 1" after you locate it you need to see the structure first in image below all the custom block setting is inside this bracket :

• {
  "label": "Custom Block 1",
  "variables": [ ... ]
  }

• where [ ... ] is al custom block setting content, if you see image below you'll know that the setting structure is the same with custom block 2,3,4.. and so on.
  

• After copying the setting from custom block 1 follow this below image to block the code and copy, copy from this symbol "{" and end with this symbol ",". if you open with visual code you can minimize the code like this image below to make it easier to see the structure.
  
  

• Now locate the last custom block setting in our case is custom block 6, following this image below, you need to paste the copied code after the "}," symbol. make sure you follow the image below.
  
  

• Rename the custom block number to match your custom block new number in our case it's 7, you just need to keep the custom_block_icon, custom_block_title, custom_block_desc, and custom_block_url settings and delete the other setting follow the image below.
  
  

• After that exit the code editor go to settings folder to place your new custom block image.
  

• Place your custom block image here, make sure the name follow the image below it's "custom_block_<custom block no.>icon" and if you can make the format all the same to prevent error.
  
  

• Go back to X-Ray folder select all the items there and then add it to archive.
  

• Set the format to .zip
  

Import the new theme file to Zendesk

• Drag the X-Ray.zip or yourtheme.zip to Zendesk Guide theme workbench.
  

• Drag and drop it here.
  

• Once loaded, you can configure the settings and make it your live theme.
  

• Your newly added custom block should appear now and you can customize it from the customize menu in the Zendesk theme settings.
  
  

Our themes can be easily customized. The codes are well documented/commented on, they were written using common software development approach and naming conventions. However, if you don't have the resources or time, we offer our professional services to take one step further than just branding your Zendesk Help Center. This customization service is what you need if:

• You would like to change the layout of your Zendesk Help Center.
• You would like to change the header and footer to make it exactly like your main website

Some additional information around our theme services:

• How much does it cost? It really depends on what you need, but this starts from $99. This fee is paid in full before we start the work.
• How long will this take? Again, this really depends on the complexity of your requirements. On average, 7 business days are enough time to change your header & footer, as well as customizing the home page, and a few other areas or features of the Help Center
• How are the changes deployed? We will be working in your sandbox environment (if you have one), or one of our development instances. Once you approve the change, we'll help you deploy the changes to the production environment.

TBD