Kleo Buttons: I’ve changed the color, but how do I style the text?

[broadsword]

Hi there,

I was able to modify our default button colors in CSS, like so:

.btn-default:hover {background-color:#cccccc !important;}

But…how can we set the button’s font and font color?

[sharmstr]

Looks like you’ve added .btn-default to the button class. You need to remove the period. It should only be btn-default.

Once you do that, you can use

COPY CODE

.btn-default {
color: black !important;
font-family: 'whatever';
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[broadsword]

@sharmstr – I’m not the best with CSS, and am wondering if we can use hex values to define the button color and the button text color, like so:

.btn-default {
color: #cccccc !important;
font-family: ‘whatever’;
font-color: #990000;
}

[sharmstr]

Yes

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[broadsword]

@sharmstr – ok, we added in our css blurb to the ‘quickCSS’ area in the theme’s general settings, and are calling the buttons like so:

[kleo_button title="What You Get" href="http://www.myselfdefensetraining.com/self-defense-training-what-you-get/" target="_self" style="highlight" size="lg" el_class=".btn-default"]

But, our buttons are still showing up as red, not grey as we’ve defined them in the CSS. Are we doing the shortcode configuration correctly?

[sharmstr]

I guess you missed this part?

Looks like you’ve added .btn-default to the button class. You need to remove the period.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[broadsword]

Yikes, ok – will try it.

[broadsword]

@sharmstr – OK:

Here’s exactly how we have the css set up:

btn-default {
color: #cccccc !important;
font-family: ‘BlairMdITC TT-Medium’;
font-color: #990000;
font-style: ‘bold‘;
}

Here’s exactly how we’re calling a button:

[kleo_button title="What You Get" href="http://www.myselfdefensetraining.com/self-defense-training-what-you-get/" target="_self" size="lg" style="highlight" el_class="btn-default"]

So, it’s (correctly) displaying the grey for the buttons, but it’s not displaying the font, the font style, or the font color. What are we doing wrong!?!

[sharmstr]

You only needed to remove the period in the shortcode. You need it in the css.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[broadsword]

@sharmstr – OK, almost there. Here’s the problem:

.btn-default {
color: #cccccc !important;
font-family: ‘BlairMdITC TT-Medium’;
font-color: ‘#990000’ !important;
font-style: ‘bold’;
}

Apparently ‘font-color’ isn’t valid css, only ‘color’ is for text, so the correct font is now displaying, but it’s grey in color just like the buttons. Ergo, you can’t read the text.

I’m wondering how we style that font so that it’s #990000, and shows up legibly on the buttons.

[sharmstr]

Its gray because you have set the color to gray color: #cccccc !important;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

font-style isnt valid either. its font-weight. and you shouldnt have quotes around bold. This should help: http://www.w3schools.com/cssref/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts