White Label

White Labeling goes an extra step beyond Theming to give the administrator the ability to customize global colors and fonts and images for the entire application.

Our CSS files use a SASS preprocessor to compile them. You'll need to have SASS installed as documented here: Install SASS.

You'll need to run the sass command sass -- watch simflofy.scss:simflofy.css before making any CSS edits.

CSS

1. Our color.scss is located under simflofy-admin/src/main/webapp/resources/styles/simflofy/

2. Open the file. You'll see several instances of $variablename: #hexvalue; ie: $header:#252525;

3. Replace the hex value with your desired value and save. Do not change the Variable Name.The SASS process will compile these files into a new simflofy.css file.

Fonts

1. Our fonts.scss is located under simflofy-admin/src/main/webapp/resources/styles/fonts/

2. Inside you'll see:

@font-face {  
font-family: 'Montserrat';  
font-style: normal;  
src: local('Montserrat'), local('Montserrat'), url(../../fonts/montserrat
/Montserrat-Medium.ttf) format('truetype');  
}  
$bodytext: 'Montserrat', sans-serif;

3. To change this font, you'll need to copy the font files into this folder, then change the Font name from Montserrat to a name of your choosing as well as changing the above URL attribute to match your new font files.

4. Change the font family name attached to $bodytext from 'Montserrat' to the one you have chosen and Save.

Logos and Favicon

1. Our logo files are located in simflofy-admin/WEB-INF/classes favicon.ico & logo-transparent.gif respectfully.

2. The Favicon size needs to be 16x16. The logo size needs to be no bigger than 155x133.

3. Replace these files with your own, keeping the same file names. This will replace them globally throughout the application.