How do I customize the Hesk theme?
You can completely customize the look and feel of your Hesk public side by modifying Hesk theme / template files. Basic CSS/HTML knowledge will be required.
Did you know? For Hesk version 3.2.4+, some additional styles are available for you at Hesk Styles.
The general guidelines are to:
- backup your existing Hesk files!
- make a copy of your /theme/hesk3 folder, for example copy it to /theme/mytheme
- give the theme a unique name:
- open the config.json file (in your new theme, i.e. /theme/mytheme/config.json) in a text editor
- change the theme name, for example change:
{ "name": "HESK" }to:
{ "name": "My Theme" } - save changes to the config.json file
- edit the template files to fit your needs
- login to Hesk admin panel > Settings > General and under Site theme select your new theme from the list
- click Save changes at the bottom
This will apply your customized theme to Hesk public (customer) side.
Note: when Debug mode is turned OFF (admin panel > Settings > Help desk > Debug mode), Hesk uses minimized files, so app.min.css and app.min.js will be used.
When making changes to your theme, you should either:
- turn debug mode ON; when you are ready to go live, save CSS and JS files as app.min.css and app.min.js then turn the debug mode off.
- or - - make a copy of app.css to app.min.css and edit this file; it's easier to read than the original compressed app.min.css file.
