Manifest Theme, Image Frames

  • Author
    Posts
  • #673321

    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.

    #673442

    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;
    }
    #673446

    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.

    #673499

    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.

    #673527

    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.

    #673628

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

    #673630

    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.

    #673790

    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!

    #673796

    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;
    }
    #673891

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

    #673892

    You are welcome.

    #673955

    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.

    #673956

    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;
    }

The topic ‘Manifest Theme, Image Frames’ is closed to new replies.