skip to main content
GUI Skins : Make your own skin
   
Make your own skin
 
Before you start
Files and folders
Install SASS
Creating your own skin
Compiling skins
Modify report skin
Changing what skin op5 Monitor use
Before you start
Before you can start making changes to the please make sure you have
ssh and sftp access to the op5 Monitor server
created your own skin. In all instructions in the rest of the chapter we assume you already have logged in via ssh on the op5 Monitor server. We also assume that you have the basic knowledge needed in PHP and knows how to work in a Linux environment.
The skin we create here will be called:
my_skin
Files and folders
All skins shall be placed in a folder of its own directly under:
/opt/monitor/op5/ninja/application/views/css/
Install SASS
SASS or Syntactically Awesome Stylesheets is a CSS metalanguage. It is a scripting language that is compiled into CSS.
To install SASS run the command:
yum install rubygem-sass rubygem-compass
This will install the SASS and Compass components that we will use later. This only has to be done once.
Creating your own skin
To create your own skin
1 Go to the skin folder:
cd /opt/monitor/op5/ninja/application/views/css
2 Copy the Pink n’ Fluffy skin to a new directory with the name of your new skin:
cp -a pink_n_fluffy/ my_skin
3 Go to the folder /opt/monitor/op5/ninja/application/views/css/my_skin/sass
4 Edit the file common.sass
Change the variables to change the look of you skin.
 
All variables can be found in the file /opt/monitor/op5/ninja/application/views/css/base-sass/config.sass
5 Save the file and compile the skin. See Compiling skins on page 136
Compiling skins
For the skin to work the SASS files has to be compiled to CSS.
To do this go to the skin css folder:
/opt/monitor/op5/ninja/application/views/css/my_skin
Run the command
compass compile
Modify report skin
It is possible to change the header and footer of the report.
Start by creating new header and footer html files, the orginals can be found at: /opt/monitor/op5/ninja/application/media
Use these files as templates and save your files in the same directory.
After this the reports.php needs to be modifed to include you header and footer. Copy the reports.php to the custom folder:
cp /opt/monitor/op5/ninja/application/config/reports.php /opt/monitor/op5/ninja/application/config/custom
Edit the file /opt/monitor/op5/ninja/application/config/custom/reports.php
At the end of the file this line has to be changed, point the report_header.html and report_footer.html to your modified files.
$config['pdf_command'] = '/usr/bin/wkhtmltopdf -q --print-media-type --disable-internal-links --disable-external-links --margin-top 10 --margin-bottom 10 --header-spacing 5 --footer-spacing 5 --header-html application/media/report_header.html --footer-html application/media/report_footer.html - -';
Changing what skin op5 Monitor use
To change what skin op5 Monitor shall use
1 Go to the application folder:
cd /opt/monitor/op5/ninja/application/config
2 Open up config.php in your favorite text editor.
3 Look up and change the following line and change the skin name from default/ to my_skin/ in this case:
$config['current_skin'] = 'default/';
4 Save and exit.