Olsen Hyperlink Color Change

  • Unknown's avatar
    aforsh96 · Member ·

    Hi,

    I’m struggling with changing the colour of my hyperlinks.

    Basically, I want my navigation menu to be black text, but to change pink when a link is hovered over or currently being viewed.

    I also want my hyperlinks in my posts, and the category links next to the posts, to be the same pink colour.

    Next, I want the post title to be black, and pink if it is hovered over.

    Last, I want the social media icons in the sidebar widget to either hover pink, or be pink all the time.

    So far I’ve managed to use this which has enabled the pink hover on the navigation bar (but it’s still a different colour when it is currently being viewed) and the post title:

    ul.nav-menu li a:hover {
    color: #f7a3a6;
}

.entry-title a:hover {
  color: #f7a3a6 ;
}

    I hope this makes sense! Sorry if it’s a bit fiddly.
    Thanks very much!

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

  • Unknown's avatar
    torres126 · Member ·

    Hi there,

    Would you mind posting a URL of your website? It’d help to confirm the changes you make. In the meantime, I’ve tried using the theme demo to offer you a CSS solution, which might not work, but hopefully it will!

    Basically, I want my navigation menu to be black text, but to change pink when a link is hovered over or currently being viewed. 

    .main-navigation a {
color: inherit;
}

.current-menu-item {
color: #F7A3A6;
}

.main-navigation a:hover, .main-navigation a:focus {
color: #F7A3A6;
}

    I also want my hyperlinks in my posts 

    .entry-content a {
color: #F7A3A6;
}

    The category links next to the posts, to be the same pink colour.

    Which category links? Do you mean ones on your sidebar? If so, that’d probably require your site URL for that CSS!

    Next, I want the post title to be black, and pink if it is hovered over.

    .entry-title a:hover {
color: #f7a3a6;
}

    Last, I want the social media icons in the sidebar widget to either hover pink, or be pink all the time.

    All the time:

    .jetpack-social-navigation-svg .icon {
fill: #f7a3a6;
}

    On hover:

    .jetpack-social-navigation-svg .icon:hover {
fill: #f7a3a6;
}

    Adding CSS: https://en.support.wordpress.com/custom-design/editing-css/

    Let me know if that works for you. I suspect some might not as I’ve tested it against the theme demo, which can be limiting sometimes, so it’d be great if you could provide your URL if it doesn’t work! :)

  • Unknown's avatar
    aforsh96 · Member ·

    Hi!

    Thanks so much for that. Most of it worked! The site I need help with is https://theamberapproach.com/

    For the categories, I mean where it says the categories above the post title, also where it says ‘leave a comment’, although these might be two different types of hyperlink I’m not sure?

    Changing the colour of the social media icons also didn’t work unfortunately!

    Also, is there a way I can change the colour of the navigation menu option for the currently open page?

    Thank you!

  • Unknown's avatar
    torres126 · Member ·

    Thanks for confirming!

    Changing the colour of the social media icons also didn’t work unfortunately!

    Whoops, please try this instead. All the time:

    .jetpack_widget_social_icons svg {
color: #f7a3a6;
}

    On hover:

    .jetpack_widget_social_icons svg:hover {
color: #f7a3a6;
}

    For the categories, I mean where it says the categories above the post title, also where it says ‘leave a comment’, although these might be two different types of hyperlink I’m not sure?

    I think I understand what you’re referring to; here’s how to change the categories above the post title.

    .entry-categories a {
color: #f7a3a6;
}

    Here’s how to change the colour of the categories above the comment field.

    .entry-footer a {
color: #f7a3a6;
}

    Also, is there a way I can change the colour of the navigation menu option for the currently open page?

    The CSS above should have this effect, unless I’m misunderstanding (let me know if I am!). Currently, the CSS should mean that when a reader is on a specific page, the page name on the navigation menu will be pink. I currently see this effect with pink on your site. 

    .current-menu-item {
color: #F7A3A6;
}

    Let me know if that works for you or if you have any further questions! :)

  • Unknown's avatar
    aforsh96 · Member ·

    Hiya,

    Thanks everything works except I still can’t get the navigation menu right. The currently open page name on the navigation menu shows up as a red colour for me (you can see the difference if you hover over it where it turns the pink that I want).

    Also, above a post where it says the date published and the author, the hyperlink on the author tag is also a red colour too.

    Please can you help with these two things? Thank you so much for your help so far!

  • Unknown's avatar
    torres126 · Member ·

    The currently open page name on the navigation menu shows up as a red colour for me (you can see the difference if you hover over it where it turns the pink that I want).

    Ah, my bad, I see what you mean now. Let’s try this which should hopefully have more success:

    .current-menu-item>a {
color: #F7A3A6 !important;
}

    Also, above a post where it says the date published and the author, the hyperlink on the author tag is also a red colour too.

    a.url.fn.n {
color: #F7A3A6;
}

    Let me know if that works! :)

  • Unknown's avatar
    aforsh96 · Member ·

    Hiya,

    Thanks so much for all your help, that has all worked perfectly!

  • Unknown's avatar
    torres126 · Member ·

    Awesome, glad to hear! Let us know if you have any further questions. :)

  • The topic ‘Olsen Hyperlink Color Change’ is closed to new replies.