Difference between revisions of "Provider customization"

From regify WIKI
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
In most cases, someone wants to adapt the provider interface to match his corporate identity (CI).
 
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''':
+
== 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.
  
== Provider Logo ==
+
For example, we uploaded "[https://fonts.google.com/specimen/Dosis 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
+
  * Standard CSS for adapting to your logo.  
  * the logo using the image folder first.
+
* 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 {
 
  #logoWrapper #logo {
     /* Works from provider version 4.0 upwards! */
+
     /* Works from provider version 4.0 to 5.2! */
     background-image: url("MYIMAGES/my_logo.png");
+
     background-image: url("MYIMAGES/my_logo.png"); /* fix image name here */
 
     background-position: 1.25rem 0;
 
     background-position: 1.25rem 0;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
Line 18: Line 55:
 
  }
 
  }
  
== Basic color change / corporate identity ==
+
=== Basic color change / corporate identity ===
 
  /**
 
  /**
 
  * CSS for basic color adaption
 
  * CSS for basic color adaption
  * Works from provider version 5.0 upwards!
+
  * Works from provider version 5.2 upwards!
 
  * Just replace #666666 with your favorite color!
 
  * Just replace #666666 with your favorite color!
 
  */
 
  */
Line 31: Line 68:
 
  input[type="submit"],  
 
  input[type="submit"],  
 
  input[type="button"],  
 
  input[type="button"],  
 +
.downloadButton,
 
  .upload-form-header,  
 
  .upload-form-header,  
  #Navigation,
+
  #Navigation,  
 
  #navigation-wrapper {
 
  #navigation-wrapper {
 
     background-color: #666666;
 
     background-color: #666666;
Line 46: Line 84:
 
  .Footer h2,
 
  .Footer h2,
 
  .headline2,  
 
  .headline2,  
.blue-color,
 
 
  #SiteMainNavigation a:hover p,  
 
  #SiteMainNavigation a:hover p,  
 
  #SiteMainNavigation a.main-menu-active-link p,  
 
  #SiteMainNavigation a.main-menu-active-link p,  
 +
#sideMenu a.submenu-icon::before,
 
  #sideMenu a.active-sidemenu-link,  
 
  #sideMenu a.active-sidemenu-link,  
 
  #sideMenu a:hover,  
 
  #sideMenu a:hover,  
 
  .TabElementSelected,
 
  .TabElementSelected,
 
  .iconActionStyle,
 
  .iconActionStyle,
 +
.actionIconStyle:before,
 
  .iconStyle,
 
  .iconStyle,
 
  div.Mandatory,
 
  div.Mandatory,
  input.passive-button:hover, .passive-button:hover {
+
  div.BubbleHelp::before
 +
{
 
     color: #666666 !important;
 
     color: #666666 !important;
 
  }
 
  }
Line 61: Line 101:
 
     border-left-color: #666666;
 
     border-left-color: #666666;
 
  }
 
  }
  input.passive-button {
+
   
    border-color: #666666 !important;
 
    color: #666666 !important;
 
    background-color: #ffffff;
 
}
 
 
  /* For the pay.php special page */
 
  /* For the pay.php special page */
 
  .box-header,
 
  .box-header,
Line 84: Line 120:
 
  /* Adapt the help icon if you like */
 
  /* Adapt the help icon if you like */
 
  div.BubbleHelp {
 
  div.BubbleHelp {
     background-image: none;
+
     display: inline;
 +
}
 +
 +
div.BubbleHelp:before {
 
     font-family: iconFont;
 
     font-family: iconFont;
     font-size: 20px;
+
     font-size: 1.3rem;
 +
    font-weight: normal;
 
     background-color: transparent;
 
     background-color: transparent;
     color: #666666;
+
     display: inline-block;
    border: 0px dashed green;
+
     content: '\e09a';
    position: relative;
+
     color: rgb(57, 118, 213);
}
 
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).
 
To use the above CSS for your colors, just replace #666666 by the color value you like (eg your main corporate identity color).
 
== 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 "[https://fonts.google.com/specimen/Dosis Dosis-Regular.ttf]" in the "Change provider appearance and templates" -> "Customize provider optics". Upon this, we edited '''_customize.css''' to start like this:
 
 
@font-face { font-family: 'Dosis';
 
            src: url('MYIMAGES/Dosis-Regular.ttf') format('truetype'); }
 
 
/* Use it for some headlines */
 
#MainBody h1, #MainBody h2, .headline2 {
 
    font-family: 'Dosis', sans-serif;
 
    padding-top: 1px;
 
}
 
 
By this, we were able to set this font for several headlines. You may also want to set different sizes. For this, use standard CSS classes.
 

Latest revision as of 12:15, 25 January 2023

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