FOP2 Custom Theme: Reverting to image/colored action buttons on FOP2 2.31.09 and up

Since version 2.31.09, action buttons are now represetend as fonts instead of images. This lets us make the FOP2 UI fully responsive, something that is really dificult to achieve if you use images.

There is one drawback on this approach, fonts are monochromatic.

Anyways, 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 "restore" the original image action icons.

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

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

And write this classes to restore the icon images:

.actionbutton {
   padding:0;
}

.fop2-dial {
  background: url(../../images/toolbar/llamar.png) no-repeat;
  width:40px;
  height:40px;
}


.fop2-dial:before {
  content: ''
}

.fop2-transfer {
  background: url(../../images/toolbar/transferir.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-transfer:before {
  content: ''
}

.fop2-supervised_transfer {
  background: url(../../images/toolbar/supervised_transfer.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-supervised_transfer:before {
  content: ''
}

.fop2-vmail_transfer {
  background: url(../../images/toolbar/transferir_a_voicemail.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-vmail_transfer:before {
  content: ''
}

.fop2-mobile_transfer {
  background: url(../../images/toolbar/transferir_a_movil.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-mobile_transfer:before {
  content: ''
}

.fop2-pickup {
  background: url(../../images/toolbar/pickup.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-pickup:before {
  content: ''
}

.fop2-spy {
  background: url(../../images/toolbar/espiar.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-spy:before {
  content: ''
}

.fop2-whisper {
  background: url(../../images/toolbar/susurrar.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-whisper:before {
  content: ''
}

.fop2-hangup {
  background: url(../../images/toolbar/cortar.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-hangup:before {
  content: ''
}

.fop2-record {
  background: url(../../images/toolbar/record.png) no-repeat;
  width:40px;
  height:40px;
}

.fop2-record:before {
  content: ''
}