[Resolved] Keep CSS of posts entry titles and inside image caption separated

Home Forums Support [Resolved] Keep CSS of posts entry titles and inside image caption separated

Home Forums Support Keep CSS of posts entry titles and inside image caption separated

  • This topic has 9 replies, 4 voices, and was last updated 5 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2150349
    Erman

    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!

    #2150382
    Fernando
    Customer Support

    Hi 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! ๐Ÿ™‚

    #2151941
    Erman

    Hi 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.

    #2152130
    David
    Staff
    Customer Support

    Hi 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.

    #2155856
    Erman

    Thank 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!

    #2156006
    Leo
    Staff
    Customer Support

    Try this:

    .wp-block-image figcaption a {
        text-decoration: underline;
    }

    Use the the browser developer tool to determine the correct classes and CSS selectors ๐Ÿ™‚

    #2156497
    Erman

    That 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.

    #2156569
    David
    Staff
    Customer Support

    Hi there,

    you can add a transition to the CSS:

    .wp-block-image figcaption a:hover {
        text-decoration: underline;
        transition: all 0.3s;
    }
    #2157215
    Erman

    That seems to be it, David!

    I’ll tweak the transitions to my liking.

    Thanks a lot for helping out! Appreciate it.

    #2157641
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.