Home › Forums › WordPress Themes – Premium › Celestial (Celestial Reloaded) › Overriding link colors and styles
- This topic has 7 replies, 3 voices, and was last updated 6 years ago by
Sushil Adhikari.
-
AuthorPosts
-
April 27, 2017 at 4:25 pm #44916
Elizabeth
ParticipantHi,
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.
April 29, 2017 at 2:02 pm #45105Styled Themes
KeymasterHi 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 helpfulthanks
ImreMay 2, 2017 at 4:39 pm #45261Elizabeth
ParticipantHi, 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.May 2, 2017 at 4:41 pm #45263Elizabeth
ParticipantOops, image was too large. Trying again.
Attachments:
You must be logged in to view attached files.May 2, 2017 at 4:42 pm #45265Elizabeth
ParticipantHere’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;
}May 4, 2017 at 5:48 am #45301Sushil Adhikari
ModeratorHi 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
May 11, 2017 at 6:50 pm #45601Elizabeth
ParticipantDoh, glad it was something as simple as a grammar problem. Thank you!
May 12, 2017 at 4:19 am #45608Sushil Adhikari
ModeratorSounds better Elizabeth.
Thanks
-
AuthorPosts
- You must be logged in to reply to this topic.