• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.
  • Support reminder: Please do not use private messaging for product support. Post questions to the respective forums to get help.

Changing Badge Colours

amalseed

Well-known member
Md
Messages
234
Reaction score
47
Hey @Alex, for some reason I cannot change 'badge' colours anymore. Could you provide a quick update as to how to do this!
 
Solution
Ah, that color may not exist in MD so you will have to write that in to your stylesheets for each color like in my example above.

To keep the stylesheet light I haven't included many color names, so you can add the colors you need only. Sometimes I use inline styles while on the fly, but it's always best to establish your colors in CSS.

You can make as many custom colors as you want like so in your child theme style.css:

CSS:
.badge.green { background-color: green; }
.badge.pink { background-color: pink; }

Here's the inline way to do it if you're ever feeling lazy:

CSS:
Text goes here and <span class="badge" style="background:blue;">badge</span> goes here.

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
This CSS should work

CSS:
.badge { background-color: red;
.badge.green { background-color: green; }

How are you doing it?
 
Comment

amalseed

Well-known member
Md
Messages
234
Reaction score
47
I was trying to add it like below:

CSS:
Its good for technical athletic clothes for yoga<span class="badge green">Hot</span>, running, working out, and most other activities.

But it doesn't change the colour of the badge. I am pretty sure that is how I used to do it.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
Ah, that color may not exist in MD so you will have to write that in to your stylesheets for each color like in my example above.

To keep the stylesheet light I haven't included many color names, so you can add the colors you need only. Sometimes I use inline styles while on the fly, but it's always best to establish your colors in CSS.

You can make as many custom colors as you want like so in your child theme style.css:

CSS:
.badge.green { background-color: green; }
.badge.pink { background-color: pink; }

Here's the inline way to do it if you're ever feeling lazy:

CSS:
Text goes here and <span class="badge" style="background:blue;">badge</span> goes here.
 
Comment
Solution
Top