CSS to featured image only

  • Resolved jackofallvices

    (@jackofallvices)


    10 years, 8 months ago

    Hello,
    I am not proficient in CSS. I know this is simple, but I can’t seem to make it come together.

    I was given some code to round images via CSS, and it works perfectly when added to my child theme style.css file.

    img{border:1px solid #;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

    That rounds all images on the site, however. I would only like it to be where specified, in this case, on the featured images.

    What additions do I need to make to only round that image class?

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    10 years, 8 months ago

    That will vary upon themes as some do not use the_post_thumbnail for their featured images.

    One way I can think of would be using the attachment-post-thumbnail class. So the styling would be:

    .attachment-post-thumbnail {
/* style code goes here */
}

    Depending on the theme, you may have to add a few more selectors for specificity just in case. Something like:

    .archive .site-content .attachment-post-thumbnail {
/* CSS stlying */
}

    The above would target only archive pages with post thumbnails. 🙂

    Any further questions, don’t hesitate to ask. 🙂

    Thread Starter jackofallvices

    (@jackofallvices)

    10 years, 8 months ago

    Hey Thanks!

    I inspected the element and renamed it in your code with what the Theme named it. Perfect!

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    10 years, 8 months ago

    Awesome! Glad it worked for you. 😀

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS to featured image only’ is closed to new replies.