1. Diziana
  2. Theme Documentation
  3. General

Configuring Custom and Category blocks (icons) on homepage

Follow

Diziana Themes provide two different ways to show icons (blocks) on homepage of your help-center.

  • Custom (or Static) Blocks:

    Depending on the theme, the number of custom blocks vary; these blocks allow you to show a list of arbitrary links (to anything -- within help-center, outside help-center, or anything on web) with an icon and link-text of your choice.

    Diziana Themes expose settings to turn on/off custom blocks, and for each custom block. You can icon image of your choice, or use font-awesome icon name; you can set title (link-text), and description also.

    If your help-center has multi-lingual content, or has different locales; the custom blocks allow you to use Dynamic Content placeholders instead of hard-coded text (as title or description) within settings.

    Dynamic Content is a Zendesk feature that allows you to put different language translations text in named placeholders. Using named placeholders instead of hard-coded text allows Zendesk to display the right language text for the visitor.

  • Category (or Dynamic) Blocks:

    Category blocks feature allows you to list all your Zendesk Guide categories on homepage of your help-center with an icon of your choice associated with each category. The icon associate with category is done different way (a little code statements -- shown below).

 

 

Configuring visibility of Custom and Category Blocks

You can show or hide each of custom or category block or both from theme settings, it looks like following.

Diziana_theme_configure_image_20.png

 

Configuring Custom Block(s)

Each Custom block comes with a set of settings for itself. You can change visibility, icon, title, description, and url. For icon, you can either upload icon image, or use fontawesome icon name in respective field.

Each Custom block also expose a Dynamic Content (DC) counterpart for settings that require different language text for different locale available in Help Center.

As an example, settings for custom block for one of themes is shown below. It's quite intuitive to understand and use these settings.

Diziana_theme_configure_image_1.png

 

Updating icon for block (using your own icon image):

  • To replace default image with yours, click Replace link (which will prompt you to pick file from your local machine).
  • To revert icon to default image (that came with theme), click on Revert link.

    Diziana_theme_configure_image_3.png

 

Note: In some themes you might have settings to set hover-icon for custom blocks. You can update hover-icon image in similar manner you updated default icon (above).

Updating icon for block (using font-awesome icon font):

Font Awesome is an open-source project that provides thousands of free vector icons for all purposes.

Using Font Awesome icons over your own icon image reduces your cost of ownership (i.e hassle of maintaining your own icon source, and getting new icons done in future); you can always find a good icon in Font Awesome library (at the time of writing this article is over 5000+ icons).

You can visit https://fontawesome.com/icons?d=gallery&m=free, search/browse for icon, open icon page, and you will notice an icon name.

For example, if you visit https://fontawesome.com/icons/pencil-alt?style=solid, you will find a pencil icon with name "fas fa-pencil-alt".

To use font-awesome icon, you just need to use the icon name (e.g. fas fa-pencil-alt) in font-icon setting for the Custom block as shown below. The icon's (normal and hover state) color is dictated by theme's color settings.

default:

Diziana_theme_configure_image_28.png

on-hover:

Diziana_theme_configure_image_27.png

 

Updating text (title, description) settings for a block for single language/locale help-center(s):

If your help-center has only one language, you can put title text in title-setting field (as shown below).

Diziana_theme_configure_image_4.png

 

You can follow the same instructions for description of block.

Updating text (title, description) settings for a block for multiple language/locale help-center(s):

If your help-center has multiple languages (or locales), you need to create Dynamic Content placeholders for title (and for description if you use that) of block.

To create a Dynamic Content placeholder, and use the same in theme custom block setting:

  1. Select "Support" from the menu icon on the top-right of the help center.
    Diziana_theme_configure_image_6.png
  2. Go to settings icon in the icon tray on the top-left.

    Diziana_theme_configure_image_7.png
  3. Click on Dynamic Content under Manage (as shown above).  You will see Dynamic Content view loading on right side.

    Diziana_theme_configure_image_5.png
  4. You can add a Dynamic Content using "add item" link. You can learn more Zendesk article.
  5. Once Dynamic Content is created, you can open it, and copy the placeholder name

    Diziana_theme_configure_image_8.png
  6. Using Dynamic Content (DC) placeholder in Theme's Custom Block setting:

    Diziana_theme_configure_image_9.png
  7. Similarly, update the description and description DC of the block.

