Overriding theme's link text color in a button

Tagged: 

Author Posts

robertlo September 16, 2015 at 3:12 pm

<center><button type= “button” class=”partner-button”><b>Become A Partner &
Access All Sermons</b></button></center>

I’m using that for my own button’s in my theme. I am setting css for .partner-button in MT, and I want this button class’s text to be white, but the theme’s link text is dark blue and my buttons here are rendering with dark blue text. I don’t see an option in MT to set the color of link text, and just setting the font color alone is having no effect because the theme’s css is apparently setting the link text color.

So how can I make this button class have white text in MT?

Sebastian September 17, 2015 at 11:54 am

Hi Robert,

The color property does also work on links. It’s just that the selector you described (.partner-button) targets the button, not the link. You can create a new selector for targeting the link inside the button with the following selector:

.partner-button a

You may also want to create an additional selector for styling the button link in it’s hover state using the following selector:

.partner-button a:hover

Does that solve your issue?

Cheers,
Sebastian

robertlo September 17, 2015 at 8:43 pm

Hmm. I just did that, but it still had no effect. The link text is still that dark blue in the button. Any ideas?

Sebastian September 18, 2015 at 4:08 pm

This sounds like it might be a CSS specificity issue. Could you post a link to the page you’re working on so that I can troubleshoot?

Thanks,
Sebastian

robertlo September 19, 2015 at 12:02 am

Sure.

http://preachnet.com/freeindeed/

The top button in the first product has navy blue letters. I used MT to make them white per your instructions but that didn’t work.

Sebastian September 21, 2015 at 2:03 pm

Hey Robert,

I mentioned in my reply to your other post that I’m seeing shortcode where I think the button you’re referring to should appear. I see this instead:

[su_button url=”/freeindeed/product/partner/” style=”3d” size=”7″ background=”#FF8C00″ color=”#ffffff” center=”yes” radius=”3″ icon_color=”#216475″]

Any idea what’s going on with this?

robertlo September 21, 2015 at 2:33 pm

Sebastian,

I replied this to your question about this in my other post:

Regarding http://preachnet.com/freeindeed/, there is only one actual button. All the others are shortcodes. The actual button I am having the issue with is only the top orange button for the first product: “A Celebration of Discipline: Guidance”

See this screenshot to see exactly the button in question: http://www.awesomescreenshot.com/image/591951/06acba194abf99882633edcf4bd20c73

Thanks,
Rob

You must login or register to reply to this topic.