Templating

Starting with version 1.0.74-stable our new themes are designed with Bootstrap 3. Our templating and styling system allows you to easily make GSP-Panel match your website with very little code modification. Additionally you can modify the template files to change the entire layout instead of just the color scheme. Below are methods to do these two types of templating.

Custom Theme

  1. Browse to the templates folder in your GSP-Panel installation.
  2. Create a new folder for your theme, make sure this is a unique name and avoid using any special characters. In this documentation we will reference your theme folder as “mytheme”.
  3. Copy the “css” and “images” directories from the default “bootstrap” template into your “mytheme” folder
  4. The folder structure should now look like:
  5. templates\mytheme
├─── css
│    |─ bootstrap.css
|    |─ sb-admin.css
│    |─ etc
|─── images
     |─ [copied from templates\bootstrap\images]
  6. Login to GSP-Panel and go into Configuration > General Settings, select your new theme.
  7. Open up templates\mytheme\sb-admin.css and edit the variables to your liking.
    1. You can use tools like http://getbootstrap.com/customize/ or http://bootswatchr.com/ to help customize the default bootstrap colors. Please note this is not a “drop-in” stylesheet, you will need to customize the css for it to work properly.

Modifying Template Files

It's highly recommend not to modify any files located in the default theme folder. If you would like to modify a template file you should create your own template folder using the steps above and copy the file to it, then make the changes. Please note that you do NOT need to copy all the template files, just the ones you wish to modify.