Using theme settings

The properties you choose in the Settings panel or set in your manifest file will immediately take effect in your theme without having to modify the theme’s code. For more advanced customization, you can reference their values using variables in the theme’s style.css stylesheet and page templates.

Updating theme settings

Our themes offer a large number of sensible settings that you can use to brand and customize your help center. You can access the settings by customizing your theme in Zendesk Guide. You can also add your own settings when making changes to the layout and functionality of your theme, if desired.

We’ve taken theme to the absolute limit in our themes, ensuring that most common branding and customization tasks can be completed using them alone. You can also take comfort in the knowledge that because our themes are designed to be customized, if you do need to make changes to page templates or the code you can do so easily and without creating an ongoing support and maintenance headache.

Using variables in CSS

Setting variables can be used in both CSS and the theme’s Sass source files by assigning a variable to a CSS property in the same way you would assign a normal value:

.button {
  color: $button_color;

The variable name, in this example button_color, is the setting identifier from the manifest file.

You can also use single curly brackets to embed the variable in a CSS expression:

.container {
  max-width: #{$container_width}px

Using variables in page templates

Setting variables become properties of the settings object in page templates. As with any Curlybars object, you can use double curly brackets and dot notation to insert a property in a page template. For example:

<div class="hero" style="background: url('{{settings.homepage_background_image}}')">

Questions or feedback about this article? Let us know