Need help? Check out our Support site, then


CSS Code Advice - adding identical image borders across the whole site.

  1. Hello again everyone,

    I would like to add white/shadowed borders to the images I have across the whole the website. (Possibly including the header - depends how it looks).

    I would like them to be identical to the thumbnail ones on the News page: http://sydesiderata.com/sailing-news/

    What CSS code would enable me to do this? Or do I have to code each image separately?

    Many thanks for your time in advance.

    The blog I need help with is sydesiderata.com.

  2. Hi. Try this.

    img {
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #cfcfcf;
    }

    That will target all images.

  3. Hi mrdirby,

    Thank you for your advice - I popped the CSS in and unfortunately it hasn't worked.

    Any ideas?

    Thanks!

  4. Ah. Ok try this.

    img.header-image, .entry-content img {
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #cfcfcf;
    }
  5. Perfect! :D My thanks!

  6. Great. Glad to help.

    After one more look if there are other images that don't get formatted you might need to replace these selectors with what I gave you.

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

    This should cover all other images like avatars and in widgets.

Topic Closed

This topic has been closed to new replies.

About this Topic