[Marketing Master]

Marketing Master

#5205

Does anyone know ,how to display post in boxes with shadow, just like in this sample:Sample

[ronangelo]

ronangelo

#31102

The one in the sample is really an image placed on the bottom so it would look like a shadow.

[Kenneth John Odle]

Kenneth John Odle

#31103

You can use a box-shadow to add a shadow to items, but unless you offset it, it will always display on all sides.

Ronangelo is correct in that that is a separate image. You have a couple of options:

1) If you just want a single image like that, edit it in GIMP or Photoshop to add that shadow.

2) Create a separate border image and try adding it to images using the :after pseudo class. Because that usually appends stuff to the right, you might need to add clear:both to your image css.

3) You might also be able to set it up as a background to an image, and then offsetting it in the css. This would require your images to be the same size. To be honest, I’m not even sure that this is possible.

The better way to do it might be to create a custom function in a child theme that will automatically add that image after all images of a certain class.

[Kenneth John Odle]

Kenneth John Odle

#31104

Forget ALL of that.

In your custom css, or child theme style sheet, create a new class. For my example here, I’ll call it .shadow

Define that class this way:

.shadow {

padding-bottom: 18px;

background-image:url('post-shadow.jpg');

}

Apply that .shadow class to any image you want to have that shadow:

<img class="shadow" src="parents.jpg" />

[Kenneth John Odle]

Kenneth John Odle

#31105

You can see it in action (with more tips) here:

http://test.kjodle.net/0001/

[Marketing Master]

Marketing Master

#31106

The sample you made is exactly what I wont.

So, if I understand (sorry I’m new about WordPress) I must copy class .shadow to Graphene Custom CSS styles? How can I apply this .shadow class to the images, where to put it?

Thx

[Kenneth John Odle]

Kenneth John Odle

#31107

Quote:

I must copy class .shadow to Graphene Custom CSS styles?

Yes.

Quote:

How can I apply this .shadow class to the images, where to put it?

When you originally upload a photo to a post or page, you will see a box for “CSS class”. Enter it there.

If you forget, just edit the picture, and click on “Advanced Options.” You’ll see it there.

[Marketing Master]

Marketing Master

#31108

OK, now I understand. But is there a picture for posts and pages background?