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

  • Author
    Posts
  • #1435527

    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.

    #1435621

    mrdirby
    Member

    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.

    #1435622

    Hi mrdirby,

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

    Any ideas?

    Thanks!

    #1435627

    mrdirby
    Member

    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;
    }
    #1435635

    Perfect! :D My thanks!

    #1435637

    mrdirby
    Member

    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.

The topic ‘CSS Code Advice – adding identical image borders across the whole site.’ is closed to new replies.