Provider customization

From regify WIKI
Revision as of 12:51, 19 February 2018 by Regify (talk | contribs)
Jump to navigation Jump to search

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).