Provider customization

In most cases, someone wants to adapt the provider interface to match his corporate identity (CI).

Beginning with provider 5.0, we suggest to use this template for your _customized.css:

/**
* Standard CSS for adapting to your logo. Please upload
* the logo using the image folder first.
*/
#logoWrapper #logo {
    /* Works from provider version 4.0 upwards! */
    background-image: url("MYIMAGES/my_logo.png");
    background-position: 20px 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/** 
* For enhanced Asian fonts.
* Use only if you plan to support Chinese!
*/
body {
    font-family: "Roboto","Microsoft JhengHei","Heiti TC","LiHei Pro Medium","PMingLiU",Arial,sans-serif;
}

/**
* CSS for basic color adaption
* Works from provider version 5.0 upwards!
* Just replace #666666 with your favorite color!
*/
div.helpboxTop, 
button, 
.button, 
a.button, 
#MainBody a.button, 
input[type="submit"], 
input[type="button"], 
.upload-form-header, 
#Navigation,
#navigation-wrapper {
    background-color: #666666;
    color: white !important;
}
a.main-menu-active-link .navIconStyle, 
a:hover .navIconStyle,
#MainBody h1, 
#MainBody h2, 
#MainBody a, 
p.headline, 
.Footer h1, 
.Footer h2,
.headline2, 
.blue-color, 
#SiteMainNavigation a:hover p, 
#SiteMainNavigation a.main-menu-active-link p, 
#sideMenu a.active-sidemenu-link, 
#sideMenu a:hover, 
.TabElementSelected,
.iconActionStyle,
.iconStyle,
div.Mandatory,
input.passive-button:hover, .passive-button:hover {
    color: #666666 !important;
}
#sideMenu a.active-sidemenu-link {
    border-left-color: #666666;
}
input.passive-button {
    border-color: #666666 !important;
    color: #666666 !important;
    background-color: #ffffff;
}
/* For the pay.php special page */
.box-header,
div.downloadBox,
div.underline {
    background-color: #666666;
}
.box-header h1 {
    color: white !important;
}
.document-uploader #upload-html5-on div,
.document-uploader #regibill-html5-on div,
#upload-drop-zone,
.TabElementSelected {
    border-color: #666666;
}

/* Adapt the help icon if you like */
div.BubbleHelp {
    background-image: none;
    font-family: iconFont;
    font-size: 20px;
    background-color: transparent;
    color: #666666;
    border: 0px dashed green;
    position: relative;
}
div.BubbleHelp:before { 
    content: '\e093'; 
    cursor: pointer; 
    top: -7px;
    position: inherit;
}

To use the above CSS for your colors, just replace #666666 by the color value you like (eg your main corporate identity color).