Custom CSS working on the wrong element

This topic has 17 replies, 4 voices, and was last updated 3 years, 5 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
October 22, 2022 at 8:44 am #2382342
Sasha
Hello,

I have some custom CSS on my site to highlight/bold links in body text:
```
.entry-content a:not(.gb-button) {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content a:not(.gb-button):hover {
	box-shadow: inset 0 -1.5em #A3E4DA;
}
```
Unfortunately, this effect is being applied to GB post templates towards the bottom of my front page (URL below). How can I turn it off for the post templates but ensure entry content (in body text & image captions) remains unaffected?

Thank you!
October 22, 2022 at 11:40 am #2382458
Ying
Staff
Customer Support
Hi Sasha,

Try this:
```
.entry-content a:not(.gb-button):not(.gb-query-loop-item a) {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content a:not(.gb-button):not(.gb-query-loop-item a):hover {
	box-shadow: inset 0 -1.5em #A3E4DA;
}
```
October 22, 2022 at 6:45 pm #2382630

Sasha

Thanks Ying! I entered that in but didn’t save, because I could see (in preview) that it added the highlight effect to the Social Snap sharing buttons at the top & bottom of each post.

October 23, 2022 at 4:28 am #2382809
David
Staff
Customer Support
Hi there,

are the links you want to style in a Paragraph?
If so, then you can do this:
```
.entry-content p a {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content p a:hover {
	box-shadow: inset 0 -1.5em #A3E4DA;
}
```
October 23, 2022 at 11:21 am #2383303

Sasha

Hi David – this highlight style would need to apply to links in entry paragraphs AND image captions. Any changes recommended for the CSS you shared?

October 23, 2022 at 6:22 pm #2383468
Fernando
Customer Support
Hi Sasha,

Try this CSS instead:
```
.entry-content :is(p,figcaption) > a {
    color: black;
    font-weight: 700;
    box-shadow: inset 0 -0.5em #A3E4DA;
    transition: box-shadow 0.2s ease-in;
}

.entry-content :is(p,figcaption) > a:hover {
    box-shadow: inset 0 -1.5em #A3E4DA;
}
```
October 24, 2022 at 10:14 am #2384520

Sasha

Thanks Fernando! That seems to have done the trick 🙂

October 24, 2022 at 4:59 pm #2384738

Fernando
Customer Support

You’re welcome Sasha! 🙂

October 28, 2022 at 12:20 pm #2392077

Sasha

Sorry to reopen this thread, but I just noticed the highlight CSS effect is now not working in lists.

Could you please have a look?

October 29, 2022 at 6:38 am #2392667
David
Staff
Customer Support
Try changing it to:
```
.entry-content :is(p,li,figcaption) > a {
    color: black;
    font-weight: 700;
    box-shadow: inset 0 -0.5em #A3E4DA;
    transition: box-shadow 0.2s ease-in;
}

.entry-content :is(p,li,figcaption) > a:hover {
    box-shadow: inset 0 -1.5em #A3E4DA;
}
```
October 29, 2022 at 9:12 am #2393148

Sasha

Thanks David! I entered the new CSS & strangely it seems to have had no effect.

October 29, 2022 at 9:23 am #2393154

David
Staff
Customer Support

Thats because i was been stupid. I just edited the code above:

https://generatepress.com/forums/topic/custom-css-working-on-the-wrong-element/#post-2392667

October 29, 2022 at 11:50 am #2393310

Sasha

Haha, that worked perfectly. Thank you!

October 30, 2022 at 5:08 am #2393750

David
Staff
Customer Support

Glad to hear that!

November 7, 2022 at 1:08 am #2404375

Sasha

Hello again – so sorry to open this back up!

While the CSS is working well on links in regular body/list text, I’ve since noticed that it doesn’t work on bolded and/or italicized link text in body paragraphs or lists.

Please let me know if you might be able to help me make some modifications to the code. Thank you!
Author

Posts