Change post style

  • Marketing Master


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



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


    Kenneth John Odle


    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


    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;

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

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


    Kenneth John Odle


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

    Marketing Master


    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?



    Kenneth John Odle

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


    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


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

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum