Wrong color in menu and links

  • Author
    Posts
  • #152684

    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 dervolpe.ch.

    #152686

    lefoududroit
    Member

    Hello !

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

    #152687

    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

    #152691

    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!

    #152693

    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/

    #152697

    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!

    #152812

    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

    #152818

    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;

    #152935

    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!)

    #152936

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

    Should fix your footer links color

    #152937

    remoschraner
    Member

    yes!
    thank you very much!

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