HOWTO Custom Interface Branding

From Bicom Systems Wiki


If you are using PBXware version 4.1, we have made the branding much easier, check our Site Settings Branding Page


License Check

  • Login to the system administration
  • Navigate to 'SM Settings' . You should see Branding if enabled
  • If branding is not enabled, please contact your account manager

Login page company logo:

Create a company logo image, save it as 'customlogo.jpg' and move it into following directory

 /opt/pbxware/pw/gui/admin/img/customlogo.jpg

If above directory doesn't exist create it with:

 mkdir /opt/pbxware/pw/gui/admin/img

Custom CSS files: Navigate to PBXware CSS directory

       cd /opt/pbxware/pw/gui/admin/css 

Create a new directory called 'custom' there

       mkdir custom 

Copy all CSS files from 'css' directory to 'custom' directory

       cp *.css custom

PBXware company logos: Create custom company logos that will appear under left navigation (bicom_leftnav.gif) and under main content area (large_bicom.jpg) and copy them to following directory:

 /opt/pbxware/pw/gui/admin/images/custom/bicom_leftnav.gif
 /opt/pbxware/pw/gui/admin/images/custom/large_bicom.jpg

Switch PBXware to new branding settings:

  • Login to the system interface
  • Navigate to 'SM Settings->Branding'
  • Set 'Branding Logo'='Custom'
  • Set 'Branding CSS'='Custom'
  • Click on 'Save'

main.css file needs to be edited so it can find above images. The following two sections need to look like:

 .boxcontent { 
 background: #E4EDF2 url('../../images/custom/large_bicom.jpg') no-repeat bottom right; 
 color : #000; 
 }

and

 div.container { 
 float: left; 
 width: 890px; 
 height: 100%; 
 background: #FFF5F0 url('../../images/custom/bicom_leftnav.gif') no-repeat bottom left 
 }


You can additionaly edit the CSS files to suit your needs.

 /opt/pbxware/pw/gui/admin/css/custom/ext.css
 /opt/pbxware/pw/gui/admin/css/custom/main.css


NOTE: Refresh the browser by pressing CTRL+F5 to see new changes

To check how to change Help tab URL please go to https://wiki.bicomsystems.com/HOWTO_Changing_Help_Tab_URL