I want to change the portal color

Q&A
1

I want to change the portal color but not working.

I change skin.config.less and not working

The color is blue in

//@mainAccentColor: #b20706; //the main skin color (red)
@mainAccentColor: #2674b0; //the main skin color (blue)

NOT WORKING

HELP ME PLEASE

1 Like
2

Hi,

To do this, I modified the bonita.css in [YOUR_BONITA_SERVER]\bonita\client\tenants\1\work\theme\portal. But they’re soooo much things to modify in terms of HTML Color code.

3

I wrote this for another project works with 6.3.6…6.4.2

original text from http://community.bonitasoft.com/groups/usage-operation-6x/resolved-real-css-change

Step-by-Step, enjoy

:slight_smile:

Requirements:

You must install a LESS compiler. For this example I have used WINLESS for Windows from http://winless.org . You should pick the one you feel more comfortable with. You must install Windows .NET 3.5 as a prerequisite.Disclaimer: I have no dealings with this company except as a user and to say that the product works for me.

  • Create a new/temporary folder on your computer somewhere, call it something you will remember…My Documents/Bonita/CorporateColours for example.
  • Open folder Apache-Tomcat/webapps and COPY file bonita.war to the CorporateColours folder.
  • In the CorporateColours folder Rename bonita.war to bonita.war.zip
  • Unzip the bonita.war.zip to folder CorporateColours/bonita.war.unzipped
  • Open the bonita.war.unzipped folder
  • Open the WEB-INF folder
  • Open the classes folder
  • Unzip the bonita-portal-theme.zip file to a new folder bonita-portal-theme
  • Open the bonita-portal-theme folder
  • Open the skin folder
  • Open file skin.config.less using your favourite editor
  • Find @mainAccentColor: this is the main skin colour and as default is set to #b20706 (red)
  • Comment this line out by prefixing //
  • Remove the // from the following line which makes the main skin colour blue #2674b0. You could change this to any colour you like but for this example – let’s make it simple and use what is there…
  • Save and close the editor

Side Note: If you want to test colours try site http://easycalculation.com/color-coder.php It allows you to add hex digit codes and responds with the colours you choose immediately. Disclaimer: I have no dealings with this company except as a user and to say that the product works for me.

  • Open the WINLESS Program
  • Click Add Folder and point to the CorporateColours/bonita.war.unzipped
  • Click Open, WINLESS will now add all the included LESS files ready for compilation
  • Click Compile, If there are a few errors this should not be a problem, they are from the base install…

You should still be in the CorporateColours/bonita.war.unzipped folder…

  • Rename main.css to bonita.css.blue and copy it to folder apache-tomcat\bonita\client\tenants\1\work\theme\portal

  • Rename bonita.css to bonita.css.red and rename bonita.css.blue to bonita.css

  • Restart your tomcat engine

  • Open your chosen browser Clear the cache – just in case

  • And open the portal…

Viola – that should be it – all working in your own colours…