Appearance Customization

The content the the web interface of the PBX is stored in the pbxctrl.dat file. In some situations there is the need to customize the content. This can be achieved by using the templates in the PBX.

Templates files

Most of the customization can be done without the need to put files into the PBX file system. Those files can be changed by navigating to Customize → Templates and there select the administrators webpages.

General CSS

appearance.css contains the CSS3 variables we are using to assign colours, shapes and other stylistic properties to DOM elements globally.

• --primary-color is used to define the primary color of the admin web pages
• --secondary-color is used to define the secondary color of the admin web pages
• --login-checkbox-main-color: Check box backgroud color
• --login-checkbox-check-color: Check mark color

User portal customization

By adding content to css/user_portal_custom.css you can override the CSS settings for the user portal. Similary, if you need to execute code in the user portal, you can add that code to js/user_portal_custom.js.

Welcome page

Most edits to the welcome login page can be done by editing css/welcome.css without the need to change the HTML and the corresponding JavaScript file. If you want to change the main image, you can change the CSS for the watermark-logo:

#watermark-logo {
  position: fixed;
  left: 25px;
  bottom: 25px;
  width: 75px;
  height: auto;
  content: url("/img/vodia_logo_white.svg");
  opacity: 0.5;
}

If you need to change the welcome.htm file, please make sure that you keep the names for the elements, so that future upgrades will not create conflicts with the JavaScript file.

Logo SVG

The default logo for the PBX is in ìmg/logo.svg and ìmg/logo_white.svg. Those SVG files are used for light and dark backgrounds. Because SVG is text-encoded, those files can be edited like HTML and CSS files in Customize → Templates.

File system

In certain situations it is neccessary to provide the files from the file system

• Create folder pbxwebai inside folder pbx

  • .../pbx/pbxwebai

• Inside of folder pbxwebai create folders img and css

  • img folder : That's where all the non-default images should be placed
    • ../pbx/pbxwebai/img
  • css folder : That's where the appearance.css should be placed
    • ../pbx/pbxwebai/css

• Login to the PBX as admin, navigate to Settings → Network → Ports and allow system to read global files