Image Margin

Fantastic FourOne of the shortcomings of the Black-Letterhead theme when it first came out was, there was no spacing between the images and the text. I’ve added margins of 7px around the images located in the post section. Notice, there is now spacing between this Fantastic Four image and this text.

The change is cosmetic, but it makes a big difference to the layout and presentation. To add space around the images, edit the “style.css” file located in the Black-Letterhead directory and use the code below.

I also like how Aitortxu has done here.

11 Responses to “Image Margin”

  1. Aitortxu says:

    I use this code:


    .ima{
    border-style:solid;
    border-color:#FD5A1E;
    padding:15px;
    margin: 4px 15px 10px 0;
    float:left;
    }

  2. ulyssesr says:

    Thanks for the code. :)

  3. Dave says:

    Where in the CSS do you place this code? Does it matter?

  4. ulyssesr says:

    Hi Dave,

    It really doesn’t matter where you place the code in CSS, although if you have multiple entries, the latter code will override the previous one.

    – Ulysses

  5. jes says:

    ulysses,

    any way to get flickr to work on it? i’ve tried several times to get a flickr php code in but i end up with a sparse error. i’ve used this template with black headers and footers.

  6. ulyssesr says:

    jes,

    There a couple of WordPress Flickr plugins you might want to use instead of coding php code on your own. There’s no need to recreate the wheel. Based on first impression, Tan Tan Noodles’ seems to be the cleanest installation RandomByte gives you another option worth checking. Good luck!

    ulysses

  7. Mike says:

    It’s sometimes better to adjust image margins as you add each image, in XHTML or HTML format. That way only the “one” image is affected, instead of “all” images.

    Adjusting image margins in the style.css can affected not only other images, but plugins too.

  8. ulyssesr says:

    You have a good point. Fortunately, this theme does not have any images, so its not affected.

  9. Mark says:

    This may be a lame question, … I can’t code to save my life. Is there anyway to add a http:/ link to the page header image (I use this rather than the text option)? I would like to have the header graphic in the blog (pacificlight.ca/wordpress) link back to my main photography site (pacificlight.ca) . I’ve tried commenting out the call to the header title and description in the header.php and inserting an image with an embedded link… but the whole page blows up on me when I try this.

    Thanks in advance.

  10. Thanks for the awesome layout. It was very nicely done!

    Here’s the implementation on my site:

    http://www.passion-punch.com

  11. Rosemary M. Cellini says:

    I did some editing of the CSS, but cannot seem to locate some things I want to edit. Here is what I want to do:

    increase margin above image [blogged over from flicker]
    decrease margin above text in post
    delete dashed line under meta in sidebar

    Can you help?

    Thanks!

Leave a Reply