Override the color of theme

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

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

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