Introduction

In this guide, we want to show you how to ‘White Label’ the plugin. This isn’t a complete white-label solution but it will remove most of our branding assets. To do this, we’ll use a couple of CSS snippets to hide our logos and Foxy’s images from the Admin App.

For this to work out properly, you’ll need to create a new custom.css file in the theme. Here’s a guide with more information on how to add it: Add Admin App Custom CSS.

SSA Logo

To hide the logo add this CSS snippet to your custom.css file:

/* Hide SSA Logo */
.app-header img {
    display: none !important;
}

Settings’ Images with Foxy

To hide Ms. Foxy’s glamour shots, add this CSS to your custom.css file:

/* Hide Settings Images of Foxy */
.md-card.settings .md-card-media {
    display: none !important;
}

Contact Support Team Button

If you’re white-labeling for a client, you can also remove the Contact Support Button under the Support tab. This will ensure that they contact you whenever they need any help.

To hide the ‘Contact Support Team’ button:

/* Hide Contact Support Team Button */
.support .md-toolbar .md-theme-default.md-button:not([disabled]).md-primary.md-raised, 
.support .md-toolbar .md-theme-default.md-button:not([disabled]).md-primary.md-fab {
display: none !important;
}

Change the Background and Accent Color of the Admin App

Switch out the word orange for your desired accent color.

And, the word ivory for your desired background color.

/* Change the accent color of the admin app */
.md-theme-default.md-toolbar,
.md-theme-default.md-button:not([disabled]).md-primary:not(.md-icon-button),
.md-layout.main-settings-col .md-toolbar .md-button.router-link-active,
.md-theme-light-green.md-button:not([disabled]).md-primary.md-raised,
.md-theme-reverse.md-switch.md-checked .md-switch-thumb,
.md-theme-reverse.md-switch.md-checked .md-switch-container,
.md-toolbar .md-button:hover:not([disabled]):not(.md-raised):not(.md-icon-button):not(.md-fab),
.md-theme-default.md-button:not([disabled]).md-primary.md-raised:hover,
.mdc-theme-name--light-green.mdc-chip,
.mdc-theme-name--light-green .mdc-chip__icon.mdc-chip__icon--trailing,
.mdc-theme-name--light-green .mdc-chip__icon.mdc-chip__icon--trailing:hover,
.md-theme-light-green .cov-date-monthly,
.md-theme-blue-grey.md-button:not([disabled]).md-primary.md-fab{
background-color: orange;
color: white;
}

.md-card.md-theme-light-green {
border-top: 5px solid orange;
}

html .md-theme-default.md-radio.md-checked .md-radio-container {
border-color: orange;
}

.md-theme-default.md-select-content .md-menu-item.md-selected,
.md-theme-default.md-icon.md-primary,
html .md-theme-default.md-radio.md-checked .md-ink-ripple, html .md-theme-default.md-radio .md-ink-rippe,
.mdc-theme-name--light-green.mdc-icon-button, .mdc-theme-name--light-green .mdc-icon-button,
.md-theme-default.md-tabs.md-transparent>.md-tabs-navigation .md-tab-header.md-active, .md-theme-default.md-tabs.md-transparent>.md-tabs-navigation .md-tab-header:focus,
.md-theme-default.md-list .md-list-item .router-link-active.md-list-item-container,
.md-theme-default.md-list .md-list-item .router-link-active.md-list-item-container>.md-icon {
color: orange;
}

html .md-theme-default.md-checkbox.md-checked .md-checkbox-container,
.md-theme-default.md-checkbox.md-primary.md-checked .md-checkbox-container,
.md-theme-reverse.md-checkbox.md-checked .md-checkbox-container{
background-color: orange;
border-color: orange;
}

.md-theme-default.md-tabs.md-transparent>.md-tabs-navigation .md-tab-indicator,
.ssa-booking-dialog .md-dialog .close {
background-color: orange;
}

.ssa-import-export .export-code:focus {
border-color: orange;
outline: 1px solid orange;
}
/* ————————————————————————— */

/* Change the background color of the admin app */
body {
background: ivory;
background-color: ivory !important;
}

Related Guides

• 

  Adding Custom CSS Stylesheets

• 

  Custom Email Styles for Notifications

• 

  Styling the Booking Calendar

• 

  Helpful Customization Guides