Some ready-made themes attempt to provide layout and styling options through the use of theme settings, but this approach doesn’t come close to addressing the countless possibilities that exist. The result: Help Centers that look very similar. We recognize that although themes give you an excellent starting point, customizing them to meet your company’s brand or an existing set of style guidelines can take a lot of time and effort without the right tools.
We provide those tools.
To close the gap between design and reality we’ve developed a comprehensive theming framework comprising:
Settings are used to control the foundation on which everything else is built.
- Theme settings allow you to configure certain aspects of the theme’s appearance, like theme colors, images and fonts.
- Sass variables give you complete control over everything else. You can update the default color palettes or create new ones, change responsive breakpoints, define sizing scales, fine-tune utilities and elements and more!
- Base styles are applied to HTML elements based on your chosen settings, which utilities, elements and patterns then build upon.
Utilities have a specific, often singular role and can be used for everything from minor tweaks to building entire page layouts. For example, text alignment utilities provide control over the alignment of text within an element and can be combined with other utilities to quickly and easily change the appearance of an element or even the entire page.
Our framework adopts an atomic or utility-first approach to styling, which aims to:
- Allow your designers to define the overall style of your Help Center (see settings) and ensure that future changes are made in accordance with it.
- Eliminate the need to invent arbitrary class names for elements which differ only slightly in appearance.
- Allow developers to confidently make changes.
- Allow parts of (or entire) pages to be copied from individual themes or the Pattern Library.
- Make your code easier to maintain and scale.
Elements are reusable parts of a page that can be used in a variety of different contexts.
For example, buttons and lists are elements that feature throughout our themes. Although each has their own basic look-and-feel, they can be used in a variety of ways both alone and as parts of larger patterns.
Elements can be thought of as collections of utilities that, due to being used in many places throughout the Help Center, have been consolidated into one or two class names. They can, as a result, easily be modified by adding utilities to achieve a unique look-and-feel. When creating novel layouts and designs, we recommend starting with utilities and creating new elements once repeating combinations start to emerge.
Patterns are collections of elements and utilities which, as a result of being compositions of more fundamentals parts of the framework, can be copied and pasted between themes or directly from our ever-growing library.
For example, we provide numerous category list patterns that demonstrate different ways of presenting categories. Some make use of elements like cards and list groups, while others are built largely from utilities. These and other patterns can be used as-is or customized through the use of elements or utilities.
Because all of our themes are built using this framework, elements, patterns and even entire pages can be copied from one theme to another. This makes branding and customization faster, allows for rapid prototyping of ideas and ensures that changes are made in a consistent way based on the parameters decided by you when configuring top-level settings.
Of course if one of our themes already meets your requirements, you can simply import it into Guide without making any changes at all!
Every Zendesk theme has the same folder structure, however there are some important additions for our range of themes.
├── assets/ ├── bin/ ├── scss/ ├── settings/ ├── templates/ ├── translations/ ├── manifest.json ├── script.js └── style.css
scss/ folder contains the source Sass files used to compile the theme’s stylesheet.
templates/ folder contains editable templates that define the layout of each page type, as well as the global header and footer. Each template is written using Zendesk’s full-featured templating language called Curlybars.
translations/ folder contains translated labels and descriptions for each theme setting. If required, these can be updated using the
update-translation.js file within the
manifest.json file contains information about your theme and is used to define the theme’s Settings panel in Guide.
style.css file contains the styles for your theme, compiled from the Sass source files.
If you don’t have the time to create your own custom theme using our theming framework, we can help by offering the following services:
- We can customize one of our ready-made themes to absolute perfection, ensuring that your brand is at the forefront and your visitors get the best possible experience.
- We can build an entirely new theme for you using our powerful and propriety theming framework. This includes not just the look-and-feel, but any and all custom functionality required.
- We don’t just do themes. We can help you improve your agent experience as well through custom Zendesk Support and Chat apps. We’ll manage the entire process from design through delivery.
We are experts in design, development, UX and (most importantly) Zendesk and offer a full warranty on our work. Your satisfaction is guaranteed.
If one of the themes from our ever-growing collection ticks all of the boxes for you, we offer installation with every purchase. Getting up and running with couldn’t be easier.