Categories with own Header

• 

  thearcticchiller · Member · Sep 9, 2013 at 7:44 pm

  • Copy link
  • Add topic to favorites

  Hi there!

  I just moved from overblog to wordpress and am impressed by the professionalism here. Now I am doing my first steps with CSS and need some help. I would like to have a different header for each category. I found this thread, https://en.forums.wordpress.com/topic/category-page-headers-in-twenty-eleven?replies=6#post-991352, where I found the following code:

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

  I tried to amend the code for my blog (which obviously doesn’t work):

  .category-flyout-series #masthead a img {
  display: none;
  }
  .category-flyout-series #masthead > a {
  background: url(“http://myclimbrate.files.wordpress.com/2013/09/spain-1440-500.jpg”) repeat scroll 0 0 transparent;
  border: medium none;
  display: block;
  height: 500px;
  width: 1440px;
  }

  What did I do wrong? I only need to change the picture, the text in it is fine. Thank you for your support! :)

  Cheers,
  Florian

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Sep 10, 2013 at 2:02 am

  • Copy link

  Each theme is designed in a different way, and uses different selectors, so you cannot use a code that was designed for a different theme. Try this – just this:

  .category-flyout-series #masthead {
  background-image: url("http://myclimbrate.files.wordpress.com/2013/09/spain-1440-500.jpg");
  }

• 

  thearcticchiller · Member · Sep 10, 2013 at 10:27 am

  • Copy link

  Oh, that’s a bit more simple than I thought! :) Thank you so much, justpi!

• 

  justpi · Member · Sep 10, 2013 at 12:54 pm

  • Copy link

  You’re welcome.
  The code you tried to adapt and adopt was complicated because on that theme the header image is a link to the homepage, so you have to remove the regular header image and create a substitute that works the same way. On Book Lite the header image isn’t a home link, so you just tell the browser to display the image you specify instead of the regular one.