Difference between revisions of "Provider customization"
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 | + | == 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 | + | /* 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. | + | * 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, | ||
− | |||
#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, | ||
− | + | div.BubbleHelp::before | |
+ | { | ||
color: #666666 !important; | color: #666666 !important; | ||
} | } | ||
Line 61: | Line 101: | ||
border-left-color: #666666; | border-left-color: #666666; | ||
} | } | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
/* 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 { | ||
− | + | display: inline; | |
+ | } | ||
+ | |||
+ | div.BubbleHelp:before { | ||
font-family: iconFont; | font-family: iconFont; | ||
− | font-size: | + | font-size: 1.3rem; |
+ | font-weight: normal; | ||
background-color: transparent; | background-color: transparent; | ||
− | + | display: inline-block; | |
− | + | content: '\e09a'; | |
− | + | color: rgb(57, 118, 213); | |
− | |||
− | |||
− | content: '\ | ||
− | |||
− | |||
− | |||
} | } | ||
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). | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 12:15, 25 January 2023
Contents
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).