Skip to main content

Appearance & Branding (System)

The Vodia PBX can be branded so that the web interface, the login screens and the provisioned desk phones carry your own identity instead of the default Vodia look. Branding is organized in two layers:

  • System (this page) — the defaults for the whole PBX. Configured by the system administrator.
  • Tenant — each tenant can inherit the system branding or override it with its own. See Tenant Branding & Logo Upload.
The branding cascade

A tenant that has not set its own accent colour, logo, favicon or login background inherits whatever you configure here at the system level. As soon as a tenant sets its own value, that value wins for that tenant only. This lets you ship a house style system-wide and still let individual tenants override it.

In version 70 and later, most branding is done from a dedicated Appearance Settings page — no template or CSS editing required. Open it from the admin menu under Customize → Appearance.

What you can customize​

In version 70 and later the Appearance Settings page groups the following:

SettingWhere it showsScope
Accent colourAdmin interface only (buttons, links, highlights)System-wide; tenants inherit
Web interface logo (light + dark)Admin interface and user portal headerSystem-wide; tenants inherit
FaviconBrowser tab, admin interface and user portalSystem-wide; tenants inherit
Login & Logout backgroundThe pre-login welcome and post-logout goodbye screensSystem-wide; tenants inherit
App / documentation linksRegistration & footer links in the interfaceSystem-wide

Accent colour​

The accent colour is the brand colour used across the admin interface for buttons, links and highlights. Pick a colour with the colour picker or click one of the preset swatches (Blue, Indigo, Purple, Pink, Red, Orange, Amber, Green, Teal, Cyan, Charcoal). A live sample button, link and badge show the effect before you save. Use Reset to return to the default accent.

The accent applies to the admin interface only — it does not recolour the user portal or the login screens. Tenants inherit this accent until they set their own.

note

The accent colour is stored server-side in the system web-template store (the theme file _data/theme) and saved together with the rest of the Appearance page. The browser also keeps a small cached copy so the interface doesn't flash the default colour while a page loads.

Two logo files can be uploaded, both in SVG format:

  • Logo for light backgrounds — used in light mode.
  • Logo for dark backgrounds — used in dark mode.

SVG is required here because it scales cleanly to any size. The preview panes show each logo on the background it is intended for.

These logos appear in the header of both the admin interface and the user portal. They are saved to the system web-template store as img/logo-dark.svg (light-background logo) and img/logo-light.svg (dark-background logo) — the same files the Customize → Templates editor reads and writes, so the two stay in sync.

tip

For advice on choosing good source material (vector format, transparency, light vs dark variants), see the branding notes in Tenant Branding & Logo Upload.

Favicon​

The favicon is the small icon shown in the browser tab. Upload an .ico, .png or .svg up to 256 KB. It applies to both the admin interface and the user portal and is stored as favicon.ico in the web-template store.

Login & Logout page background​

This customizes the background of the pre-login welcome screen and the post-logout goodbye screen. The login/logout card itself is unchanged — only the area behind it. Choose one of four types:

  • None — the default neutral background.
  • Color — a single solid colour.
  • Gradient — two colours with a direction: linear (top-to-bottom, left-to-right, or diagonal) or radial.
  • Image — a JPEG, PNG or WebP up to 2 MB.

A Frame logo and footer toggle (on by default) puts a soft frosted-glass panel behind the logo and the copyright footer so they stay legible over a busy image or gradient. Turn it off for a completely clean look. A live preview reflects your choices, and the same background is used in both light and dark mode.

How it is stored

The structured settings are saved into _data/theme (under a welcomeBg key, alongside the accent). On save, the PBX generates a stylesheet css/welcome-bg.css that is linked from both the welcome and goodbye pages and served before login. Image uploads are saved as img/welcome-bg.<ext>. Setting the type back to None removes the customization.

The lower part of the page carries a few link fields used in the registration and footer areas of the interface:

  • Documentation link — where the in-app help/documentation points.
  • Company link — your company website.
  • App store link — the download link for your branded softphone app.
  • VoIP background image URL — default background image referenced for VoIP branding.

Unlike the accent, logo, favicon and login background, these are stored in the system configuration.

Advanced customization​

The Appearance Settings page covers the common cases. For anything it does not, you can edit the underlying template, CSS and JavaScript files directly under Customize → Templates (select the administrator web pages), or provide files from the file system. These methods work in version 70 and later as well as in earlier versions.

Editing the logo files directly​

Option 1 — edit the template files. The default logos live at img/logo-dark.svg (light backgrounds) and img/logo-light.svg (dark backgrounds). Because SVG is text, they can be edited like any other file under Customize → Templates. This is the same store the Appearance Settings logo upload writes to.

Option 2 — provide files from the file system. When the logo must come from the file system instead:

  • Create a pbxwebai folder inside pbx, or a content folder for version 70 and above.

  • For version 70 and above, pass --user-dir to the PBX in the start-up script, for example:

    PBXNAME=pbxctrl
    PBXEXE=/usr/local/pbx/pbxctrl
    PBXDIR=/usr/local/pbx
    USRDIR=/usr/local/pbx/content

    #Service script for the Vodia PBX:
    case "$1" in
        start)
            echo -n "Starting PBX daemon"
            $PBXEXE --dir $PBXDIR --user-dir $USRDIR --respawn || return=$rc_failed
            echo -e "$return"
            ;;

  • Inside pbxwebai (or content) create img and css folders:

    • img — non-default images (.../pbx/pbxwebai/img or .../pbx/content/img).
    • css — CSS overrides (.../pbx/pbxwebai/css or .../pbx/content/css).

  • Place your logo in the img folder to replace the default Vodia logo.

  • Log in as admin, navigate to Settings → Network → Ports and allow the system to read global files.

User portal CSS and JavaScript​

Add rules to css/user_portal_custom.css to override the user-portal styling, and code to js/user_portal_custom.js to run custom JavaScript in the user portal. (In version 70, the tenant custom home screen also writes to js/user_portal_custom.js.)

Login page CSS (welcome.css)​

The login screen loads css/welcome.css, so most edits can be made there without touching the HTML or JavaScript. In version 70 and later, prefer the Login & Logout background controls for backgrounds; use welcome.css for anything those controls do not cover. For example, to set a login background image directly:

#image {
  width: calc(100% - 450px);
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  background-image: url("https://your_web_server/logo.svg");
  background-position: center;
}

If you edit welcome.htm directly, keep the element names intact so future upgrades do not conflict with the JavaScript.

Legacy theming — version 69 and earlier​

warning

The CSS-variable theming described here (appearance.css with --primary-color, --secondary-color, etc.) is the legacy styling system. It is largely non-functional in version 70 and later, which uses the accent colour and the Appearance Settings page instead. Use this section only for older deployments.

appearance.css defines the CSS variables that colour the interface. The most commonly changed:

  • --primary-color — primary colour of the admin web pages.
  • --secondary-color — secondary colour of the admin web pages.
  • --login-checkbox-main-color — login checkbox background colour.
  • --login-checkbox-check-color — login checkbox check-mark colour.