### Interactive help for Hesk settings

Custom HTML

This tool lets you add your own HTML code to Hesk directly from the admin panel.

It affects only the public (customer-facing) side of your help desk.

» head.txt

Code placed here is added inside the HTML <head> section, just before </head>.

Common uses:

- Custom CSS styles
- Fonts
- Meta tags
- Analytics or verification headers

» header.txt

Code placed here appears at the very top of the page, right after the <body> tag.

Common uses:

- Your company logo
- A custom header or navigation bar
- Branding elements

» footer.txt

Code placed here appears at the bottom of the page, just before the page ends.

Common uses:

- Custom footer content
- Copyright notices
- Links or scripts

Close window

Customer theme

This is the (visual only) theme that will be used across all customer-facing HESK pages. All properly installed themes will be displayed in the drop-down box.

You can create your own additional themes, by copying one of the existing .css theme files that can be found inside "theme/hesk3/customer/css/themes" folder. Simply adjust any CSS color variables there, and name the file as "my_theme_name.css". The theme will then automatically appear in the customer theme selection dropdown.

*Extra Note: Besides the CSS variables already used in the existing theme files, you can also add any variables that can be found in "theme/hesk3/customer/css/core/0_00_default_theme_vars.css", and add them to your theme file.

Close window

Theme overrides

Hesk themes work by utilizing CSS variables for all colors. Some of these colors are distinctly set as a specific color, but the majority of colors are dynamic derivatives of those specific colors (lightened/darkened versions, or an otherwise calculated mix of colors).

This means that it's super easy to change some of the main colors/variables, and have the whole Hesk color palette dynamically adjust to it. Obviously, this can also cause situations, where the dynamic colors or contrasts, might not work the best with all other colors out of the box, but this is where the option to rewrite any colors comes in. Use the color overrides below to make any more specific adjustments (Note: These adjustments are stored in Hesk settings, so changing them will NOT affect/change the original theme files).

Note: Derivatives of other colors are marked with a red asterix, and these colors will dynamically adjust if you adjust the colors they derive from. If you override a derivative color, then that color will now be "fixed" - however, there are situations where some derivative colors might be used by other derivatives, so overriding them, might also cause some other colors to change.

Note: Currently not 100% of all UI edge cases are easily and clearly covered by these color overrides. If you need more specific color overrides where these settings are not enough, we recommend to write additional custom CSS overrides instead where needed.

Close window

Main Brand

These define "90%+" of the site look. Most other colors are in some way derived from these automatically.

Main Elements

These define main complementary colors of common elements, such as input background, links colors etc. Most of these are derived from main brand colors, but can be further adjusted separately.

Close window

Buttons

Use these to override colors of most commonly used buttons.

Navigation

Use these to override colors of various navigation UI (header links, breadcrumbs, action boxes...).

Dropdowns

Use these to override colors of most commonly used dropdowns / selects.

Datepickers

Use these to override colors of datepickers.

Close window

Base colors

These colors represent clear/specific colors, that are usually desired to be specific, despite other color palettes. (i.e. warning/error messages, some icons etc.). These are also used as the basis for various information/error notifications.

Notifications

Notifications will by default use Base Colors, but can be further adjusted here if needed.

Search

These colors allow you to override the Search input styling on the customer pages.

Article Previews

These control the colors of article previews on home page and in search suggestions.

Miscellaneous

Other miscellaneous colors of elements you might want to customize.

Close window