Overriding link colors and styles

[Elizabeth]

Hi,

I’m trying to create some alternate styles for links that appear over light vs dark backgrounds, but when I create the styles and apply them, everything gets applied except for the text colors. I have tried making them !important but no dice. The site is http://urbanbuilt.build-miner.media. It is password protected during development. Use password NewImg*UB17. The bottom dark blue section is an example of where I would like to apply the style buttonlt, and I have added this style to my child theme css file with !important but the colors are not being applied.

Thanks in advance for any insight you can offer.

[Styled Themes]

Hi Elizabeth,

Could you clarify which bottom area you are trying to style and what text color is not picking up the CSS?
A screenshot would be helpful

thanks
Imre

[Elizabeth]

Hi, thanks for your reply. It’s the last content box before the footer. Full page and close-up images attached.

We’ve since switched to a lighter color background for this box so the standard link style is ok there, but I’d still like to get an alternate link style working so this can be my test case.

Thanks!

Attachments:

You must be logged in to view attached files.

[Elizabeth]

Oops, image was too large. Trying again.

Attachments:

You must be logged in to view attached files.

[Elizabeth]

Here’s the css I’m using. `

.buttonlt {
margin-top: 30px;
text-transform: uppercase;
font-size: 1.3em;
font-weight:140;
font-family: ubuntu;
}

.buttonlt:link {
margin-top: 30px;
text-transform: uppercase;
font-size: 1.3em;
font-weight:140;
font-family: ubuntu;
text-decoration: underline;
color: #c4cacf !important;
}

.buttonlt:hover {
color: #ffffff !important;
text-decoration: underline;
}

[Sushil Adhikari]

Hi Elizabeth,

You have to style a tag for changing style of link. Here is the example :

.buttonlt:hover {
color: #ffffff !important;
text-decoration: underline;
}

instead of this you need to reference to a tag.

.buttonlt a:hover {
color: #ffffff !important;
text-decoration: underline;
}

same for

.buttonlt a:link {
margin-top: 30px;
text-transform: uppercase;
font-size: 1.3em;
font-weight:140;
font-family: ubuntu;
text-decoration: underline;
color: #c4cacf !important;
}

Let us know how if you got any problems on this.

Thanks

[Elizabeth]

Doh, glad it was something as simple as a grammar problem. Thank you!

[Sushil Adhikari]

Sounds better Elizabeth.

Thanks

[Author]

Posts