FOP2 Custom Theme: Making buttons wider so they can show longer caller ids

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 aspect.

We are going to use that feature in order to make extension buttons wider and the font a little bit smaller than default, so you can see longer caller id names on them.

In order to write your own custom theme, you must create this file:

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

In that file you can write any css rules you want.

So open it up in your favorite text editor and add/create this line:

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

Both width and font-size were modified from the default. You can change values until you get a result that suits you best.

Similary, there are other classes to update other button types, like .queuebutton, .ringgroubutton, .trunkbutton, .conferencebutton and .parkbutton.

If you want to see the default values, look for the /var/www/html/fop2/css/operator.css file and use those as a base to edit your theme file.