FOP2 display styles can be tweaked using CSS. Since version 2.30, it is possible to write custom CSS modifications in your own theme file to change the visual appearance.

This example makes extension buttons wider and the font a little smaller than the default, so longer caller ID names can fit on them.

Create Your Custom Theme File

Create the following file if it does not already exist:

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

You can write any CSS rules you want in that file. Open it with your preferred text editor and add the following rule:

.extenbutton {
    -moz-border-radius: 5px;
    -moz-box-shadow: 2px 2px 3px #999;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 3px #999;
    border: 2px solid #AAA;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #999;
    color: #000;
    float: left;
    font-size: 75%;
    margin: 3px;
    padding: 2px;
    width: 21em;
}

Adjust the Values

The width and font-size values in this example were changed from the defaults. You can adjust them until the buttons fit your layout and display the caller ID names the way you want.

There are similar classes for other button types, including:

• .queuebutton
• .ringgroupbutton
• .trunkbutton
• .conferencebutton
• .parkbutton

To see the default values, look at:

/var/www/html/fop2/css/operator.css

Use those defaults as the base for your own changes in the custom theme file.