Creating a custom theme

You can create a custom theme for your white label users.

This creates a user interface that is consistent with your own brand.

myPresences themes use CSS variables.  You can change these directly in your browser to see how a change affects the myPresences interface.

These variables can be overridden in the CSS editor in your Account White label settings under the pages tab.

To create a custom theme you should add your overridden css variables to a class called either custom-theme-1 or custom-theme-2.

These can then be selected from the Default Theme dropdown to select the custom theme for your users.

Select Custom Theme 1 or Custom Theme 2 depending on the css class you have set in the editor.

Custom themes override the look and feel of the Default theme. 

The simplest way to create a new theme is to customise the areas of the default theme that you want to change.

For example, if you only want to change the sidebar color you can set you default theme to:

Designing a theme

When designing a theme the easiest way to try different options is to use the browsers development console.

Open your browsers development console

While browsing a myPresences page look at the elements of the page and select the body tag.  In the css editor you should see the theme class and the default theme class .default-theme.

You can edit the css variables starting with --mp-- to see how changing that variable changes the UI.

Custom CSS variables

The following CSS variables are supported.

Editing the variables requires basic knowledge of how to set sizes and colours in css.

CSS colors

Sizes can be specified in pixels (20px) or any other css size specifier (rem, em, %).

All myPresences CSS variables start with --mp--.

Some of the most used variables are documented here with the full list below.

* these fields also support a css background specifier for gradients and images if required.

Here is the full list of supported variables and their default values (the default  theme).

.default-theme {
  --mp-link-text-color: #569;
  --mp-input-background: white;
  --mp-font-size: 100%;
  --mp-text-color: #212528;
  --mp-dark-text-color: #212528;
  --mp-muted-text-color: gray;
  --mp-hr: 1px solid rgba(0, 0, 0, 0.1);
  --mp-background: #F3F3F6;
  --mp-modal-background: white;
  --mp-sidebar-background: #7386D5;
  --mp-sidebar-header-background: #6d7fcc;
  --mp-sidebar-child-background: #6d7fcc;
  --mp-sidebar-text-color: white;

  --mp-sidebar-selected-background: #abb6e5;
  --mp-sidebar-selected-text-color: white;


  --mp-sidebar-font-size: 1rem;
  --mp-sidebar-font-weight: 300;
  --mp-sidebar-child-font-size: 0.9em;
  --mp-sidebar-child-font-weight: 300;
  --mp-sidebar-box-shadow: 0 4rem 0.5rem rgba(0, 0, 0, 0.75);

  --mp-topbar-background: white;
  --mp-topbar-text-color: black;
  --mp-topbar-icon-color: #7386D5;
  --mp-topbar-border-bottom: 1px solid lightgray;
  --mp-topbar-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);

  --mp-userdropdown-background: white;
  --mp-userdropdown-selected-background: white;
  --mp-userdropdown-text-color: black;
  --mp-userdropdown-selected-text-color: black;
  --mp-userdrowdown-icon-color: #7386D5;

  --mp-content-background: white;
  --mp-content-hover-background: whitesmoke;
  --mp-content-alternative-background: #eeeeee;
  --mp-card-border: 1px solid rgba(0,0,0,.08);

  --mp-page-header-background: #e7e7ed;
  --mp-page-header-text-color: black;

  --mp-event-header-background: radial-gradient(circle at 90% 5%, #7ba5f0, #6495ed);
  --mp-event-header-text-color: white;
  --mp-event-header-border-bottom: 1px solid #1f66e5;

  --mp-tooltip-background: black;
  --mp-tooltip-text-color: white;

  --mp-active-tab-background: white;
  --mp-tabs-border: 1px solid #dee2e6;

  --mp-green-text: green;
  --mp-orange-text: orange;
  --mp-red-text: red;

  --mp-action-button-background: #7386D5;

  --mp-primary-button-background: #007bff;
  --mp-primary-button-text-color: white;
  --mp-primary-button-border: 1px solid #007bff;

  --mp-primary-button-selected-background: #0069d9;
  --mp-primary-button-selected-border: 1px solid #007bff;

  --mp-primary-button-disabled-background: gray;
  --mp-primary-button-disabled-text-col-r: lightgray;
  --mp-primary-button-disabled-border: 1px solid #007bff;


  --mp-success-button-background: #28a745;
  --mp-success-button-text-color: white;
  --mp-success-button-border: 1px solid #28a745;

  --mp-success-button-selected-background: #218838;
  --mp-success-button-selected-border: 1px solid #1e7e34;
  //
  //--mp-success-button-disabled-background: gray;
  //--mp-success-button-disabled-text-col-r: lightgray;
  //--mp-success-button-disabled-border: 1px solid #007bff;

  --mp-danger-button-background: #ff6666;
  --mp-danger-button-text-color: white;
  --mp-danger-button-border: 1px solid #ff6666;

  --mp-danger-button-selected-background: #DE350B;
  --mp-danger-button-selected-border: 1px solid #DE350B;
  //
  //--mp-danger-button-disabled-background: gray;
  //--mp-danger-button-disabled-text-col-r: lightgray;
  //--mp-danger-button-disabled-border: 1px solid #007bff;
}