White Label Dashboard Customization

In this article we share CSS templates allowing you to customize White Label dashboard easily, by simply specifying the relevant preoperties. 

How to Use CSS Templates #

Open your White Label dashboard, scroll it down to the 'Enable custom CSS' switch and activate it: 

Next, you can simply copy and paste the templates described below and adjust the values as you like. Default values are matching default Convertful application design.

Primary Color of the Site #

Main background color for the dashboard

/* Primary color of the site */
html, .b-body, .b-footer, .b-menu-item.active::before { background-color: #fff; } 

Main Text Color #

Color for regular dashboard text and headers

/* Text color on site pages */
.b-body,
.b-body.subscriber-list .b-titlebar h1 span {
    color: #3a506b;
}

Text Mute Color #

Color for complementary text, gray-colored instructions, and tips

/* Text mute color on site pages */
.b-profile-item-label,
.b-body.widget-list .for_description,
.b-body.integration-update .b-settings-description {
    color: #9096a3;
}

Global Link Settings #

Colors for hypertext links of the dashboard

/* Global link settings */
a,
.b-results-perpage,
.b-textfilter-trigger > span,
.g-table thead td.sort_desc a {
    color: #277cea;
}
a:hover,
.b-textfilter-trigger > span:hover,
.g-table thead td.sort_desc a:hover {
    color: #3b4e62;
}

Status Messages #

Site status messages color (disconnected site)

/* Statuses */
.g-status.type_error {
    background-color: #ea524a;
}
.g-status.type_active {
    background-color: #53b753;
}
.g-status.type_inactive {
    background-color: #9096a3;
}
.g-status.type_blocked {
    background-color: #3b4e62;
}

Sub-Header Colors #

Colors for dashboard header's second-row menu

/* Color caps and text second level */
.b-subheader .b-menu {
    background-color: #314152;
    color: #fff;
}
.b-body .b-subheader .b-menu-item:hover > a {
    background-color: #8892d6 !important;
    color: #ffffff;
}

Tooltips #

Colors for popping up tooltips (question mark icons' on-hover tips)

/* Colors of all message prompts */
.g-tooltip {
    background-color: #000;
    color: #e1e4e6;
}

Icons #

Refresh icons:

/* Icons color refresh */
.cof-form-row-control-refresh {
    color: #277cea !important;
}
.cof-form-row-control-refresh:hover {
    color: #1f63bb !important;
}

Important icons (disconnected site):

/* Colors of red icons (disconnect) */
.g-note.type_warning::before {
    color: red;
}

Control icons (analytics, settings, etc.)

/* Control Icons (Sites, Widgets) */
.for_actions a {
    color: #277cea;
}
.for_actions a:hover {
    color: #3b4e62;
}

Buttons #

Gray buttons with the background (Create Group)

/* Gray button with background (Create Group) */
.g-btn.style_solid.color_light {
    background-color: #e1e4e6;
    border-radius: 3px;
    border: 0px solid #e1e4e6;
    color: #3b4e62;
    padding: 0 24px;
}
.g-btn.style_solid.color_light:hover {
    background-color: #d5d8db;
    border: 0px solid #d5d8db;
    color: #3b4e62;
    padding: 0 24px;
}

Green buttons with the background (Create Widget, Save Changes)

/* Green button with background */
.g-btn.style_solid.color_green {
    background-color: #53b753;
    border-radius: 3px;
    border: 0px solid #53b753;
    color: #fff;
    padding: 0 24px;
}
.g-btn.style_solid.color_green:hover {
    background-color: #3f983f;
    border: 0px solid #3f983f;
    color: #fff;
    padding: 0 24px;
}

Blue buttons with the background (Site's main settings Save)

/* Blue button with background */
.g-btn.style_solid.color_primary {
    background-color: #277cea;
    border-radius: 3px;
    border: 0px solid #277cea;
    color: #fff;
    padding: 0 24px;
}
.g-btn.style_solid.color_primary:hover {
    background-color: #1f63bb;
    border: 0px solid #1f63bb;
    color: #fff;
    padding: 0 24px;
}

Blue buttons with no background (Site settings sub-controls)

/* Blue buttons with no background */
.g-btn.style_outlined {
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px #277cea;
    color: #277cea;
    padding: 0 24px;
}
.g-btn.style_outlined:hover {
    background-color: #277cea;
    color: #fff;
    padding: 0 24px;
}

Red buttons with no border (Site settings, buttons to erase site, analytics, stats)

/* Red buttons with no background */
.g-btn.style_outlined.color_red {
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px #ea524a;
    color: #ea524a;
    padding: 0 24px;
}
.g-btn.style_outlined.color_red:hover {
    background-color: #ea524a;
    box-shadow: inset 0 0 0 2px #ea524a;
    color: #fff;
    padding: 0 24px;
}

Buttons for analytics section / calendar

/* Buttons on the statistics page of the calendar */
.b-datepicker-preset {
    background-color: #fff;
    border: 1px #e1e4e6 solid;
}
.b-datepicker-preset.active {
    background-color: #277cea;
    color: #fff;
}

Switchers #

Styling for widget status (active/inactive) switchers

/* Switch site enable/disable.*/
.b-stateswitcher.action_activate {
    background: #e1e4e6;
    color: #3b4e62;
    padding: 0 10px 0 30px;
}
.b-stateswitcher.action_deactivate {
    background: #e1e4e6;
    color: #3b4e62;
}
.b-stateswitcher::before {
    background: #fff;
    border-radius: 10px;
}

Checkboxes #

Styling for site's settings checkboxes

/* Colors of all checkboxes */
.cof-checkbox-icon {
    background: #f1f2f3 !important;
    border: 1px solid #e1e4e6 !important;
}
.cof-ruleset .cof-checkbox-icon:hover,
.cof-checkbox:hover .cof-checkbox-icon {
    background: #e1e4e6 !important;
    border-color: #d5d8db !important;
}
.cof-ruleset input:checked + .cof-checkbox-icon,
.cof-checkbox input:checked + label .cof-checkbox-icon {
    background-color: #277cea !important;
    border-color: #277cea !important;
    color: #fff;
}