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:
» header.txt
Code placed here appears at the very top of the page, right after the <body> tag.
Common uses:
» footer.txt
Code placed here appears at the bottom of the page, just before the page ends.
Common uses:
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.
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.
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.
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.
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.