[Support request] Add shadows to all the post and page images without any additional plugin

Home Forums Support [Support request] Add shadows to all the post and page images without any additional plugin

Home Forums Support Add shadows to all the post and page images without any additional plugin

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1412171
    Shami

    How can I add shadows to all the post and pages images without any additional plugin?

    I want to add some css in such a way that it doesn’t conflict with other plugins. I only want to add shadows in my post and pages images to make them look good.

    #1412465
    David
    Staff
    Customer Support

    Hi there,

    instead of using this CSS selector:

    .post img {

    use:

    .post .wp-block-image img,
    .post .featured-image img {

    This will apply only to images added using an Image block and the featured image.

    #1412553
    Shami

    Can you please elaborate? I didn’t get anything at all.

    I forgot to tell you that I’ve been using this css for adding shadow to my post’s images:

    .post img {
    border:1px solid #C0C0C0;
    box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -khtml-box-shadow: 10px 10px 5px #ccc;
    }

    But I noticed that it doesn’t work on pages. Also I hope to increase the blur and spread a bit. So how do I do it?

    #1412632
    David
    Staff
    Customer Support

    If you want it across the entire site you would do this:

    .wp-block-image img,
    .featured-image img,
    .post-image img {
        border:1px solid #C0C0C0;
        box-shadow: 10px 10px 5px #ccc;
    }

    You can use a site like this to generate the box-shadow property:

    https://www.cssmatic.com/box-shadow

    #1412655
    Shami

    Thanks David. That website you mentioned made things a lot easier.

    #1412825
    David
    Staff
    Customer Support

    You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.