Oxygen theme – Adding image to category description text

• 

  sustainablesecurity · Member · Feb 3, 2015 at 2:47 pm

  • Copy link
  • Add topic to favorites

  I am using Oxygen theme, and have created several categories of posts. For the purposes of my site, I have listed these categories as ‘Projects’ (listed under the dropdown ‘Projects’).

  When I have created categories in the past, I have simply written a description and this displays at the top of each ‘Project’ page.

  I would like to create a new page in a similar way, but I need to display an image in the space where the description is, as well as text.

  I’ve tried editing the CSS and I managed to get an image to display there, but I could not work out how to introduce a small amount of spacing between the title of the category and the image, so it didn’t look right.

  Any help with this would be really appreciated! I’m new to CSS so sorry if this is very simple.

  Thanks!

  The blog I need help with is sustainablesecurity.org.

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

• 

  designsimply · Member · Feb 13, 2015 at 6:41 am

  • Copy link

  but I could not work out how to introduce a small amount of spacing between the title of the category and the image, so it didn’t look right

  I’m not sure how you added the image before, but here is an example that I think gets the result you’re after:

  .category .taxonomy-description:before {
  	float: left;
  	content: " ";
  	display: block;
  	width: 150px;
  	height: 150px;
  	padding-right: 1em;
  	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150) no-repeat;
  }

  The “.category” part of the CSS selector works to limit the change to category pages. You probably actually want to limit to only one specific category page at a time, so you will probably want to change “.category” to “.category-climate-change” in the example above (or whatever the category name is where you want to add the image). Those are body classes, and you can see them by looking at the “body” tag in the page source.

  The image in the example is a WordPress logo, but you can change out the image by updating the link in the url() function in the example. Don’t forget to update the width and height to match.

  I used http://sustainablesecurity.org/category/climate-change/ for testing (it always helps to include a specific link to the area you’re working on).