Editing theme styles

Editing styles

Although you shouldn’t have to write any custom CSS because of our versatile utilities and elements, you can do so at any time.

There are two ways to go about making changes to your theme’s stylesheet:

1. You can update the style.css file directly, either through the Zendesk Theming Center or locally using your favourite code editor. Any changes made will be immediately reflected in your help center without the need to take any further steps.

2. You can update the Sass source files in the scss/theme/ folder. This could include specifying new values for framework Sass variables, adding your own custom declarations or taking advantage of the functions and mixins that are included with the framework. If you take this approach you will need to re-compile the stylesheet once you’ve made your changes.

Whichever approach you choose, the theme’s style.css file is a standard stylesheet but for some minor differences:

• Theme settings are included as variables using underscores as separators. For example, the value of the Primary color setting can be accessed in CSS using $color_primary.

• A limited set of Sass-like functions are available, like the darken() function which makes a given color darken by some percentage amount. For example:

    a:hover {
      color: darken($color_link, 4%);
      text-decoration: underline;
    }