Split: Wrong color in menu and links

Author

Posts
April 3, 2020 at 11:00 am #152692

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.

April 3, 2020 at 11:31 am #152699
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!
April 3, 2020 at 11:40 am #152700

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 :/

April 3, 2020 at 11:46 am #152701

lefoududroit
Member

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

April 3, 2020 at 11:52 am #152704

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.

April 3, 2020 at 12:03 pm #152706

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

April 3, 2020 at 12:20 pm #152707

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.

April 3, 2020 at 12:58 pm #152708

lefoududroit
Member

okay thanks alot !!

April 3, 2020 at 1:47 pm #152709

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!

April 3, 2020 at 1:57 pm #152710

darnaoudova
Member

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

April 3, 2020 at 2:41 pm #152711
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
- This reply was modified 1 year by razvanonofrei.
April 3, 2020 at 3:12 pm #152713

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

April 6, 2020 at 10:20 am #152811
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
Author

Posts