Archived topic

Custom CSS working on the wrong element

17 replies · Started by Sasha on October 22, 2022

Viewing posts 1–15 of 18

October 22, 2022 at 8:44 am #2382342

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

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

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

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

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

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

Thanks Fernando! That seems to have done the trick :)

October 24, 2022 at 4:59 pm #2384738

You're welcome Sasha! :)

October 28, 2022 at 12:20 pm #2392077

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

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

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

October 29, 2022 at 9:23 am #2393154

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

Haha, that worked perfectly. Thank you!

October 30, 2022 at 5:08 am #2393750

Glad to hear that!

November 7, 2022 at 1:08 am #2404375

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!

This archived topic is closed to new replies.

Start building better websites today.