Wrong color in menu and links

  • remoschraner · Member ·

    Hi!
    6 Days ago you helped me to fix the colors of the links – but since today it got worse:
    The menu ist highlighted in TWO colors, yellow and orange and the links are again yellow…
    But everything should be highlithed orange…
    This CSS you gave me doesn’t work anymore:
    .single .entry-content a:not([class*=wp-block]), .page .entry-content a:not([class*=wp-block]) {
    background-color: #ff6c00;
    }

    How can I fix it?

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

  • lefoududroit · Member ·

    Hello !

    I have the same problem and tried to fix it without any success…

  • lefoududroit · Member ·

    The newsletter button is barely readable, and the links to the articles are yellow. The menu is highlighted in two colors.

    I need help on this blog : https://lefoududroit.com

  • razvanonofrei · Theme Author ·

    Hey remoschraner!

    It seems like one of the recent updates broke links styles for people using custom colors. We are looking into a way of gracefully fixing that or rolling back the changes.

    I can give you a temporary solution the issue and come back when we have a solution.

    The CSS for changing links color should look like this:

    .single .entry-content a:not([class*=wp-block]), 
.page .entry-content a:not([class*=wp-block]) {
background-color: transparent;
background-image: linear-gradient(180deg,transparent 0%,#ff6c00 0%,#ff6c00 100%,transparent 100%);
}

    The CSS for changing menu items color:

    .jetpack_subscription_widget input[type="submit"], .widget_blog_subscription input[type="submit"], .sidebar .widget a:hover, .grid__item .entry-content a, .page-links a, .smart-link, .single .entry-content a, .page .entry-content a, .edit-link a, .author-info__link, .comments_add-comment, .comment .comment-reply-title a, :first-child:not(input)~.form-submit #submit, div#infinite-handle span, .sidebar a:hover, .nav--main li[class*="current-menu"]>a, .nav--main li:hover>a {
background-color: transparent;
background-image: linear-gradient(180deg,transparent 0%,#ff6c00 0%,#ff6c00 100%,transparent 100%);
}

    lefoududroit the CSS snippets above should also help you. You just need to replace any occurence of #ff6c00 with #f92e2e

    I’ve also made a change to fix the display of the newsletter button which should be live soon. I’ll be back when we know what is the long-term solution so to speak.

    Let me know if things turned out how they should’ve.

    Best regards!

  • remoschraner · Member ·

    Hi!
    The menu color is now orange – thanks!
    but the color of the links is still yellow..
    and i saw that some buttons are also orange AND yellow, look here: https://dervolpe.ch/welpe/

  • razvanonofrei · Theme Author ·

    My bad, the selector had to be updated as well not just the properties. This should work now for the links:

    /* Change links background color */
.single .entry-content a:not([class*=wp-block]):not(.img-link), 
.page .entry-content a:not([class*=wp-block]):not(.img-link) {
    background-color: transparent;
    background-image: linear-gradient(180deg,transparent 0%,#ff6c00 0%,#ff6c00 100%,transparent 100%);
}

    Update color for buttons:

    /* Change buttons background color */
input[type=submit], 
button {
    background-image: linear-gradient(180deg,transparent 0%,#ff6c00 0%,#ff6c00 100%,transparent 100%);
}

    We may fix this quickly but here is some CSS to reset styling for the button block:

    /* Reset button block style */
.wp-block-button__link[class] {
    background-image: none;
    color: white;
}

    Hope this helps. Cheers!

  • remoschraner · Member ·

    thank you.
    almost done, 2 things:

    now the links are hardly readable: how can i change the height of the color in links? so that the color is only underlining the link

    and the links in my footer are still shown yellow, not orange, when you click on them

  • razvanonofrei · Theme Author ·

    For the footer links, you have to change your selector in the Additional CSS from

    .site-footer a:hover
    to
    .site-footer[class] a:hover

    To make the coloured line behind text smaller then it is, you can add the following line, right after the background-image property, for any selector.
    background-size: 100% .15em;

  • remoschraner · Member ·

    hm.
    I have no “.site-footer a:hover” in my css…
    before the update it was orange, not yellow

    (the smaller background in links worked, thanks!)

  • razvanonofrei · Theme Author · 
    
.site-footer[class] a:hover {
    color: #ff6c00;
}

    Should fix your footer links color

  • remoschraner · Member ·

    yes!
    thank you very much!

  • The topic ‘Wrong color in menu and links’ is closed to new replies.