Archived topic
Theme is Overriding my Custom Button CSS
8 replies · Started by Rylan Urban on October 1, 2016
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?
oh - it also doesn't work on Firefox i see. Just chrome!!
Not sure what to do,
Rylan
You could try adding .inside-article in front of it.
So: .inside-article a.custom-button-2
Worked!
Thanks again!
You're welcome :)
Hey Tom - for some reason it's either not working or it switched back!
Check out the footer on http://allgreenmarketing.com
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;
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
It would be: .sidebar .custom-button2
Or: .widget .custom-button2
