Help Desk Software

Back to > HESK Knowledgebase > Knowledgebase

Search help:

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.

» The short version:

  • 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 file.

  • Few header color variations 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 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="" ... >

  • To customize font sizes, colors, backgrounds, etc. you can edit the HESK style file. Open file hesk_style_vXX.css (XX being HESK version) 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.

  • 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 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.

Was this article helpful? yes / no
Related articles How do I add a logo to the help desk header?
How do I modify HESK header color?
May I customize HESK to fit my needs?
How do I add a Favicon to HESK?
How can I modify emails sent by HESK?
Article details
Article ID: 33
Category: Customization & Integration
Rating (Votes): Article rated 3.8/5.0 (264)

« Go back

Powered by Help Desk Software HESK, in partnership with SysAid Technologies

Help Desk Software