11 years ago

9 years ago

Tickets General

9819

Creating a custom theme

Tickets includes a basic theming system based on Bootstrap 3.

The bootstrap theme is the default theme in Tickets 3.x (and it is called bootstrap3 in Tickets 4). The bootstrap theme supports something called sub themes, more information about this is below.

The themes are stored in the user/themes/ folder. Within each theme folder there is a pages/ folder. This folder contains all the HTML to generate each view. For example the HTML for the following URL http://tickets.example.com/login/ can be found at user/themes/bootstrap/pages/login/index.php

If you look at the code in the root index.php file this contains all the routes (what file is loaded when a specific URL is called).

The difference between Themes and Sub Themes is explained below:

Themes

Themes are completely separate folders each with their own HTML and PHP. Themes allow you to completely modify the Tickets interface.

Please be aware that themes contain PHP code that is required for Tickets to function correctly. Therefore each version of Tickets may require changes to the theme. Therefore it is only recommended that you create your own custom theme if you are prepared to maintain it whenever a new version of Tickets is released.

If you are creating your own theme we recommend that you use the Bootstrap3 theme as a base. This theme is the latest theme and it supports Sub Themes. The Standard theme (older theme from Tickets 2) does not support Sub Themes.

To create a custom theme:

  1. Copy the user/themes/bootstrap3/ folder to user/themes/custom/
  2. Within the new custom/ folder rename bootstrap3.theme.php to custom.theme.php
  3. Open the new custom.theme.php file
  4. Change the class name from bootstrap3 to custom
  5. Name the name value in the $info array to Custom (please ensure that you leave the type as bootstrap).
  6. Save and close custom.theme.php
  7. Open Settings -> General in the web interface
  8. You should now see Custom in the Default Theme drop down. You can now switch to this theme.
  9. Continue to customise the new Custom theme with your own design and style.

Sub Themes

Sub Themes allow you to customise the interface with your own CSS design. It does not allow you to modify the HTML or PHP, but is an easier method for more basic changes. Sub Themes should work with future versions of Tickets without any major changes.

To create a sub theme:

  1. Open the user/themes/bootstrap3/sub/ folder.
  2. Copy the default/ folder to custom/ (ensure that the new folder is all lowercase with no spaces)
  3. Open the user/themes/bootstrap3/bootstrap3.theme.php Not required for Tickets 5+
  4. In the $info array add a new array item called custom. For example: 'sub_themes'=> array('default', 'morning', 'custom'). Not required for Tickets 5+
  5. Save and close bootstrap3.theme.php Not required for Tickets 5+
  6. Open Settings -> General in the web interface
  7. You should now see custom in the Default Sub Theme drop down. You can now switch to this sub theme.
  8. Continue to customise the new Custom sub theme with your own css style (we recommend editing bootstrap-custom.css)

Notes

  • You are of course welcome to directly modify the included themes, but these changes will be overwritten whenever you upgrade Tickets.
  • If you have any suggestions for improving the way themes work please do let us know. Long term we will continue to reduce the PHP code within Themes to make it easier to customise but this will take some time.
  • Install the SmartBackup plugin (it is free)! This makes it easy to backup your code!