Before the release of
Curlybars
, we had to resort to utilizing Javascript to make many Help Center customizations.

Now
by utilizing Curlybars, we are able to add the images to the categories natively. This makes it so our customizations are less susceptible to Javascript code breaking or the customer not having the right plugins enabled. Additionally, if you decide to rearrange your categories, the image you have applied to a specific category will move along with that category.

The default code

{{#each categories}} <li><a href="{{url}}">{{name}}</a></li>{{/each}}

By default, the Humble Squid theme generates each category as a list item. Each item is rendered the same with a solid background color with its name and a link to that category page. By using some slightly altered code, we will be able to give each category a unique identifier, which will enable us to add images to the boxes via CSS and make additional customizations if needed.

Identifying each category

With a small modification and by using the existing id property of each category, we can create a unique id for each box:

The statement above goes through each category and creates a list item. My first category has an id of 200297817, so the code above will apply an id to the list item of
category_id_200297817
. This statement will go through each category and add a similar id, which we can later target with CSS.

We have successfully implemented unique ids, but the appearance of the boxes hasn't changed just yet. All that remains is adding some CSS to pull in our images.

Adding the images

When adding your CSS customizations, you will need to find your category id. You can either inspect the code of the page, or you can simply navigate to each category and find its id in your address bar:

By targeting the id we have added to the list items above, we can target each box to add the background images. For each category, I decided to upload the background images as assets. You can read more on how to utilize assets
here
. Once you have uploaded the assets, you can add code like this to your CSS in your Help Center (make sure to replace my ids and image links with your own):

The initial result might not be perfect depending on your preferences or branding. I've taken the liberty to apply some custom CSS in my Help Center, so please realize you might have to do the same to get it just right. You can see my final result at the beginning of this article.

Bonus round: Adding custom links to the categories

Many customers want to offer a nice block or button like the category boxes above to point to a custom page or even their Community. You might have noticed my 'Community' and 'Zendesk' categories in my screenshots. By using some additional customizations, you can point these boxes to a custom page. Please know that after you redirect the categories, you can still access their respective administrative pages to make changes by going to the 'Arrange Content' tool.

Note:
If you are using a category box to display a custom link, you must ensure that category contains at least one section that is visible to your intended audience, and the section must contain at least one published article. Any categories that don't fulfill this model will be hidden from end-users. You might use some redirect methods and/or hide these pieces of content as you see fit.

Linking to the Community or other Help Center destinations

Curlybars introduced us to a few new helpers, which enable some extra customizability in the Help Center. I'm going to highlight the
is helper
, which enables us to see if a certain item's property is equal to a specific value and the
link helper
,
which enables us to link elements in the Help Center to specific Help Center pages.

My first category is named 'Community', and I want to send my users to my Help Center Community when they click on that box. I can use the
is helper
to check the id of my categories and apply a custom link to that specific item like this:

The statement above will look for the id of my Community category and use the
link helper
to direct the user to the appropriate destination (my Community). If the category is not for the Community, they will render in the normal format, which follows the
{{else}}
. I also used the
t helper
for the category title to make sure I'm always offering the community title in the appropriate language. The
t helper
enables you to add a variety of localized strings to many areas of your Help Center in case you offer support in multiple languages.

Linking to an external site

We can use a similar idea to point our category at an external site. I decided I would use zendesk.com and linked my 'Zendesk' category to our homepage. I have added an additional
is
statement to the previous example. Since we don't have a way to add multiple
{{else}}
statements, the new is-else statement needs to be nested inside of the previous one:

Here I used the anchor (
<a>
) tag to link to a specific external URL, and the
{{name}}
property will render the name of the category. So my category's name comes from the name of the category I set when editing or creating the category.

Notice the syntax of the is-else statements. If there is a syntax issue, you will be given an error in the Help Center editor instead of being able to save your changes. Know that for each is-else condition you add should be contained between the
{{else}}
and
{{/is}}
of the previous statement.

This customization is just one of many which are now possible. Using Curlybars instead of Javascript will offer scalability when adding or changing categories as well as translations. If you are just getting started in customizing your Help Center, please have a look at more of our Help Center resources
here
.

The padding is doing the majority of the work, but you may have to tweak some other CSS to get it just right for your Help Center. The shadow, custom font, and size preferences are unique to my Help Center, but you can feel free to reuse/modify as you see fit.

Jake, this article was great -- it helped us implement pictures in our HC and improved the user experience! We have a simple question that should be pretty straight forward. As of right now, only the area "around" the actual category titles is clickable. How can we set it so that the entire category tile/image is clickable, too?

Glad you like it! Is your Help Center published so I can see what your CSS looks like? If so, what's the URL? It's likely related to the padding being used on the anchor (<a>) tag within the category blocks.

You can see some sample CSS that I used a few comments above this one and my links expand across the entire box.

Hi, I've identified my category ID's and uploaded the images into the assets. However, i'm finding difficulty in adding the next part of the code into CSS. Tried adding it in "home page" but it doesn't seem to work. Any help would be greatly appreciated!

@Linda - this may be possible on the Copenhagen theme, but as the category boxes resize depending on window size, that may be a bit trickier. You can assign id's to each category similar to what I've done in this article, but the positioning and how the images resize with the boxes in Copenhagen will have to be considered.

@David - The CSS should be put into the CSS Template page, not the home page template.

@Jake - That advice did the trick! I did not realize padding controlled the "clickable area", so to speak. Thanks for your prompt help -- we're very happy with your team! (Help Center is here, for your curiosity.)

We have another question pertaining to the presentation of category boxes/tiles on the Help Center "home page". Thanks to the community's help, we've added custom images to category tiles, and made the whole image "clickable". Our new question is this:

How do we enable category descriptions (visible on category pages) to appear on each category tile on the home page? (And while we are at it: How would we have this text be formatted [size, color, etc.] differently than the category name text?)

I will do my best to provide a general solution for your use, but please know that the final CSS and customization of this solution is up to you and what fits your brand. Thanks to the use of our Curlybars properties available in the Help Center, we can add some other category attributes to these blocks (documentation here):

You and your team really excel at providing general solutions that get us on track to where we want to go. Thanks to your guidance here, we've been able to develop our Help Center right where we want it. Very much appreciated!