White Labelling

Basic Advanced

Upload Logo

Customise the display of the application by choosing your own brand colours. View sample

Primary Brand

Click the text-box above to select the tertiary brand color, used for the following elements:

Header
Section Headers
Table Headers
Buttons

Secondary Brand

Click the text-box above to select the secondary brand color, used for the following elements:

Navigation Bar
Page Headings
Category Dropdowns
Primary Buttons

Tertiary Brand

Click the text-box above to select the tertiary brand color, used for the following elements:

Menu Links
Checkboxes
Icons

Links

Click the text-box above to select the links color, used for the following elements:

Hyperlinks

Supplementary

Click the text-box above to select the supplementary brand color, used for the following elements:

Quick Links
Warnings

If you are familiar with css (cascading stylesheets) then you can change the styles below.

Select All

Edit stylesheet

/* logo */

.page-login header.login-header h1 a,
header.site-header h1 a,
header.site-header .logo a,
.image-manager .img-header .img {
    background-image: url(../../images/logo-blue.png);
}

.image-manager ul.tabs {
    background-color: #243b4a;
}

/*
    primary brand - #00abcf
    light blue, used for header, section headers, table headers and buttons
*/

.datepicker td span.active,
thead tr:first-child th,
.trading-date,
.button.secondary,
.button.secondary:active,
.button.secondary:focus,
.button.secondary:hover,
.action-buttons a.action,
.input-holder.prefixed .prefix,
.input-holder.prefixed .postfix,
.date-holder.prefixed .prefix,
.date-holder.prefixed .postfix,
.ui-autocomplete .ui-menu-item:hover,
.check-me label.checked,
header.site-header,
header.site-header .button-group .button,
header.site-header .action-panel .icons a,
header.site-header .action-panel .icons i,
header.site-header .action-panel .admin a.account-trigger,
.ma-infinitypush-wrapper .topbar,
.ma-infinitypush-wrapper .topbar .icon-group a,
table th,
ul.pagination a:active,
ul.pagination a:focus,
ul.pagination li.current,
p.sort-me a.selected,
.connectedSortable li:active,
.connectedSortable li:focus,
.connectedSortable option:active,
.connectedSortable option:focus,
.connectedSortable2 li:active,
.connectedSortable2 li:focus,
.connectedSortable2 option:active,
.connectedSortable2 option:focus,
.connectedSortable3 li:active,
.connectedSortable3 li:focus,
.connectedSortable3 option:active,
.connectedSortable3 option:focus,
.connectedSortable4 li:active,
.connectedSortable4 li:focus,
.connectedSortable4 option:active,
.connectedSortable4 option:focus,
#dropleft li:active,
#dropleft li:focus,
#dropleft option:active,
#dropleft option:focus,
#dropright li:active,
#dropright li:focus,
#dropright option:active,
#dropright option:focus,
.dropleft li:active,
.dropleft li:focus,
.dropleft option:active,
.dropleft option:focus,
.dropright li:active,
.dropright li:focus,
.dropright option:active,
.dropright option:focus,
.connectedSortable li.ui-state-highlight,
.connectedSortable option.ui-state-highlight,
.connectedSortable2 li.ui-state-highlight,
.connectedSortable2 option.ui-state-highlight,
.connectedSortable3 li.ui-state-highlight,
.connectedSortable3 option.ui-state-highlight,
.connectedSortable4 li.ui-state-highlight,
.connectedSortable4 option.ui-state-highlight,
#dropleft li.ui-state-highlight,
#dropleft option.ui-state-highlight,
#dropright li.ui-state-highlight,
#dropright option.ui-state-highlight,
.dropleft li.ui-state-highlight,
.dropleft option.ui-state-highlight,
.dropright li.ui-state-highlight,
.dropright option.ui-state-highlight,
#nestable-menu a,
.access-legend .trigger,
.party-legend .trigger,
.viewall h3,
.multiple-select .rlbList li.rlbItem.rlbSelected,
div.DTCR_pointer,
.wizard nav ul li.calculate a.icon-calc,
.wizard nav ul li.calculate2 a.icon-floppy,
.wizard nav ul li.update2 a.icon-calc,
.wizard nav ul li.update2 a.icon-floppy {
    background-color: #00abcf;
}

