Monday, 1 February 2016

NextReports 9 : Creating a server color theme

NextReports 9 changed the UI by adopting bootstrap and less css preprocessor.  This means the old way of adding a new theme is now obsolete.

To make a new theme for NextReports Server you will have to know the following:

- there is a themes folder with 3 defined folders from start : green, red, blue
- you must create a new theme folder which is similar with red or blue theme folder (the entire structure)
- inside images folder you must put your logo image for the specific theme
- inside less folder you have style.less identical with that from red or blue
- the color changes are taken inside variable.less file

Here you can look for all colors, but the important ones are:

// Theme Colors
@main-color:                     #FF5722;
@main-light-color:            #FFDDD3;
@main-lightest-color:       #FFEFE9;
@main-lightest-bg-color:  #faf8f7;
@main-dark-color:            #DF4C1E;
@main-darkest-color:        #A03715;
@secondary-color:             #4D433F;
@secondary-light-color:    #E6D9D5;
@secondary-dark-color:    #332C2A;
@body-color:                      #edecec;

You can use an editor like brackets . The advantage is that you need to compile less files to obtain the final style.css. And 'brackets' editor can be set to compile a less file when you 'save' it (LESS Autocompile extension), which is very handy. You practically modify variable.less file and save / compile it. Then you save / compile style.less which will generate your style.css file.

All i18n files must contain a new property called:   Settings.personalize.theme.<color>=<name of theme>