Change post style

  • Marketing Master

    #5205

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

    ronangelo

    #31102

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

    Mod

    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.

    Mod

    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" />

    Mod

    Kenneth John Odle

    #31105

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

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

    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

    Mod

    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

    #31108

    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.