[disabled].button,
.disabled.button {
    background-color: #999 !important;
    border-top-color: #999 !important;
}

#dropleft option:active,
#dropleft option:checked,
#dropleft option:focus,
#dropright option:active,
#dropright option:checked,
#dropright option:focus,
.dropleft option:active,
.dropleft option:checked,
.dropleft option:focus,
.dropright option:active,
.dropright option:checked,
.dropright option:focus {
    background-color: #00abcf;
    border-color: #00abcf;
    box-shadow: 0 0 10px 100px #00abcf inset;
}

.uploadfile label:before,
.fieldset .uploadfile label:before,
h2.reverse-me a {
    color: #00abcf;
}

h2.reverse-me a:hover {
    color: #000;
}

.button.secondary {
    border-top-color: #00abcf;
}

.check-me:hover label.check {
    border-color: #00abcf;
}

.m-nav {
    color: #00abcf;
}

.m-nav.open {
    color: #fff;
}

.MetroTouch.RadEditor.reWrapper .reToolbar a.reTool:hover {
    background-color: #fff;
    border-color: #00abcf;
}

.wizard nav ul li.evaluate a {
    background-color: #00abcf;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.wizard nav ul li.evaluate a:hover {
    background-color: #00abcf;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
}

@media screen and (min-width: 40.063em) {
    .navbg {
        background-color: #00abcf;
    }
    .pin-remote,
    .more-remotes a {
        background-color: #00abcf;
    }
}

@media screen and (max-width: 40em) {
    .main-content .content .select-info-cat {
        background-color: #00abcf;
        border-top-color: #00abcf;
    }

.main-content .content ul.info-links {
        background-color: #00abcf;
    }
}

/*
    secondary brand - #243b4a
    dark blue, used for navigation bar, page headings, category dropdowns and primary buttons
*/

.decoration,
.check-me label.actual a,
.wizard .content .whitebox ul a,
ul.chapters li ul li a,
h1 .back-link,
ul.list-objects li a,
.decoration2,
.action-tree-list a,
.panel-blocks .panel-block dt,
.m-nav:active,
.m-nav:focus,
.m-nav:hover,
.home-category2 .pages a,
.home-category2 .pages li,
.main-content h1,
ul.alphabet li a,
.content-block h2,
.wizard .content h2,
#rate-card a.accordion-header,
.multiple-select > div:first-child > span,
footer a.top:before {
    color: #243b4a;
}

.decoration:active,
dl dd a:active,
.check-me label.actual a:active,
.wizard .content .whitebox ul a:active,
ul.chapters li ul li a:active,
h1 .back-link:active,
table a:active,
ul.list-objects li a:active,
.decoration:focus,
dl dd a:focus,
.check-me label.actual a:focus,
.wizard .content .whitebox ul a:focus,
ul.chapters li ul li a:focus,
h1 .back-link:focus,
table a:focus,
ul.list-objects li a:focus,
.decoration:hover,
dl dd a:hover,
.check-me label.actual a:hover,
.wizard .content .whitebox ul a:hover,
ul.chapters li ul li a:hover,
h1 .back-link:hover,
table a:hover,
ul.list-objects li a:hover,
.decoration2:active,
.action-tree-list a:active,
.decoration2:focus,
.action-tree-list a:focus,
.decoration2:hover,
.action-tree-list a:hover {
    color: #000;
}

.admin a.quick-log-out {
    border-left-color: #333;
    border-top-color: #333;
}

.button.primary,
.button.primary-dark {
    background-color: #243b4a;
    border-top-color: #243b4a;
}

.datepicker td.active.day,
.datepicker td.active.year,
.datepicker th.active.day,
.datepicker th.active.year,
.datepicker th.dow,
.datepicker th span.active
.button.primary:active,
.button.primary:focus,
.button.primary:hover,
.action-buttons .quick-action-list .add-quick-action,
.action-buttons .plus-list .add-quick-action,
.fieldset .select-holder.alpha-holder,
.wizard .content .fieldset .select-holder.alpha-holder,
.admin a.quick-log-out,
.nav-bar,
.search-options-holder.select-holder select option,
.search-options-holder.select-holder select option.default,
.ma-infinitypush-wrapper .topbar .icon-group a.selected,
.ma-infinitypush-wrapper .titlebar,
.more-remotes a,
.connectedSortable li,
.connectedSortable option,
.connectedSortable2 li,
.connectedSortable2 option,
.connectedSortable3 li,
.connectedSortable3 option,
.connectedSortable4 li,
.connectedSortable4 option,
#dropleft li,
#dropleft option,
#dropright li,
#dropright option,
.dropleft li,
.dropleft option,
.dropright li,
.dropright option,
#nestable-menu button.selected,
.main-content .content .information-header .select-holder select option,
.main-content .content .information-header .select2-holder select option,
.wizard nav,
.wizard nav ul,
.multiple-select .rlbList li.rlbItem,
table.dataTable thead th,
.hierarchy-alignment a.selected {
    background-color: #243b4a;
}

