Category Archive Header Pic

• 

  kolfanblog · Member · Apr 17, 2015 at 12:55 pm

  • Copy link
  • Add topic to favorites

  Hi there!

  I would love to have a different header pic for each of my category archive pages – like e.g. a different header pic on my news category archive page and a different one on my tour category archive page.

  I do have the CSS upgrade and have been using it already for other changes but still learning.

  I did some research on here and on the web but nothing work. Could it be that my theme doesnt support that? I am using the VISUAL theme. I really like it so would like to keep it but the different header pics are really something I want.

  Thanks in advance!

  Cheers,
  Daniela

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

• 

  thesacredpath · Member · Apr 17, 2015 at 3:52 pm

  • Copy link

  Hi Daniela, we can certainly do this. In the opening body HTML tag for each page or post on your site, there is a long list of CSS classes defined that we can use to make changes to specific pages. In the case of your News page, if you view the source on that page and look in the opening body tag, you will find the following classes, and more
  archive category category-news category-103...
  archive is an overall page type class category, and would allow us to make blanket changes to all category, tag and archive pages.
  category would allow us to make blanket changes to all category pages.
  category-news or category-103 will allow us to make changes to only the News category page.

  So, to change the header image for the News category, we can precede the needed CSS selectors with .category-news to have them applied only to News.

  .category-news .site-header img {
      visibility: hidden;
  }
  .category-news .site-header .section a {
      background: url('URL_OF_IMAGE') no-repeat scroll center top transparent;
      background-size: 94.5% auto;
      max-height: 527px;
  }

  Replace URL_OF_IMAGE between the quote marks with the URL of your uploaded News category image. It should be the same size as the header image suggested size.

  The first rule above hides the original header image and the second sets your new image and makes some adjustments to sizing and such so that it is substantially similar to the layout on other pages.

  You can use the above as a guide for your other categories pages, and after you get one done, if there are any adjustments that need to be made, just let me know.

• 

  kolfanblog · Member · Apr 17, 2015 at 5:00 pm

  • Copy link

  Hi!

  We are getting close :D. I used the following code:

  .category-news .site-header .section a {
  background: url(‘https://kolfanblog.files.wordpress.com/2015/04/welcome5.jpg’) no-repeat scroll center top transparent;
  background-size: 94.5% auto;
  max-height: 527px;
  }

  And now this happended: http://kolfanblog.com/category/news/

  Is it possible to switch the pic out of the nav bar and in the place where usually the header pic is located?

  Thanks so much in advance!

  Cheers,
  D

• 

  kolfanblog · Member · Apr 17, 2015 at 5:01 pm

  • Copy link

  Maybe replace the header pic somehow instead of hide?

• 

  thesacredpath · Member · Apr 17, 2015 at 6:12 pm

  • Copy link

  Oops, sorry, I pasted old code from my clipboard. :(

  Use this instead (taking the “a” off the end of the CSS selector is all that is needed).

  .category-news .site-header .section {
      background: url("https://kolfanblog.files.wordpress.com/2015/04/welcome5.jpg") no-repeat scroll center top / 94.5% auto transparent;
      max-height: 527px;
  }

• 

  kolfanblog · Member · Apr 17, 2015 at 6:46 pm

  • Copy link

  U are genius! Thanks sooo much! Wohooo! Looks just like I wanted it to look!

  Thumbs up!
  D

• 

  kolfanblog · Member · Apr 17, 2015 at 6:52 pm

  • Copy link

  One last question – can I get the new header pics a little further down – so that there is background visible above and after the pic – like in the header?

• 

  thesacredpath · Member · Apr 17, 2015 at 7:45 pm

  • Copy link

  Absolutely, where it says “top” in the background declaration, change that to something like 30px.

• 

  kolfanblog · Member · Apr 17, 2015 at 7:58 pm

  • Copy link

  It works awesomly! Thanks you so much for your help and time!

  Really happy with the result!

  Cheers,
  D!

• 

  thesacredpath · Member · Apr 17, 2015 at 8:45 pm

  • Copy link

  Super, and you are welcome.