WordPress.com

1. simianreflux
   Member
   Aug 6, 2012, 10:41 AM

   Hi,

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

   (http://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 (http://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.

2. thesacredpath
   Staff
   Aug 6, 2012, 8:58 PM

   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.

3. simianreflux
   Member
   Aug 7, 2012, 2:35 PM

   Thanks so much for your help thesacredpath.

4. thesacredpath
   Staff
   Aug 7, 2012, 4:51 PM

   You are welcome.

5. simianreflux
   Member
   Aug 13, 2012, 9:54 PM

   Hi thesacredpath,

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

   Thanks~

6. designsimply
   Staff
   Aug 29, 2012, 3:22 PM

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

7. simianreflux
   Member
   Sep 2, 2012, 9:39 PM

   designsimply, the code worked a treat.

   Thanks a lot~~

Topic Closed

This topic has been closed to new replies.