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

• 

  sydesiderataclassic · Member · Sep 12, 2013 at 7:30 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  mrdirby · Member · Sep 12, 2013 at 7:41 pm

  • Copy link

  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.

• 

  sydesiderataclassic · Member · Sep 12, 2013 at 7:49 pm

  • Copy link

  Hi mrdirby,

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

  Any ideas?

  Thanks!

• 

  mrdirby · Member · Sep 12, 2013 at 8:18 pm

  • Copy link

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

• 

  sydesiderataclassic · Member · Sep 12, 2013 at 8:51 pm

  • Copy link

  Perfect! :D My thanks!

• 

  mrdirby · Member · Sep 12, 2013 at 8:54 pm

  • Copy link

  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.