Viewing 4 replies - 1 through 4 (of 4 total)
  • Anonymous User

    (@anonymized-13579368)

    Hi,

    The image already have the shadow effect and is again applied by your CSS style.

    I guess that it’s in your style.css and you should look for

    .entry-content img,
    .comment-content img,
    .widget img,
    img.header-image,
    .author-avatar img,
    img.wp-post-image {
    /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    and the “thin line” comes from this CSS line of code: box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

    Just change it to: box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); – and your issue should be resolved.

    Thread Starter Willem 2

    (@willem-2)

    Hi Jeremy,

    I changed it with CSS stylesheet editor in Jetpack. IT WORKS! Thank you for your quick response.

    I sill have one question: Will this change have consequences for other functions in Twenty Twelve?

    Anonymous User

    (@anonymized-13579368)

    The only function that is affected is that your image defined with below classes

    .entry-content img,
    .comment-content img,
    .widget img,
    img.header-image,
    .author-avatar img,
    img.wp-post-image

    will don’t have shadow effect.
    CSS it’s the part from your site that gives you the design of your site.

    In your theme “.widget img” is responsible for the shadow effect of images in sidebar.

    For example if you wish to still have shadow effect on other photos (photos from post for example) you can do this:

    – add this line at the end in your style.css:

    .widget img{box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);}

    – and undo the change that you made at the beginning and your other photos will have shadow effect, but only if you wish shadow effect for other photos, if you like how it is now don’t do anything.

    Other functions from theme are NOT affected by this change.

    Thread Starter Willem 2

    (@willem-2)

    Hi Jeremy,

    Thank you for your clear answer. It Works!

    I changed the code because I use the same image also on a page. This is what I have done:

    .widget img,
    .entry-content img {
    box-shadow: 0 0 0 rgba(0,0,0,0.2);
    }

    I have another question but it is a new item. I hope you can help me with this too.

    This item is closed and solved . Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘thin line around image with shadow’ is closed to new replies.