Overriding link colors and styles

Home Forums WordPress Themes – Premium Celestial (Celestial Reloaded) Overriding link colors and styles

This topic contains 7 replies, has 3 voices, and was last updated by  Sushil Adhikari 2 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #44916

    Elizabeth
    Participant

    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.

    #45105

    Styled Themes
    Keymaster

    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

    #45261

    Elizabeth
    Participant

    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.
    #45263

    Elizabeth
    Participant

    Oops, image was too large. Trying again.

    Attachments:
    You must be logged in to view attached files.
    #45265

    Elizabeth
    Participant

    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;
    }

    #45301

    Sushil Adhikari
    Moderator

    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

    #45601

    Elizabeth
    Participant

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

    #45608

    Sushil Adhikari
    Moderator

    Sounds better Elizabeth.

    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.