Split: Wrong color in menu and links

  • lefoududroit · Member ·

    Thank you for the quick answer. I tried both CSS, but the first one for changing links color doesn’t work for me.
    The second one works very well, thank you !

    The newsletter button works as well.

  • razvanonofrei · Theme Author ·

    I split the topic so I could deal with each of you on a separate thread. But the reason for CSS not working was the same for both of you. Please try this snippet:

    /* 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%,#f92e2e 0%,#f92e2e 100%,transparent 100%);
}

    You can also change the background color of buttons with this snippet:

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

    Hope this helps. Cheers!

  • lefoududroit · Member ·

    /* 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%);
    }

    this does not work for me, it just adds orange background and the link is still written in yellow :/

  • lefoududroit · Member ·

    Thank you but it still doesn’t work. The text is yellow

  • razvanonofrei · Theme Author ·

    Hey lefoududroit,

    While debugging your website though the developer tools of my browser things seem to work just fine.

    Could you please add the CSS above, and make a screenshot or let me know somehow which text turns yellow because I can’t really understand what you’re talking about. Then I can check out your website and give you a solution to the problem.

  • lefoududroit · Member ·

    Thank you, now it works !

    I just have a last question. The picture on this page https://lefoududroit.com/juridique/game-of-thrones-realisme-ou-pure-fiction/

    is aligned too far on the left, how can I change this ?

    And the legends under pictures are aligned left, before the update it was centered

  • razvanonofrei · Theme Author ·

    Changes related to aligning the cover block should be live soon.

    Regarding the legends, I cannot trace the moment when they were changed to be left-aligned. I will add this to our issue tracker to go through all captions’ alignment and fix any issue we find. This is why I wouldn’t advise you using any custom CSS to alter it back to being centred.

  • lefoududroit · Member ·

    okay thanks alot !!

  • darnaoudova · Member ·

    Hi,
    Great advice, almost all my changing links/buttons colour questions were answered except for – my menu buttons seems to be split in two colours – the default one and the custom one. Could you advise?
    Thank you in advance!

  • darnaoudova · Member ·

    Screenshot here, thank you https://imgur.com/a/BE7Bruo

  • razvanonofrei · Theme Author ·

    darnaoudova, your menu items have a background-color when they shouldn’t. It’s probably the 2nd line in your Additional CSS where you should have

    background-color: transparent;
background-image: linear-gradient(180deg,transparent 0%,#ed4547 0%,#ed4547 100%,transparent 100%);

    Also the two HEX values in the background-image property should match. It should be #ed4547 instead of #f7e1e1

    Cheers

  • darnaoudova · Member ·

    Hi again razvanonofrei! Thank you for the quick answer. I got your point and changed it accordingly but unfortunately it does not change colour, screenshot here: https://imgur.com/a/BE7Bruo

  • razvanonofrei · Theme Author ·

    Hey darnaoudova,

    I’ll tell you things I can see in this screenshot https://i.imgur.com/yBnYBog.png

    Your CSS selectors are duplicated. Lines 1 to 4 should be deleted, and the background-image at line 9 should be fixed as described above. However, these selectors are related to links inside the content.

    For changing background color for links inside the main menu you should use something like this:

    .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%);
}

    Best regards

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