tried changing link colors but only SOME were affected

  • Unknown's avatar
    sagetyrtle · Member ·

    I’d like to change the visited link color in my WordPress theme.

    I tried this:

    /* unvisited link */
a:link {
    color: #e65c00;
}

/* visited link */
a:visited {
    color: #4286f4;
}

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

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

    And it changed SOME of the links, in the sidebar and menu, but not on the pages (which is my goal).

    The page links have visited links gray (and for some reason I can’t make them bold).

    I would like visited links to be #4286f4.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    And it changed SOME of the links, in the sidebar and menu, but not on the pages (which is my goal).

    The page links have visited links gray (and for some reason I can’t make them bold).

    I would like visited links to be #4286f4.

    When I put your code into my web inspector, visited links are showing as the blue color. On your menu, I see that the submenu items are not showing as visited. You can change your visited code to this to make that happen. 

    a:visited, .navigation-main ul ul a:visited {
    color: #4286f4;
}

    I am not able to get it to go bold though. I’ll ask one of our developers on that though and get back to you.

  • Unknown's avatar
    colleencachemoney · Member ·

    Hey sagetyrtle!

    I did the same thing thesacredpath did and worked for me as well, I also added 

    a: visited, .navigation-main ul yl a:visited {
color: #4286f4;
font-weight: 800;
}

    If the links aren’t becoming bold, you could put the
    !important after the desired weight value for font-weight.

    This could be a fix for you, and like thesacredpath mentioned, it worked for my web inspector along with the font weight change.
    If it doesn’t work, I really hope the developer thesacredpath summoned i able to help you! :)

    Thanks guys!

    — Colleen

  • Unknown's avatar
    sagetyrtle · Member ·

    Thanks so much for your reply. I tried the above code:

    /* unvisited link */
a:link {
    color: #e65c00;
}

/* visited link */
a:visited {
    color: #4286f4;
}

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

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

a: visited, .navigation-main ul yl a:visited {
color: #4286f4;
font-weight: 800;
}

    And the page itself still has gray visited links. In this screenshot:

    screenshot link

    you can see the CSS on the left, the “listen” links in gray in the centre, and the orange links in the menu on the right. (I’ve taken out the CSS since making this screenshot so my viewers aren’t confused.)

    Any ideas? I appreciate your time.

  • Unknown's avatar
    colleencachemoney · Member ·

    Sagetyrtle,

    No problem, I love doing this for people :)

    But just so I am understanding you correctly, you do want all of the links on your site to be bolded? And one more question, what color(s) are you wanting the links to be? There are different “types” of user initiated styles that can be implemented, for example: the style can change when you hover over a link, are currently on a page that has a link of itself somewhere on that page (I.e, main navigation menu with a Home link while you’re on the link), have previously visited a the page attached to the link (as you know) and the regular old link.

    You dont HAVE to change the style but in your case I think we might need to.

    That being said, what exactly would you like your links to look like? All gray, and bold even on every section of the site — consistent link style throughout site.

    I apologize if that got a little confusing I can definitely rephrase of needed!

  • Unknown's avatar
    sagetyrtle · Member ·

    Hi Colleen,

    Ideally I’d be able to assign:

    unvisited links: orange
    visited links: blue

    (I don’t mind about hovering).

    Getting rid of the gray link color is the ultimate goal, as the links are very hard to see currently.

    And if I could make individual links bold (not all of them) by putting the tag around them (which currently doesn’t work) that would be great.

    Thanks again,
    Sage

  • Unknown's avatar
    siobhyb · Member ·

    Hi both!

    @colleencachemoney: Thank you so much for all of your help!

    @sagetyrtle: So, I can see that this theme uses specific CSS to set the colour on some links, and we’ll therefore need to be specific in our custom CSS to override the theme’s default colours.

    For example, the following custom CSS is what’s need to change links within the content of your home page:

    .news .entry-content a, .page-template-full-width-page .entry-content a {
    color: #e65c00;
}

    Let me know if you spot any other links on your site that aren’t changing to orange and I can help with the custom CSS that you need.

    I also talked to @thesacredpath about the bold issue and he said he found this is a known issue with some web fonts. Unfortunately there’s not a workaround at the moment but you could consider choosing a different font via the Fonts panel of the WordPress.com Customizer.

  • Unknown's avatar
    sagetyrtle · Member ·

    Thanks so much to both of you for your help. This worked a treat.

  • The topic ‘tried changing link colors but only SOME were affected’ is closed to new replies.