Category page headers in Twenty Eleven

• 

  simianreflux · Member · Aug 6, 2012 at 10:41 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 6, 2012 at 8:58 pm

  • Copy link

  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.

• 

  simianreflux · Member · Aug 7, 2012 at 2:35 pm

  • Copy link

  Thanks so much for your help thesacredpath.

• 

  thesacredpath · Member · Aug 7, 2012 at 4:51 pm

  • Copy link

  You are welcome.

• 

  simianreflux · Member · Aug 13, 2012 at 9:54 pm

  • Copy link

  Hi thesacredpath,

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

  Thanks~

• 

  designsimply · Member · Aug 29, 2012 at 3:22 pm

  • Copy link

  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”.

• 

  simianreflux · Member · Sep 2, 2012 at 9:39 pm

  • Copy link

  designsimply, the code worked a treat.

  Thanks a lot~~