How to have shadows/borders on images

[brookelustig]

Hello everyone, I have a coupe of pictures (screenshots) on a couple of pages and I'm trying to create shadows and border like they have on http://my.studiopress.com/themes/ but can't seem to figure it out. My background is also white and I'm using the parallax theme but for some reason the images are not changing when I apply changes to the style.css.

Any advice on how to make the images have the same background as the studiopress website?

Cheers,

Brooke

[Mike]

Hi Brooke,

Inspect those elements using Firebug or Chrome web dev tools and look for the comment /* Themes Loop */. Beneath that is the .theme-wrap class which will get you started.

Mike

[brookelustig]

Hi Mike, thank you for your advice, so I copied the following to the style css and added the class to my html and image but nothing happens...any tips?? I only have very basic knowledge about html and css so any advice would be so helpful!

.theme-wrap {
background: rgba( 0, 0, 0, 0.9 );
color: #fff;
display: block;
height: 100%;
left: 0px;
opacity: 0;
padding: 20px 40px;
padding: 2rem 4rem;
position: absolute;
top: 0px;
text-align: center;
width: 100%;
}

[brookelustig]

Still banging my head against the wall with this ..could anyone point me towards the right direction, please?

[Mike]

Sorry Brooke,

I'd have to really dig into this & I'm swamped with work at the moment.

[carasmo]

find the image class or the direct parent of the image:

Direct parent:

.parent-div img {
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.43);
}

OR --- if it's the image itself

.img-class {
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.43);
}

This will make all images inside a class .theme-wrap have a shadow:

.theme-wrap img {
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.43);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

---

Genesis Theme Customization and Help

[Author]

Posts