.hierarchy-alignment a.selected:active,
.hierarchy-alignment a.selected:focus {
    color: #fff;
}

.datepicker td.day.disabled {
    color: #eee;
}

.datepicker th {
    background-color: #fff;
}

.datepicker thead tr:first-child th.cw,
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent;
}

.action-buttons a.action.icon-plus {
    background-color: #243b4a;
    border-color: #243b4a;
}

.action-buttons .quick-action-list,
.action-buttons .plus-list {
    border-top-color: #243b4a;
}

header.site-header .button-group .button.primary {
    background-color: #243b4a;
    border-color: #243b4a;
}

.pinned header.site-header .action-panel .icons ul li a.icon-pin,
.main-content .content .information-header .select-holder,
.main-content .content .information-header .select2-holder,
.search-within-holder {
    background-color: #243b4a;
    border-top-color: #243b4a;
}

.select2-dropdown {
    background-color: #243b4a;
    border-color: #243b4a;
}

footer a.top:before,
footer a.top:hover span {
    background-color: #243b4a;
    color: #fff;
}

@media screen and (max-width: 40em) {
    .nav-bar nav {
        background-color: #243b4a;
    }
}

@media screen and (min-width: 40.063em) {
    .action-buttons .quick-action-list:before,
    .action-buttons .plus-list:before {
        border-bottom-color: #243b4a;
    }

.search-within .icon-search {
        background-color: #243b4a;
        border-top-color: #243b4a;

background-image: -moz-linear-gradient(top, #243b4a, #000);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#243b4a), to(#000));
        background-image: -webkit-linear-gradient(top, #243b4a, #000);
        background-image: -o-linear-gradient(top, #243b4a, #000);
        background-image: -ms-linear-gradient(top, #243b4a, #000);
        background-image: linear-gradient(to bottom, #243b4a, #000);
    }
    .search-within input[type="submit"]:active + .icon-search {
        background-image: -moz-linear-gradient(top, #000, #243b4a);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#243b4a));
        background-image: -webkit-linear-gradient(top, #000, #243b4a);
        background-image: -o-linear-gradient(top, #000, #243b4a);
        background-image: -ms-linear-gradient(top, #000, #243b4a);
        background-image: linear-gradient(to bottom, #000, #243b4a);
    }

.search-within-holder {
        background-color: transparent;
        border-top: 0;
    }

footer a.top:before,
    footer a.top:hover span {
    background: none;
        color: #243b4a;
    }
}

.wizard nav .dd-trigger {
    background-color: #243b4a;
    border-top-color: #243b4a;
}

@media screen and (max-width: 40em) {
    .wizard nav {
        background-color: none;
    }
}

/*
    tertiary brand - #0e7e9a
    mid blue, used for menu links, checkboxes and icons
*/

ul.alphabet li.selected a,
ul.alphabet li:hover a {
    background-color: #0e7e9a;
    border-color: #0e7e9a;
}

.decoration2:active,
.action-tree-list a:active,
.decoration2:focus,
.action-tree-list a:focus,
.decoration2:hover,
.action-tree-list a:hover {
    color: #000;
}

thead tr:nth-child(2) th,
.action-buttons .quick-action-list ul li a:hover,
.action-buttons .quick-action-list ul li.selected a:hover  {
    background-color: #ddd;
}

.fieldset.custom-check.checked span.CheckBox,
.panel-blocks .icon-group a,
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.current,
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button:active,
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_paginate.paging_simple_numbers .paginate_button.current,
.dataTables_paginate.paging_simple_numbers .paginate_button.current:hover,
.dataTables_paginate.paging_simple_numbers .paginate_button:active,
.dataTables_paginate.paging_simple_numbers .paginate_button:focus  {
    background-color: #0e7e9a;
}

.action-buttons .quick-action-list ul li a:active,
.action-buttons .quick-action-list ul li a:focus,
.action-buttons .quick-action-list ul li.selected a:active,
.action-buttons .quick-action-list ul li.selected a:focus,
.action-buttons .plus-list ul li a:active,
.action-buttons .plus-list ul li a:focus,
.action-buttons .plus-list ul li.selected a:active,
.action-buttons .plus-list ul li.selected a:focus {
    background-color: #0e7e9a;
    border-top-color: #0e7e9a;
}

.fieldset.custom-check:hover span.CheckBox {
    border-color: #0e7e9a;
}

.action-tree-list a.open-sub:before,
.action-tree-item a:before {
    border-color: #0e7e9a;
    color: #0e7e9a;
}

.action-tree-list a.open-sub.selected:before,
.action-tree-item.selected a:before {
background-color: #0e7e9a;
    color: #fff;
}

a.action-delete span,
a.action-reset span {
border-bottom-color: #0e7e9a;
    color: #0e7e9a;
}

@media screen and (min-width: 40.063em) {
header.site-header .action-panel .admin ul li a:active,
header.site-header .action-panel .admin ul li a:focus,
header.site-header .action-panel .admin ul li i:active,
header.site-header .action-panel .admin ul li i:focus {
    background-color: #0e7e9a;
    border-top-color: #0e7e9a;
}

header.site-header .action-panel .admin ul li i,
header.site-header .action-panel .admin ul li i:active,
header.site-header .action-panel .admin ul li i:focus,
header.site-header .action-panel .admin ul li i:hover {
    background: #eee;
    border-top-color: #fff;
    color: #000;
}

a.action-delete:before,
a.action-reset:before,
.quick-links ul li span.remove {
    color: #0e7e9a;
}

@media screen and (min-width: 40.063em) {
    .nav-bar nav ul li ul li a:active,
    .nav-bar nav ul li ul li a:focus,
    .nav-bar nav ul li ul li.selected a:active,
    .nav-bar nav ul li ul li.selected a:focus {
        background-color: #0e7e9a;
        border-top-color: #0e7e9a;
    }
}

.main-content .content ul.info-links li a:hover {
    border-color: #0e7e9a;
}

.main-content .content ul.info-links li.selected a,
.main-content .content ul.info-links li.selected a:hover {
    background-color: #0e7e9a;
    border-color: #0e7e9a;
}

.alt-link a {
    border-bottom-color: #0e7e9a;
    color: #0e7e9a;
}

.alt-link a:active,
.alt-link a:focus,
.alt-link a:hover {
    border-bottom-color: transparent;
    color: #0e7e9a;
}

.select-multiple a:hover {
    border-color: #0e7e9a;
}

.select-multiple a:active,
.select-multiple a:focus {
    background-color: #0e7e9a;
}

.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferFrom:hover,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferAllFrom:hover,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferTo:hover,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferAllTo:hover {
    border-color: #0e7e9a;
}

.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferFrom:active,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferFrom:focus,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferAllFrom:active,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferAllFrom:focus,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferTo:active,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferTo:focus,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferAllTo:active,
.multiple-select .RadListBox .rlbButtonAreaRight a.rlbButton.rlbTransferAllTo:focus {
    background-color: #0e7e9a;
}

.MetroTouch.RadEditor.reWrapper table td.reEditorModesCell a.reMode_design_selected span,
.MetroTouch.RadEditor.reWrapper table td.reEditorModesCell a.reMode_html_selected span,
.MetroTouch.RadEditor.reWrapper table td.reEditorModesCell a.reMode_selected span {
    background-color: #0e7e9a;
    border-color: #0e7e9a;
}

/*
    links - #0e7e9a
    mid blue, used for hyperlinks
*/

a,
.decoration2,
.action-tree-list a,
.action-buttons .quick-action-list ul li a,
.action-buttons .quick-action-list ul li.selected a,
.show-manual-fields,
.search-again,
.search-again2,
ul.chapters li h3,
.home-category h4,
.home-category2 h4,
h1 .back-link,
.sortme,
.reveal-modal h2,
.reveal-modal a,
.nav-bar nav ul li ul li a,
.nav-bar nav ul li ul li.selected a,
.nav-bar nav ul li.selected ul li a,
.nav-bar nav ul li.selected ul li.selected a,
.page-login .forgot-password-section h2 a,
.panel-block dl dd a,
table a,
dl dd a {
    color: #0e7e9a;
}

a:active,
a:focus,
a:hover,
.sortme:active,
.sortme:focus,
.sortme:hover,
.page-login .forgot-password-section h2 a:hover,
.panel-block dl dd a:hover {
    color: #000;
}

.home-category h4:hover,
.home-category2 h4:hover {
    color: #222;
}

::selection {
    background: #0e7e9a;
}

::-moz-selection {
    background: #0e7e9a;
}

img::selection {
    background-color: transparent;
}

img::-moz-selection {
    background-color: transparent;
}

@media screen and (min-width: 40.063em) {
    header.site-header .action-panel .admin ul li a,
    header.site-header .action-panel .admin ul li i,
    .main-content .content .information-header .viewall-toggler,
    .main-content .content .information-header .information-header-toggler,
    .main-content .content .information-header .information-content-toggler {
        color: #0e7e9a;
    }
    .quick-links ul li a.add-quick-link,
    .quick-links ul li a.add-quick-link:last-child {
        background: none;
        border: 0;
        color: #0e7e9a;
    }
}

@media screen and (max-width: 40em) {
    .nav-bar nav ul li ul li a,
    .nav-bar nav ul li ul li.selected a,
    .nav-bar nav ul li.selected ul li a,
    .nav-bar nav ul li.selected ul li.selected a {
        color: rgba(255, 255, 255, 0.5);
    }

.nav-bar nav ul li ul li a:hover,
    .nav-bar nav ul li ul li.selected a:hover,
    .nav-bar nav ul li.selected ul li a:hover,
    .nav-bar nav ul li.selected ul li.selected a:hover {
        color: #fff;
    }
}

/*
    supplementary - #ec4004
    orange, used for quick links and warnings
*/

.reveal-modal h2.icon-attention-filled {
    border-bottom-color: #ec4004;
    color: #ec4004;
}

.action-buttons a.action.icon-attention-alt,
.panel-blocks .icon-group a.icon-attention-alt {
    background-color: #ec4004;
    border-color: #ec4004;
}

a.show-me,
a.hide-me,
a.pick-today,
.favourites-block a.view:hover,
a.expand,
a.contract,
.quick-links ul li span.remove {
    color: #ec4004;
}

a.expand:hover,
a.contract:hover,
table a:active,
table a:focus,
table a:hover,
.quick-links ul li span.remove:hover {
    color: #000;
}

.quick-links ul li a.add-quick-link,
.quick-links ul li a.add-quick-link:hover {
    background-color: #ec4004;
}

@media screen and (min-width: 40.063em) {
    .quick-links ul li a,
    .quick-links ul li:last-child a {
        color: #ec4004;
    }

.quick-links ul li a:hover,
    .quick-links ul li:last-child a:hover {
        background-color: #fff;
        border-color: #ec4004;
    }

.quick-links ul li a:active,
    .quick-links ul li a:focus,
    .quick-links ul li:last-child a:active,
    .quick-links ul li:last-child a:focus {
        background-color: #ec4004;
        border-color: #ec4004;
        color: #fff;
    }

.quick-links ul li a.selected,
    .quick-links ul li a.selected:active,
    .quick-links ul li a.selected:focus,
    .quick-links ul li a.selected:hover,
    .quick-links ul li:last-child a.selected,
    .quick-links ul li:last-child a.selected:active,
    .quick-links ul li:last-child a.selected:focus,
    .quick-links ul li:last-child a.selected:hover {
        background-color: #ec4004;
        border-color: #ec4004;
        color: #fff;
    }
}

Save

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Curabitur hendrerit pretium

Curabitur hendrerit pretium

Curabitur hendrerit pretium

Nunc ac ante eu metus

Nunc ac ante eu metus

Nunc ac ante eu metus

White Labelling

Add To Favourites

Add To My Sites

Alert

Alert

Edit Quick Actions

Actions to add

Actions added

White Labelling