Changing Colors on Woodmart Theme?

Hello–

I am trying to sort out how to change the following colors:

-% Off badges
-The little “speech bubbles” that can be tagged on top of things in the megamenu
-The bar along the top of the website (that includes the text “Add anything here or just remove it.”
-Various buttons along the website (ie, “Learn More”, etc.)

Thank you!

Hello,

1)To change the colors of the labels try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-label.onsale {
	background-color: blue;
}

.product-label.featured {
	background-color: red;
}

.product-label.new {
	background-color: orange;
}

2) Please provide a relevant screenshot to check it myself and help you out accordingly.

3) To change the background of the topbar you need to Go to Woodmart >> Header Builder >> Edit Header.

Screenshot for Clarification: https://prnt.sc/11857en

4) You can change the colors of the buttons from Theme Settings >> Styles & Colors.

Best Regards

Thank you!

Attaching a screenshot of the “speech bubbles” I am talking about. They are “tags” in the megamenu but we’d love to be able to customize the colors.

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

To change the colors of the labels, edit the HTML block that is used for the menu item and edit the extra menu list and set the label color.

Screenshot for Clarification: https://prnt.sc/118qq10

Best Regards

Yes – But I want to use custom colors to match the theme of the site. How do I use custom colors?

Thanks!

Hello,

If you want to use Custom Colors then you need to Use Custom CSS for that.

Please Provide with the URL of the website with a screenshot of which badge you need to change the color to check it myself and help you out accordingly.

Best Regards

I am not sure which badges yet, haha! That is why I want to know how!

Can you explain how to create the CSS? What format/template I should use? That way I do not keep bothering you for little things 🙂

Hello,

The CSS you need to use will be the same as the following that you need to add under Theme Settings >> Custom CSS.

.wd-sub-menu li a .menu-label {
background: orange;
}

Regards.
Xtemos Studios

Can you do me a favor and add the following color options in the backend dropdowns for the tag/badge/label as discussed above? That way I can just choose the color myself if needed? So i can just select the site color while setting up megamenus, etc.

Yellow: #FFC53C
Orange: #FF633C

site info in private.

Hello,

Sorry but there is no option in Theme Settings available to add Custom Colors to the megamenu labels as you required.

You can only choose from the available colors or use the primary secondary colors for the label.

Regards.
Xtemos Studios.

[Author]

Posts