Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Override the color of theme

Answered
shilpi asked on March 12, 2020

Hi Team,
 
How can we over ride the color of a theme. Eg: I am using light blue theme, and i want to change the blue color to my blue.
 
Please help how to do that.
 
Thanks
Shilpi

6 answers

Public
Vera Didenko Flexmonster March 12, 2020

Hello, Shilpi,
 
 
Thank you for your question.
 
Yes, it is possible to apply custom themes and change the theme colors in Flexmonster.
Please see our customizing Flexmonster’s appearance tutorial for guidance.
 
We would like to add that in case of Angular the fourth step (adding the reference to the CSS) in the provided tutorial may differ:
The custom theme CSS file could be imported, for example, in the styles.css:

@import "PATH_TO_YOUR_THEME_FOLDER/lightblue-theme/flexmonster.min.css"

 
Please let us know if this works.
You are welcome to write to us in case any additional questions arise.
 
Looking forward to your response.
 
Best Regards,
Vera

Public
shilpi March 12, 2020

Thanks Vera,
 
If we add theme folder within nodemodules..How will it come to dist?
will there be any entry in package.json for the same?

Public
shilpi March 13, 2020

Please provide update on this.

Public
Vera Didenko Flexmonster March 13, 2020

Hello, Shilpi,
 
Thank you for your response.
 
When working with npm, the recommended approach is to store the custom styles in a different location depending on your project structure.
 
Please let us know if this works fine for you and if additional details are needed.
 
Looking forward to your reply.
 
Kind regards,
Vera

Public
shilpi March 13, 2020

Hi Vera,
 
I tried adding the new theme folder outside node_modules but it did not work.
I kept the clone of lightblue theme folder under src/assets/css/.
 
Let me know If I have missed anything.

Public
Vera Didenko Flexmonster March 13, 2020

Hello, Shilpi,
 
Thank you for your answer.
 
Please notice that the flexmonster.min.css or flexmonster.css file requires the /assets Flexmonster folder to apply the necessary fonts and icons.
This could be the reason why it didn’t work to load the custom theme.
Currently, we kindly advise copying the /assets Flexmonster folder to the location where the custom theme CSS files are placed in your project, for example:

.
└── custom-theme
├── assets
│ ├── flexmonster-icons.eot
│ ├── flexmonster-icons.svg
│ ├── flexmonster-icons.ttf
│ └── flexmonster-icons.woff
└── css
└── flexmonster.min.css

 
In addition, we have prepared two projects for assistance (available in the attachments below):

  1. custom-theme-builder.zip – a simple project to help create custom themes for Flexmonster. It contains the base file for creating the custom theme and commands to build it (generate the corresponding CSS and min.css files).

    Here is how to run it:

    1.1) First, install the dependencies specified in package.json:

    npm install

    1.2) You can adjust the variable values and specify the desired colors in the flexmonster.less file. Then run the following command to create your custom theme:

    npm run build

    This will generate the needed flexmonster.css and flexmonster.min.css files.

  2. angular-flexmonster-custom-theme.zip – this is a sample Angular project illustrating how a previously built custom theme can be used.

    Here is how to run it:

    2.1) First, install the dependencies specified in package.json:

    npm install

    2.2) Then start the application:

    ng serve

 

Please let us know if this helps.
Looking forward to hearing from you.
 
Kind regards,
Vera

Please login or Register to Submit Answer