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

Theme File Location

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

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

Creating Custom CSS Themes

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; }

Using Bundled Themes

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 to theme.css and see how FOP2 looks after that:

cd /var/www/html/fop2/css/custom_theme
cp theme.celeste.css theme.css

Applying Your Theme

After placing a theme.css file in 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.

Getting Started with Theme Development

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

Hope you take advantage of this powerful customization option!