Adding drop-shadows to image attachments globally.

  • Unknown's avatar
    joshuatreefort · Member ·

    Looking for help, input, and CSS samples on how to add drop-shadows for image objects and image attachment borders.
    this is the site-
    Jeanzimmnerman.com / jeanzimmerman.blogspot.com
    Using Theme Name: Pilcrow
    have CSS UPGRADE

    Want to have drop-shadows for the book covers in the left and right sidebars as well as, I guess, the links boxes in the sidebara and for all images that get posted in posts for blogging and all the pages.

    Is there a way to affect this CSS change globally or do I have to make sure it is there for a number of elements?

    TIA – Thanks in advance

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    raincoaster · Member ·

    You’re asking for help for a BLOGSPOT blog on WORDPRESS.COM?

    Don’t do that. We will mock you.

  • Unknown's avatar
    joshuatreefort · Member ·

    Ooooops. Up too late. I meant to say this is a wordpress site. jeanzimmernan.wordpress.com

  • Unknown's avatar
    thesacredpath · Member ·

    Give this a try. Add it to the bottom of your CSS. It also does the header image and if you do not want that done this way, let us know and we can exclude it.

    img.size-auto, img.size-large, img.size-full, img.size-medium, .attachment img, a img {
border-color: #ddd #ccc #ccc #ddd;
height: auto;
left: -4px;
max-width: 95%;
padding: 4px;
position: relative;
-moz-box-shadow: 4px 4px 12px #493e37;
-webkit-box-shadow: 4px 4ps 12px #493e37;
box-shadow: 4px 4px 12px #493e37;
border-width: 1px;
border-style: solid;
background-color: #bfa290;
left: -4px;
}

a img {
left: 0 !important;
}
  • Unknown's avatar
    thesacredpath · Member ·

    I just noticed that this sort of blows up an image with a caption. In this case the image would not have a border. The border would have to be added to the caption instead.

    This is getting complicated. This excludes the captioned image.

    .wp-caption img {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
box-shadow: none !important;
max-width: 98% !important;
}

    You then add .wp-caption to the list of selectors on the first bit of code I gave so that it looks like this.

    img.size-auto, img.size-large, img.size-full, img.size-medium, .attachment img, a img , .wp-caption {

    There are likely other adjustments that will be required, but if you get this up then we can work on the rest.

  • Unknown's avatar
    joshuatreefort · Member ·

    Going to work with your inputs right now and see how it looks… thanks

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome. I expect there will be some adjustments you will want to make.

  • Unknown's avatar
    joshuatreefort · Member ·

    Thanks for your efforts TheSacredPath. I like how the CSS worked out. Need to check with Jean and see what she thinks,

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome. I made some design choices as far as colors and such and those can be changed easily enough.

  • The topic ‘Adding drop-shadows to image attachments globally.’ is closed to new replies.