How do I customize HESK look?
Best practice: when modifying HESK always document your changes. We highly recommended using a version-control system for tracking changes in source code such as Git or Subversion. This way you can easily apply your changes to future HESK versions.
» Hesk Styles are now available!
As of Hesk version 3.2.4 we now have additional styles available for you at the Hesk Styles page.
» The short version:
-
You can include custom HTML headers to the HESK <head> by modifying head.txt
-
Header and footer HTML code to be used throughout HESK may be pasted into header.txt and footer.txt files respectively.
-
Style code is in hesk_style_vXX.css (Hesk v2) or /theme/hesk3/customer/css/app.min.css file (Hesk v3).
- In Hesk v3 you can Modify the HESK theme/template files.
-
Few header color variations for Hesk v2 are available here: HESK header color templates.
-
Learn how to translate HESK (or just modify the text used to fit your needs).
-
You can modify emails sent by HESK.
» A Step-by-step guide:
Please note: almost anything can be done with sufficient PHP/HTML/CSS knowledge. However, customizing HESK is not officially supported by HESK author and is out of the scope of free support. Use this article just as a guideline.
To customize HESK appearance you will need some basic HTML and CSS knowledge. If you need extensive customization you should consider hiring someone familiar with PHP and HTML.
-
To add a header or footer to the help desk simply paste your HTML code into header.txt and footer.txt files.
Any HTML code pasted into head.txt will be added just before HTML </head> tag.
Any HTML code pasted into header.txt will be added just after HTML <body> tag.
Any HTML code pasted into footer.txt will be added just before HTML </body> tag.
Make sure you use full URLs for images, Javascript or any other external files in the code.
WRONG: <img src="images/image.jpg" ... >
CORRECT: <img src="http://www.site.com/images/image.jpg" ... >
-
To customize font sizes, colors, backgrounds, etc. you can edit the HESK style file, located in hesk_style.css (Hesk v2) or /theme/hesk3/customer/css/app.min.css (Hesk v3). Open it in a plain text editor such as Notepad.
The code inside is CSS (Cascading Style Sheets); you can learn CSS here. CSS is relatively simple to use if you are familiar with HTML and can be very helpful.
-
In Hesk v3 you can control the public look of your help desk by Modifying HESK theme/template files.
-
To customize HTML code that HESK generates you will need to modify PHP source files. Unless you are familiar with PHP code I wouldn't recommend messing with the source as HESK may stop working.
On the other hand, make backup of your existing files then feel free to learn by trial and error...
-
Images used by HESK are located inside img folder. You can edit images using your favorite image editor. If you want to change image size you might also need to modify size in HTML code within HESK files.
-
For your convenience, few header color templates for Hesk v2 may be downloaded from HESK header color templates.
-
You may also customize text or translate HESK.
-
You can quite easily modify emails sent by HESK.
