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>

4 comments:

  1. Very useful and informative blog. Thank you so much for these kinds of informative blogs.
    We are also a graphic services in gurgaon and we provide the website design services,
    web design services, web designing services, logo design services.
    please visit our website to see more info about this.
    Freelance Graphic Designing
    Freelance Catalogue Designing in delhi
    Freelance Catalogue Designing in gurgaon
    Freelance Brochure Designing
    Freelance Label Designing
    Freelance Banner Designer
    Freelance Poster Designer
    graphic design services in delhi
    graphic design services in gurgaon
    Freelance Catalogue Designing in delhi
    Freelance Catalogue Designing in gurgaon
    Freelance Brochure Designing
    Freelance Label Designing
    Freelance Banner Designer
    Freelance Poster Designer
    graphic design services in delhi
    graphic design services in gurgaon
    Freelance Catalogue Designing in delhi
    Freelance Catalogue Designing in gurgaon
    Freelance Brochure Designing
    Freelance Label Designing
    Freelance Banner Designer
    Freelance Poster Designer
    graphic design services in delhi
    graphic design services in gurgaon
    Freelance Catalogue Designing in delhi
    Freelance Catalogue Designing in gurgaon
    Freelance Brochure Designing
    Freelance Label Designing
    Freelance Banner Designer
    Freelance Poster Designer
    graphic design services in delhi
    graphic design services in gurgaon
    graphic designer in gurgaon
    freelance graphic designer in gurgaon
    freelance graphic designer in gurgaon
    freelance graphic designer in gurgaon
    freelance logo designer in gurgaon
    freelance logo designer in gurgaon
    freelance web designer in gurgaon

    ReplyDelete