skip to main content
GUI Themes
  
GUI skins
Introduction
All views in the op5 Monitor user interface are built up with help of skin templates. In the default op5 Monitor installation there is three of them:
Default
Dark, a darker theme that is sutible for big screens
Pink-n-fluffy, it’s pink n’ fluffy!
If you like to change any of the parts of the op5 Monitor user interface the best way to do that is to create your own theme. That makes sure you do not lose any changes in an upgrade later on. Of course you have to update your theme by your self to be able to enjoy many of the new features that comes with op5 Monitor updates.
In this chapter we will take a closer look of how the theme is built up and some minor changes that can easily be made.
The files and folders
An op5 Monitor theme includes a lot of folders and files. Most of them are never a subject to be changed but you still need them.
All skins shall be placed in a folder of its own directly under:
/opt/monitor/op5/ninja/application/views/css/
All views have their own folder named after the controller they belong to. The view folders can contain everything from one single PHP file to a complex structure of folders, code files (PHP, java script, css), images etc.
Almost all controllers have their corresponding view in the user interface.
Beside the view folders we have the following folders and files:
admin/
css/
css_header.php
error.php
icons/
js/
js_header.php
kohana_unit_test.php
login.php
menu.php
ninja_start.php
template.php
unauthorized.php
A more detailed description of the files listed above is shown in the table below.
 
File/Folder
Description
admin/
For future functions in the user interface. Not in use at the moment.
css/
CSS files that is used by the controllers. The controller it self decides what file to use.
css_header.php
Locates and enables the files in css/ for the controllers.
Do not touch this file!
error.php
A general error messages template.
icons/
All icons used in the user interface.
js/
Java scripts that is used by the controllers. The controller it self decides what file to use.
js_header.php
Locates and enables the files in js/ for the controllers.
Do not touch this file!
kohana_unit_test.php
Do not touch this file!
login.php
The user interface login page.
menu.php
Deprecated!
ninja_start.php
Deprecated!
template.php
The template file in it self. This is the one that creates the main parts of the user interface.
unauthorized.php
A general unauthorized messages template.
Make your own skin
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 theme. 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 theme we create here will be called:
my_skin
Install SASS
SASS or Syntactically Awesome Stylesheets is a CSS metalanguage. It is a scripting language that is interpreted into CSS.
To install SASS go to the folder /opt/monitor/op5/ninja/ and run the command:
make install-sass
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 122
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 theme op5 Monitor use
To change what theme 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 theme name from default/ to my_theme/ in this case:
$config['current_skin'] = 'default/';
4 Save and exit.
 
Making changes in the user interface
As you probably already have realized you can do almost any kind of changes in the op5 Monitor user interface. Covering them all would require a complete manual of its own. So in this chapter we will only take a look at a few of them.
Changing the logo.
Adding hostname to the Quick bar.
Change the default font.
The topics listed above should give you knowledge to do other modifications by your own.
Changing the logo
One thing you might want to do is to change the default logo up in the left corner of the user interface.
Before you starting
To change the logo
1 Make sure you have followed the instructions in:
Make your own skin on page 121.
2 Create your own logo file. It shall meet the following criteria:
Width: 19px
Height: 19px
Type: PNG
3 Place the logo in the folder
/opt/monitor/op5/ninja/application/views/css/my_skin/images/
We call this my_logo.png
4 Change the logo in the file:
/opt/monitor/op5/ninja/application/views/css/my_skin/sass/common.sass
5 Change the following line:
background: url('../../icons/icon.png') no-repeat
to
background: url('../../icons/my_logo.png') no-repeat
6 Save the file and compile the skin. See Compiling skins on page 122
Creating custom logo per login
It is possible to have custom logos based on the name of the username.
Ie. when hosting a monitoring solution for other companies these companies can use their logo.
The logo is selected using regex on the login name.
If user ‘companyA_Joe’ is logged in the companyA logo is displayed, but if comapanyB_Joe is logged in company B logo is displayed.
To enable this feature edit the following file:
/opt/monitor/op5/ninja/application/config/customlogo.php
1 Change $config['enable'] = false; to $config['enable'] = true;
2 Put the logo file (size 19px x 19px) in the folder:
custom_logos/
This folder is relative to your icon folder.
Change the default font
Many visual parts in op5 Monitor are setup in css files. There fore its a good idea to take a look at them and see how they are used.
In this example we will change the default font and make it a bit bigger.
To change the default font
1 Make sure you have followed the instructions in:
Make your own skin on page 121.
2 Go to the folder of your theme:
cd /opt/monitor/op5/ninja/application/views/themes/my_theme
3 Open up the css/default/common.css file in your favorite text editor.
4 At the top of the file common.css you will find the following lines:
* {
text-decoration: none;
font-size: 1.0em;
outline: none;
padding: 0;
margin: 0;
}

Change font-size: 1.0em; to:
font-size: 1.02em;
5 Save and exit from the editor.
6 Refresh the op5 Monitor user interface in your browser and you can see that the default font is a bit bigger now.