Customize VICIphone’s layout

VICIphone’s layout is setup using Cascading Style Sheets (CSS) which is an industry standard for website design. If you know how to configure CSS you can change the layout of VICIphone. If you do not know CSS, you will want to learn that first. There are hundreds of really good tutorials out there on CSS. A quick google search of “CSS tutorials” is a great place to start.

To start with download the default CSS file here and open it in your favorite text editor. The different classes and ids are fairly straight forward, but here is an explanation of each one:

IDs:

#container – The general container for VICIphone. This determines its overall size and position.
#main – The main container for VICIphone. This container is inside #container. This is used to create a boarder and rounded edges around the rest of the UI.
#logo – This is the logo container. This container is inside #main. This is used to create a boarder and rounded edges around the actual logo image.
#logo_img – This is the actual logo image for VICIphone.
#controls – This is the controls container. This container is inside #main. This is used to create a boarder and rounded edges around the various controls in the UI.
#registration_control – This is the registration control container. This container is inside #controls. This is to create a boarder and rounded edges around the registration controls.
#reg_status – This is the registration status box.
#register – This is the register button.
#unregister – This is the unregister button
#dial_control – This is the dial control container. This container is inside #controls. This is to create a boarder and rounded edges around the dial controls.
#digits – This is the digits text box
#dial – This is the dial button
#audio_control – This is the audio control container. This container is inside #controls. This is to create a boarder and rounded edges around the audio controls.
#mic_mute – This is the mic mute button
#vol_up – This is the volume up button
#vol_down – This is the volume down button
#dialpad – This is the dialpad container. This container is inside the #main container. This is to create a boarder and rounded edges around the dial pad.
#dial_row1 – This is the dial_row1 container. This container is inside the #dialpad. This is used to position the first row of buttons in the dialpad.
#one – This is the one button
#two – This is the two button
#three – This is the three button
#dial_row2 – This is the dial_row2 container. This container is inside the #dialpad. This is used to position the second row of buttons in the dialpad.
#four – This is the four button
#five – This is the five button
#six – This is the six button
#dial_row3 – This is the dial_row3 container. This container is inside the #dialpad. This is used to position the third row of buttons in the dialpad.
#seven – This is the seven button
#eight – This is the eight button
#nine – This is the nine button
#dial_row4 – This is the dial_row4 container. This container is inside the #dialpad. This is used to position the forth row of buttons in the dialpad.
#star – This is the star button
#zero – This is the zero button
#pound – This is the pound or hash button depending on what you feel like calling it
#dial_dtmf – This is the dial_dtmf container. This container is inside the #dialpad. This is used to position the dtmf_digits field and the send dtmf button
#dtmf_digits – This is the text field for dtmf digits to send
#send_dtmf – This is the send button for the dtmf digits

Classes:

.button – This is the class used by all of the buttons accept the dialpad buttons. This controls the look of the buttons when the mouse is not over it and when someone has not clicked it.
.button:hover – This is the class used by all of the buttons accept the dialpad buttons. This controls the look of the buttons when the mouse is hovering over it.
.button:active – This is the class used by all of the buttons accept the dialpad buttons. This controls the look of the buttons when someone has clicked it.
.dialpad_button – This is the class used by all of the dialpad buttons. This controls the look of the dialpad buttons when the mouse is not over it and when someone has not clicked it.
.dialpad_button:hover – This is the class used by all of the dialpad buttons. This controls the look of the dialpad buttons when the mouse is hovering over it.
.dialpad_button:active – This is the class used by all of the dialpad buttons. This controls the look of the dialpd buttons when the mouse is hovering over it.

Once you have created your own CSS file for VICIphone you will need to hosted it somewhere. If you have access to where the VICIphone app is being hosted you should put the style sheet in the /css subdirectory. If you do not have access to where the VICIphone app is being hosted (for instance you are using our free hosted version of it) you can host it on any HTTPS enabled web server with a VALID SSL certificate. NOTE: If it is loaded from an HTTP webserver VICIphone will fail to start.

To use this CSS file with VICIdial go into Admin -> Phones in the VICIdial admin interface and go into each of the phones you want to set this on. Change the “Webphone Layout” field to either the name of the CSS file if it is being hosted where the VICIphone app is being hosted or the full URL path to the CSS file if it is being hosted somewhere else.

To use this CSS file in a web application that you have integrated VICIphone into, simply set the $layout PHP variable to the path or URL to this CSS file before loading the vp_template.php code. Please see the Integrate VICIphone in other applications guide for further details on integrating with VICIphone.