Category page headers in Twenty Eleven

  • Author
    Posts
  • #969353

    simianreflux
    Member

    Hi,

    I recently posted a question in another forum (support) asking about custom header images for different category pages.

    (https://en.forums.wordpress.com/topic/custom-headers-for-different-categories?replies=8#post-966795)

    The outcome from this post was that as category pages are created on the fly it is not possible to assign custom header images.

    Today I came across this post (https://en.forums.wordpress.com/topic/how-to-remove-the-header-of-a-category-page-and-to-edit-soundcheck-hero-slider?replies=6) which suggests that it’s at least possible to play with the header images for category pages.

    So, at the risk of sounding like a skipping record and wasting everyone’s time (apologies!), is there any way to display a custom header image for different category pages via CSS?

    Thanks so much for your help~

    The blog I need help with is simianreflux.com.

    #969666

    That is a little dependent on the theme used. Some older themes do not have the required selectors to be able to do that. With 2011, the theme you are using, yes it is, but a couple things you should know.

    First off, since the header image will be inserted into the CSS rather than through the theme script files, it will not resize with the browser window as the standard headers do on 2011.

    Secondly, if you are looking to have a different image for each category you have to create targeted CSS for each and every category. If you add a category later, you have to create more CSS for that category.

    This requires a bit of manipulation and I’m on my way out the door so it will be a while before I can give you the code.

    #969685

    simianreflux
    Member

    Thanks so much for your help thesacredpath.

    #969687

    You are welcome.

    #969715

    simianreflux
    Member

    Hi thesacredpath,

    apologies for being forward and asking again, but any update on the CSS code for the custom header images?

    Thanks~

    #969731

    This should do the trick:

    .category-danger-zone #branding a img {
    	display: none;
    }
    .category-danger-zone #branding > a {
    	background: url(YOUR_IMAGE_URL);
    	display: block;
    	width: 1000px;
    	height: 288px;
    	border: 1px solid red;
    }

    Replace YOUR_IMAGE_URL with the URL of an image you have uploaded to your media library.

    To change out the header for a category page other than the “Danger Zone” category, change the “.category-danger-zone” parts of the selectors to “.category-YOUR-CATEGORY-NAME”.

    #969735

    simianreflux
    Member

    designsimply, the code worked a treat.

    Thanks a lot~~

The topic ‘Category page headers in Twenty Eleven’ is closed to new replies.