Provider customization

From regify WIKI
Jump to: navigation, 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!
#MainBody a.button, 
#navigation-wrapper {
    background-color: #666666;
    color: white !important;
a.main-menu-active-link .navIconStyle, 
a:hover .navIconStyle,
#MainBody h1, 
#MainBody h2, 
#MainBody a, 
.Footer h1, 
.Footer h2,
#SiteMainNavigation a:hover p, 
#SiteMainNavigation a.main-menu-active-link p, 
#sideMenu a:hover, 
input.passive-button:hover, .passive-button:hover {
    color: #666666 !important;
#sideMenu {
    border-left-color: #666666;
input.passive-button {
    border-color: #666666 !important;
    color: #666666 !important;
    background-color: #ffffff;
/* For the pay.php special page */
div.underline {
    background-color: #666666;
.box-header h1 {
    color: white !important;
.document-uploader #upload-html5-on div,
.document-uploader #regibill-html5-on div,
.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).