How to change colors

gasolinitrafikkskole

I am using Nova template and want to change colors for my template.

.btn.btn-primary has a background-color of var(--color-primary). And t4-section-1 on the home page has a class named bg-purple? Where does all this come from and how can I change it to my own. Both background and text colors?

saguaros

gasolinitrafikkskole Hi

You can access template style of JA Nova in administrator panel >> Theme Color and change the primary color as you wish:

About the class bg-purple, it's defined in template style:

.bg-purple {
  background-color: #5E48DB; }

You can override this css rule with your desired color.

Regards

gasolinitrafikkskole

But isn't it stupid that a class named bg-purple have a yellow color?

saguaros

gasolinitrafikkskole Our demo site uses that class to show purple, is it in yellow on your site?

You can share the URL of that page and screenshot highlight the part that displays in yellow so I can check for you.

gasolinitrafikkskole

saguaros No, it is in purple. I found a dropdown in "Extra Fields" where you can choose from some predefined colors. However, I have my own business-color that I want to use.

Is it possible to add my color to that list? Or do I need to find redefine bg-purple to actually display yellow? It seems a bit odd.

saguaros

gasolinitrafikkskole Which dropdown are you referring to?

If it's 'Extra Fields' tab in module settings, you can edit this file:
/templates/ja_nova/etc/form/com_modules.module.xml

Add a new option: <option value="myColor">My Color</option>

Then define css rule for the new class:

.bg-myColor {
  background-color: #EFEDFC; }

gasolinitrafikkskole

saguaros Thank you, I was looking for that answer.

saguaros

You're welcome 😉