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: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.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 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.
CSS files that is used by the controllers. The controller it self decides what file to use. 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. The template file in it self. This is the one that creates the main parts of the user interface. 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.
1
2
1
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/';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.One thing you might want to do is to change the default logo up in the left corner of the user interface.
2
3 Replace the following file with your own:
/opt/monitor/op5/ninja/application/views/themes/my_theme/icons/icon.pngIf 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
2 Put the logo file (size 19px x 19px) in the folder:
custom_logos/
This folder is relative to your icon folder.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.
2
3 Open up template.php in your favorite text editor.
4 Look up the following lines (starting on row 196 if you have not changed the default file):
<div id="quicklinks">
</div>
5 Between the lines found in 4 add the following line:
<br /><strong>This host: <?php echo $_SERVER['SERVER_NAME']; ?></strong>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.
2
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;
6 Refresh the op5 Monitor user interface in your browser and you can see that the default font is a bit bigger now.