- This topic has 9 replies, 4 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
March 10, 2022 at 11:06 pm #2150349Erman
Hello,
I’m using the ready-made Read Theme, and I’m trying to add different CSS to my H2 and H4 titles to the posts on the front page. Also, I’m trying to add a link and link hover color to my image captions, and an underline text-decoration on hover.
The CSS I’m using is:
/* H2 link color */ h2.wp-show-posts-entry-title a { color: #FFFFFF; } /* H2 link hover color*/ h2.wp-show-posts-entry-title a:hover { color: #3F53B3; } /* H4 link color */ h4.wp-show-posts-entry-title a { color: #FFFFFF; } /* H4 link hover color*/ h4.wp-show-posts-entry-title a:hover { color: #3F53B3; } /* Inside article caption */ .inside-article a { color: #3F53B3; } /* Inside article caption hover */ .inside-article a:hover { color: #3F53B3; text-decoration: underline }
However, the last part that adds a text-decoration on hover applies to all my H2 and H4 as well.
How can I prevent this from happening?
Thank you!
March 10, 2022 at 11:53 pm #2150382Fernando Customer SupportHi Erman,
To have a better understanding of the issue, and to provide an appropriate solution, may you kindly provide the link to the site in question?
You may use the Private Information field if you prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hope to hear from you soon! ๐
March 12, 2022 at 7:34 am #2151941ErmanHi Fernando,
Thank you for helping out!
Sure, I’ve included both URLs in the private information field.
I’m trying to add a color on hover, #3F53B3, to my post title links on the home page. Also, I want the links inside my articles to have the color of #3F53B3 as well as an underline on hover.
However, when I apply the CSS for underline on hover on the links inside my articles, the underline also applies to the post title links on the home page.
Please let me know if I can clarify my issue further.
March 12, 2022 at 8:03 am #2152130DavidStaffCustomer SupportHi there,
if you want the underline to only appear on links within your post content then use this CSS just for that:
.entry-content p a:hover { text-decoration: underline; }
This will apply only to your post content, and links that are within a paragraph.
March 15, 2022 at 12:56 pm #2155856ErmanThank you so much for replying, David.
Is there any simple way to inspect and see exactly which element or class I should add code to?
For example, I’d like to add an underline text-decoration on hover for all image captions on my blog. I tried adding the following code:
.inside-article a:hover { color: #3F53B3; text-decoration: underline }
However, that didn’t work. Instead, it applied it to all links, even on post titles on the front page.
Would be great to know if there’s a simple way to see the exact element or class to make changes to.
Thank you once again!
March 15, 2022 at 4:23 pm #2156006LeoStaffCustomer SupportTry this:
.wp-block-image figcaption a { text-decoration: underline; }
Use the the browser developer tool to determine the correct classes and CSS selectors ๐
March 16, 2022 at 4:57 am #2156497ErmanThat seems to work, but I get this weird transition where the underline will appear first, before the hover color changes, which makes it look a bit out of sync.
Does that have something to do with the wrapper? I’d like the underline and hover color to appear at the same time, if you understand what I mean.
March 16, 2022 at 6:03 am #2156569DavidStaffCustomer SupportHi there,
you can add a transition to the CSS:
.wp-block-image figcaption a:hover { text-decoration: underline; transition: all 0.3s; }
March 16, 2022 at 2:37 pm #2157215ErmanThat seems to be it, David!
I’ll tweak the transitions to my liking.
Thanks a lot for helping out! Appreciate it.
March 17, 2022 at 3:17 am #2157641DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.