Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Manifest Theme, Image Frames

  1. alwayswellwithin
    Member

    Hi,

    Is it possible to add an image frame to the photos in the Manifest theme that is like the one used in Twenty-Eleven. There's white space next to the photo itself (about an eight of an inch, I guess) and then a thin light frame [grey?] frame around that.

    Example: http://kojikis.wordpress.com/2011/08/02/awa-odori/

    My blog is http://alwayswellwithin.com (note I've change the column and photo width to 550)

    Thanks for your help. I appreciate it.

    Warmly,
    Sandra

    The blog I need help with is alwayswellwithin.com.

  2. thesacredpath
    Member

    That was simple. The images in Manifest already have a border, but no padding to set it off from the image. Do the following in the CSS and you should be golden.

    img.size-auto, img.size-large, img.size-full, img.size-medium, img.size-thumbnail, .attachment img, div.wp-caption {
padding: 6px;
}

  3. thesacredpath
    Member

    Oh, one other thing you should probably do is to reduce the "maximum width" setting on the CSS edit page (down below the text area) by 12px. Adding the 6px of padding makes the images wider than the content area. Manifest has no sidebar so it isn't a problem really, but just to keep things "right" you should do that anyway.

  4. alwayswellwithin
    Member

    That seems to perfectly! Beautiful. Glad it was simple. I really appreciate your help.

    I have a little glitch with my header. If I change the width of the theme - as I have - can I still use the autoloader for loading an image?

    The current one isn't working, but it may be because I uploaded it when I didn't have the wrapper width changed in the CSS. Not sure.

    Thanks SO much.

  5. thesacredpath
    Member

    You are welcome.

    No, if you change the width, the header has to be uploaded directly to the media library and then added directly to the CSS. The header uploader will always do the image to the original dimensions.

  6. alwayswellwithin
    Member

    Can you tell me the magic formula for that? I don't see anything obvious (to me) in the original style sheet. Thanks.

  7. thesacredpath
    Member

    Since we added 6px of padding to all sides of the image, then the actual image, with border, is 12px wider. That is how I came up with the 12px number. If that is what you are asking about.

  8. alwayswellwithin
    Member

    Oops, sorry my question wasn't clear. What I meant is what is the CSS for using a header in my media library instead of the auto-loader. Thank you!

  9. thesacredpath
    Member

    Ah, here you go. Make the header image 550px x 160px and put it in where it says URL OF IMAGE in the following.

    #header-image {
background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
}

  10. alwayswellwithin
    Member

    Thanks! I'll try it out. I appreciate your support.

  11. thesacredpath
    Member

    You are welcome.

  12. alwayswellwithin
    Member

    Here I am again! So I tried the CSS code for the header as you suggested above and it didn't work. This is what I used.

    #header-image {
    background:url('http://alwayswell.files.wordpress.com/2011/08/manifest-lotus_flower_breaking_550.jpg') no-repeat scroll 0 0 transparent;
    }

    Now the funny thing is that it didn't show up on the site. Then when I went and used the auto-loader to put back the smaller header (500 x 160) I was using, the larger header (550 x 160) showed up behind it. You could only see its edges, obviously.

    This makes no sense to me...

    Any clue what I've done wrong?

    Thanks for your help.

  13. thesacredpath
    Member

    Hmmm, I should have made an image and put into things to do a full test.

    #header-image collapses when the image put in via the uploader is not there so we'll add height and width declarations. Leave the old image in via the uploader as I've hidden it via CSS.

    #header-image {
background: url("http://alwayswell.files.wordpress.com/2011/08/manifest-lotus_flower_breaking_550.jpg") no-repeat scroll 0 0 transparent;
height: 160px;
width: 550px;
}

#header-image img {
display: none;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags