Provider customization

Basic CSS styles

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

Asian Fonts (Chinese)

/** 
* 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;
}

Using a custom font

Beginning with regify provider 5, it is possible to upload a TTF font (.ttf) in your customizing dialogue. By this, you can then use it as a local font.

For example, we uploaded "Dosis-Regular.ttf" in the "Change provider appearance and templates" -> "Customize provider optics". Upon this, we edited _customize.css to contain this:

@font-face { font-family: 'Dosis';
           src: url('MYIMAGES/Dosis-Regular.ttf') format('truetype'); }
           
.panel-heading {
    /* this example works with provider 5.3 or higher */
    font-family: 'Dosis', sans-serif;
    font-weight: bolder;
}

By this, we were able to set this font for panel headlines. You may also want to set different sizes. For this, use standard CSS classes.

Provider 5.3

Logo image

/**
* Standard CSS for adapting to your logo. 
* Please upload the logo using the image folder first.
*/
.NavLogo {
    /* Works from provider version 5.3 upwards! */
    background-image: url("MYIMAGES/my_logo.png"); /* fix image name here */
}

Provider 4.0 - 5.2

Logo image

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

Basic color change / corporate identity

/**
* CSS for basic color adaption
* Works from provider version 5.2 upwards!
* Just replace #666666 with your favorite color!
*/
div.helpboxTop, 
button, 
.button, 
a.button, 
#MainBody a.button, 
input[type="submit"], 
input[type="button"], 
.downloadButton, 
.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, 
#SiteMainNavigation a:hover p, 
#SiteMainNavigation a.main-menu-active-link p, 
#sideMenu a.submenu-icon::before,
#sideMenu a.active-sidemenu-link, 
#sideMenu a:hover, 
.TabElementSelected,
.iconActionStyle,
.actionIconStyle:before,
.iconStyle,
div.Mandatory,
div.BubbleHelp::before
{
    color: #666666 !important;
}
#sideMenu a.active-sidemenu-link {
    border-left-color: #666666;
}

/* 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 {
    display: inline;
}

div.BubbleHelp:before {
    font-family: iconFont;
    font-size: 1.3rem;
    font-weight: normal;
    background-color: transparent;
    display: inline-block;
    content: '\e09a';
    color: rgb(57, 118, 213);
}

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