Difference between revisions of "Provider customization"

From regify WIKI
Jump to navigation Jump to search
Line 39: Line 39:
 
     background-image: url("MYIMAGES/my_logo.png"); /* fix image name here */
 
     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).
 

Revision as of 11:45, 22 May 2025

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