Need help? Check out our Support site, then


Add Featured Image header to Fresh & Clean Theme?

  1. Hi all,

    I've been looking for a theme that has all the things I'd like to have, but none seem to have exactly what I'm looking for. I do think the Fresh & Clean comes closest to what I want. There's only one thing really missing and that's a Featured image header (so that I can change the headers on pages and posts when I want to) like Twenty-Ten has for example. Is there a way I can add this to the Fresh & Clean theme?

    Thanks for the help!

    The blog I need help with is lotroadventures.wordpress.com.

  2. There are built in custom featured image headers for Fresh & Clean like there are for Twenty Ten, but you can change out the header images for specific pages with CSS that targets the page IDs.

  3. If I understand you correctly, for posts there is an option for featured image headers (as opposed to featured images for the sticky post slider), but for the pages I need to change things in the CSS. Is that correct?

  4. I'm asking because the showcase page of the theme doesn't say anything about featured image headers, only about custom headers, while I'm looking for a bit more customization...

  5. How do I activate the featured image headers for Fresh & Clean? I've activated a test header, but it will only appear in the sticky post slider (banner = 920 * 116) but the header does not appear in the header at the post. (instead of the title of my site).....

  6. If I understand you correctly, for posts there is an option for featured image headers (as opposed to featured images for the sticky post slider), but for the pages I need to change things in the CSS. Is that correct?

    There is not an option for featured image headers in posts or pages built in to the Fresh & Clean theme. Since there is not a built in option for that, you can use CSS instead.

    How do I activate the featured image headers for Fresh & Clean? I've activated a test header, but it will only appear in the sticky post slider (banner = 920 * 116) but the header does not appear in the header at the post. (instead of the title of my site).....

    Fresh & Clean does not have featured image headers. It's not part of the theme design.

    Explanations and instructions about the features that each theme does have are included in the theme showcase. Here is the Fresh & Clean theme showcase page for reference:
    http://theme.wordpress.com/themes/fresh-and-clean/

    To change out a header image for a post in the Fresh & Clean theme, first you need to find the post ID for the post in question. You can find it by looking at the body tag in the page source (usually under View → Source in your browser) or by editing the page and looking for the post number in the URL. In the case of http://lotroadventures.wordpress.com/2012/10/02/a-little-test-for-a-new-layout/ the post ID is 923, and the body tag for that post has a class of "postid-923". Using that, you can change out the header image using a rule like this that will only affect the one post:

    .postid-923 #branding {
    	background: url(http://lotroadventures.files.wordpress.com/2012/10/testbanner.png) 0 0 no-repeat;
    }
  7. Ah, I was confused by your first sentence:

    There are built in custom featured image headers for Fresh & Clean like there are for Twenty Ten

    I guess "no" fell off :)

    Okay, find post id and add the code you gave to the css.
    Just did it and it works great! Thanks for the tip!
    So, do I do the same for pages? Just use pageid instead of postid, or do I need something else entirely?

    Thanks again for the help!

  8. Oh, I noticed the pages have "post" in the editing link, so I guess it's the post id too for pages?
    Thanks again for all the help!

  9. Um, oops. You're right! I meant to say, "there are no built in custom featured image headers for Fresh & Clean like there are for Twenty Ten." That was a dumb typo. Sorry about that!

    Looking at the body tag will probably be the best thing. For example, here is the body HTML tag for your contact page:

    <body class="page page-id-940 page-template-default logged-in admin-bar typekit-enabled highlander-enabled highlander-light customize-support" data-twttr-rendered="true">

    So, for that page, you would use this CSS selector:

    .page-id-940 #branding

  10. You're forgiven :grin:
    Okay, Good to know there's a page-id too. The page you took, is exactly one for which I want to make an applicable banner :) Now that I know what to look for, it will be fun to do. Okay, it's a work-around, but at least.. there's a work-around :)
    Next up, see what else I can adjust so that it's more ... "my theme". I like the features from Fresh & Clean, so it's fun to work with!

Topic Closed

This topic has been closed to new replies.

About this Topic