skip to main content

GUI themes

GUI themes
About GUI themes
This chapter covers the following topics:
Introduction
All views in the op5 Monitor user interface are built up with help of theme templates. In the default op5 Monitor installation there is only one them:
default
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 themes shall be placed in a folder of its own directly under:
/opt/monitor/op5/ninja/application/views/themes
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:
*
*
*
*
*
*
*
*
*
*
*
*
*
A more detailed description of the files listed above is shown in the table below.
 
Locates and enables the files in css/ for the controllers.
Java scripts that is used by the controllers. The controller it self decides what file to use.
Locates and enables the files in js/ for the controllers.
Make your own theme
Before you start
Before you can start making changes to the please make sure you have
*
*
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_theme
Creating your own theme
To create your own theme
1
Go to the theme folder:
cd /opt/monitor/op5/ninja/application/views/themes
2
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_theme'] = 'default/';
4
 
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.
*
*
*
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
2
3
Replace the following file with your own:
/opt/monitor/op5/ninja/application/views/themes/my_theme/icons/icon.png
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 featature 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.
Adding hostname to the Quick bar
If you have more then one op5 Monitor server it might be a bit difficult to remember which one you are logged in to when your working in the user interface. Then it could be a good idea to add the hostname to the Quick bar at the top of the user interface.
To add the hostname to the Quick bar
1
2
Go to the folder of your theme:
cd /opt/monitor/op5/ninja/application/views/themes/my_theme
3
Open up template.php in your favorite text editor.
4
5
Between the lines found in 4 add the following line:
<br /><strong>This host: <?php echo $_SERVER['SERVER_NAME']; ?></strong>
6
Now it will look like this in the Quick bar:
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
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
6

Feedback on documentation Feedback on documentation