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 two of them:
•Default
•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 skin. That makes sure you do not lose any changes in an upgrade later on. Of course you have to update your skin 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 skin is built up and some minor changes that can easily be made.
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 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 |
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.
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
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
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.