Customizing 'Category' Pages

• 

  thesmogmachine · Member · Feb 9, 2015 at 1:41 am

  • Copy link
  • Add topic to favorites

  Hi there,

  On my site (www.thesmogmachine.com) I’ve separated different author pages by categories. So when someone contributes an article to the blog, they click the category (which is their name) and the posts are organized that way.

  Now – I’ve been trying to add an image at the top of each category page. SO when a user goes to the page, they see an image at the top, and then the different posts that have been put in the category below.

  Does anyone know how to accomplish this through CSS? Or maybe have any tips or tricks to help me get started?

  Thank you!

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

• 

  staff-happychia · Staff · Feb 9, 2015 at 8:28 am

  • Copy link

  You can use the following CSS.

  Please upload the images you want to set as category page featured images into your Media Library and use their urls in place of mine in each block below.

  Please note you can adjust the width by specifying w=400px at the end of the url.

  /* B&TH */
  body.category-60373 h1.page-title:after {
      display:block;
      content: url("https://chaittestpress.files.wordpress.com/2015/02/6-matthew-wiebe.jpg?w=600px");
  }
  
  /* DCG */
  body.category-2781923 h1.page-title:after {
      display:block;
      content: url("https://chaittestpress.files.wordpress.com/2015/02/6-matthew-wiebe.jpg?w=600px");
  }
  
  /* CMT */
  body.category-274928 h1.page-title:after {
      display:block;
      content: url("https://chaittestpress.files.wordpress.com/2015/02/6-matthew-wiebe.jpg?w=600px");
  }
  
  /* Guest Artist */
  body.category-202125 h1.page-title:after {
      display:block;
      content: url("https://chaittestpress.files.wordpress.com/2015/02/6-matthew-wiebe.jpg?w=600px");
  }

  Please feel free to let me know if something is unclear.