Link Color CSS

  • Resolved terry777

    (@terry777)


    7 years ago

    Hi, I know that you only have link color settings in the upgrade version. I did see a forum post in which you had a link to github with the css references, but that link no longer works, I get a page not found. I haven’t found another post that addresses the issue. Would it be possible to get the references so I can change the link color? Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter terry777

    (@terry777)

    Well, I used the inspector on a link to find the reference, and used this in my custom css area:

    /* change link color */
    .entry-content p a:not(.ow-button-hover):not(.button), .entry-content li a:not(.ow-button-hover):not(.button), .entry-content dl a:not(.ow-button-hover):not(.button), .entry-content pre a:not(.ow-button-hover):not(.button), .entry-content code a:not(.ow-button-hover):not(.button), .entry-content blockquote a:not(.ow-button-hover):not(.button) {
    color: #8aa8e0;
    font-weight: 600;
    }

    It works, but I’m not familiar with these references, so I fear I may change something I don’t mean to change. Am I likely to have broken something with this?

    • This reply was modified 7 years ago by terry777.
    Theme Author Andrew Misplon

    (@misplon)

    Hi @terry777

    Thanks for posting.

    The good thing about making changes via a Custom CSS plugin or Customize > Additional CSS is that you’re working in a really safe space to work in. It isn’t like making PHP changes in a child theme where you can cause a fatal error. If you break styling you’ll see the issue and can remove the rule you just added. The rule you’ve added looks great ??

    Thread Starter terry777

    (@terry777)

    Well, it worked for the links on the pages, but not the sidebar, so I added this:

    a {
    color: #8aa8e0;
    font-weight: 600;
    }

    Would that have worked for all links? I’m used to the old

    /* unvisited link */
    a:link {color: #8aa8e0;}

    /* visited link */
    a:visited {color: #8aa8e0;}

    /* mouse over link */
    a:hover {color: #8aa8e0;}

    /* selected link */
    a:active {color: #8aa8e0;}

    Can you explain how the code below is different? I’ve never seen it before.

    .entry-content p a:not(.ow-button-hover):not(.button), .entry-content li a:not(.ow-button-hover):not(.button), .entry-content dl a:not(.ow-button-hover):not(.button), .entry-content pre a:not(.ow-button-hover):not(.button), .entry-content code a:not(.ow-button-hover):not(.button), .entry-content blockquote a:not(.ow-button-hover):not(.button) {
    color: #8aa8e0;
    }

    It it preferable?

    Theme Author Andrew Misplon

    (@misplon)

    Sure. It’s just a question of specificity.a { } targets all links. .entry-content a targets links in the entry-content div. The rule then continues to target other specific selectors. So preferable depends on what you’re targeting. Hope that helps.

    Thread Starter terry777

    (@terry777)

    Thanks, I am more curious about a:not(.ow-button-hover) etc. as I’ve never seen “not” in a reference before. Does that mean “the link which is not in the class ow-button-hover”?

    Theme Author Andrew Misplon

    (@misplon)

    Ahh, sure. It means all a tags but not an a tag that has the class ow-button-hover.

    https://www.w3schools.com/cssref/sel_not.asp
    https://css-tricks.com/almanac/selectors/n/not/

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Link Color CSS’ is closed to new replies.