Updating URL for Custom Block:

You can URL or link in Block's URL field by replacing #.

Diziana_theme_configure_image_10.png

 

 

Configuring Category Blocks

There is not much (title, description, locales, etc.) to configure for category blocks because the list comes from Zendesk Guide.

The only thing that needs to be configured is icon association, i.e. associating icon with categories.

After setting the visibility for the category blocks group, the icon/s being displayed can be updated in the following steps. By default, each category block has favicon as its icon.

Associating icons with Zendesk categories (using your icon images):

 

  1. Open your category page, and note down category ID. You can find the category ID of category from URL that's shown in your browser's addresses bar when visiting a category page.

    category-id-from-url.png

    As shown above, the category ID is 360000077645.
  2. Prepare your own icons files below uploading. Rename the icon image file on your local machine in following manner.

    default:
    Diziana_theme_configure_image_25.png

    on-hover:
    Diziana_theme_configure_image_11.png

  3. You need to upload the icon file from your local machine to theme's assets. Open the code view by clicking on Edit Code option in theme preview view:

    open-code-view.png
  4. Once code view is open, you can fine "Add asset" link in left sidebar. Click on "Add asset" link to select and upload icons from your local machine to theme's assets. For example, we uploaded images we prepared earlier, and it shows like following:

    Diziana_theme_configure_image_19.png
  5. Once you have uploaded your icon files to assets, Click on "document_head.hbs" file in left sidebar.

    Diziana_theme_configure_image_17.png
  6. We are now going to add some lines of javascript to associate icons with category.
     var assets360000077645 = "{{asset '360000077645.jpg'}}";
     var assetsHover360000077645 = "{{asset 'hover_360000077645.jpg'}}"

    You will notice above that the category ID is being used in left side (javascript variable) name. Our theme will automatically associate this icon with category (360000077645) on runtime.

    Note: If your theme doesn't have hover icons, you don't need to upload icon for hover; and no need to add javascript code for hover (second line above in code block).

    This is how it looks when you edit document_head.hbs. Practically, you will have many of these lines to associate different icons with different categories; however, you can always associate same icon with all categories, if you wish; just reuse right side (asset '360000077645.jpg').

    diziana-associate-icons-with-zendesk-category.png
  7. You can now save (publish) "document_head.hbs", and you will see icon associated with category.

    Default:
    Diziana_theme_configure_image_26.png

    On-hover:
    Diziana_theme_configure_image_29.png

 

Associating icons with Zendesk categories (using Font Awesome font icons):

It's a lot easier to use font-awesome font icons, you don't need to prepare/upload icon files to assets. You need to do the following:

  1. Open your category page, and note down category ID. You can find the category ID of category from URL that's shown in your browser's addresses bar when visiting a category page.

    category-id-from-url.png

    As shown above, the category ID is 360000077645.
  2. Open the code view by clicking on Edit Code option in theme preview view:

    open-code-view.png
  3. Click on "document_head.hbs" file in left sidebar.

    Diziana_theme_configure_image_17.png
  4. We are now going to add some lines of javascript to associate icons with category. You can put font-awesome font icon name as value:
     var assets360000077645 = "fas fa-pencil-alt";

    You will notice above that the category ID is being used in left side (javascript variable) name. Our theme will automatically associate this icon with category (360000077645) on runtime.

    Note: Since we are using font icons, we don't need to set hover icon because the color of font icons are dictated by color of settings of theme.

    This is how it looks when you edit document_head.hbs. Practically, you will have many of these lines to associate different icons with different categories; however, you can always associate same icon with all categories, if you wish;

    diziaina-associate-font-awesome-icons-zendesk-category.png
  5. You can now save (publish) "document_head.hbs", and you will see icon associated with category.

    Diziana_theme_configure_image_31.png
    Diziana_theme_configure_image_30.png