How to modify the FOP2 look by using themes

FOP2 is a web application, as such it is possible to change visual styles just by using CSS rules.

You can define your own visual theme, or use an existing one, by placing your css styles on the following file:

/var/www/html/fop2/css/custom_theme/theme.css

This is a brief sample CSS snippet, so you can get an idea on what could be done:

/* Toolbar Icons */ 
.toolbar_dial_button { background: url(images/dial.png) no-repeat; } 
.toolbar_blindtransfer_button { background: url(images/blindtransfer.png) no-repeat; } 

/* Background color for calls waiting in queue */ 
.qentry { background-color: #EEF9AF; } 

/* Button States */ 
.free { background-color: #B7F0EC; } 
.busy { background-color: #F4C782; }

If you look at the custom_theme directory, you will notice there is a bundled alternate style named theme.celeste.css , if you want to try it out, you can rename that file just to theme.css and see how it looks FOP2 after that:

After placing a theme.css file on that directory, try to log into FOP2 with your browser (and be sure to clear the cache if you made changes to the .css file). New CSS rules will be loaded and the visual style changed accordingly.

Look at the sample theme.celeste.css file to see what things can be changed and how. The same stle file will serve as a base for your own themes.

Hope you take advantage of this powerful customization option.