Changing header image on category/archive page

• 

  pattipost · Member · Jun 29, 2014 at 11:16 am

  • Copy link
  • Add topic to favorites

  How do I change my header image on a category/archive page?

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

• 

  designsimply · Member · Jun 30, 2014 at 7:14 pm

  • Copy link

  I checked http://postwrites.com/ and I see you are currently using the Pilcrow theme.

  Here is a link to one of the category pages and also one of the archives pages for reference:
  http://postwrites.com/category/portfolio/
  http://postwrites.com/2014/06/

  Both pages have a body class in the HTML named “archive” and we can use that in some CSS to target just those pages. In CSS, you can put a “.” in front of a class name and use it in a selector.
  http://www.htmldog.com/guides/css/intermediate/classid/

  If you are new to CSS and want to try a tutorial, this is a really great one:
  http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

  Since you’ve already setup a header image, you can override it just on archives pages by adding the following to your Appearance > Customize > CSS editor:

  .archive #header #pic a img {
  	display: none;
  }
  
  .archive #header #pic a {
  	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
  	display: block;
  	width: 770px;
  	height: 200px;
  	margin-top: 45px;
  }

  I used a WordPress logo as an example. To use your own image, first upload an image withe the correct dimensions to your media library and copy the URL. Then replace the url() value in the example above with your own image link and update the height value to match the height of your image.

• 

  pattipost · Member · Jul 1, 2014 at 3:38 am

  • Copy link

  Thanks designsimply – I’ll give the tutorial a go :)
  If accomplished, it would mean a paradigm shift for me.
  ~ Patti

• 

  designsimply · Member · Jul 1, 2014 at 4:08 pm

  • Copy link

  Let me know if you like it! I try to find really good CSS resources to recommend and would love to hear if you think that link is a good one.
  http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

  I think it’s cool because you can try stuff out live as you go, which I think is really neat!

• 

  pattipost · Member · Jul 1, 2014 at 4:55 pm

  • Copy link

  I’m afraid I’m out of my depth . . .
  I’m getting someone to do it for me.
  Thank you though :)

• 

  designsimply · Member · Jul 2, 2014 at 11:12 am

  • Copy link

  Cheers, and best of luck!