[Resolved] Theme is Overriding my Custom Button CSS

[Rylan Urban]

Hey Tom. The theme is changing the text color in my custom buttons. I added an important tag

.custom-button2,
.custom-button2:visited {
border: 2.5px;
border-radius: 5px;
border-style: solid;
border-color: #00b70f;
background-color: #00b70f;
padding: 8px 14px;
color: #FFF !important;
}

.custom-button2:hover {
background-color: transparent;
border: 2.5px solid #00b70f;
color: #000 !important;
}

and it fixed it on desktop. But the mobile versions of the buttons are still reverting back to green colored link text.

Website: http://4eb.5bb.myftpupload.com/wp-admin/

Any suggestion?

[Rylan Urban]

oh – it also doesn’t work on Firefox i see. Just chrome!!

Not sure what to do,

Rylan

[Tom]

You could try adding .inside-article in front of it.

So: .inside-article a.custom-button-2

[Rylan Urban]

Worked!

Thanks again!

[Tom]

You’re welcome 🙂

[Rylan Urban]

Hey Tom – for some reason it’s either not working or it switched back!

Check out the footer on http://allgreenmarketing.com

[Tom]

If you use the Inspect tool in your browser, you can see the CSS and see if any other selectors are overwriting it.

In the case here, you have the link color set in the page header, so the CSS for that is:

.inside-content-header a

Then your button is:

.custom-button

So the page header CSS is more specific, meaning it will overwrite your CSS.

You can either make your CSS more specific:

.inside-content-header a.custom-button

Or add !important after your link color:

color: #FFF !important;

[Rylan Urban]

Hey Tom – it was actually in the footer. But i used your method and attacked it with .footer-widgets a.custom-button-2.

I tried the same method but can’t find the CSS for the case when the button is in the sidebar.

Can you take a look? http://4eb.5bb.myftpupload.com/solar-benefits/

Rylan

[Tom]

It would be: .sidebar .custom-button2

Or: .widget .custom-button2

[Author]

Posts