Categories with different icons?

• 

  yourboro · Member · Nov 20, 2009 at 4:25 pm

  • Copy link
  • Add topic to favorites

  http://yourboro.wordpress.com/

  The categories on the left hand side of the page, i got them all to have an icon beside them, is there a way to make each of them different? (i.e. a football for sports) or is there no way to do this?

  tldr: how do i make different graphics for a bulleted list for categories

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

• 

  devblog · Member · Nov 20, 2009 at 5:19 pm

  • Copy link

  You have 3 options:

  Option A:
  Create manually a categories list in a text widget, something like this:

  <ul>
  	<li><a href="CAT-URL1" title="CAT-NAME1"><img src="IMG-SRC1" alt="CAT-NAME1" width="X" height"X" />CATEGORY NAME 1</a></li>
  	<li><a href="CAT-URL2" title="CAT-NAME2"><img src="IMG-SRC2" alt="CAT-NAME2" width="X" height"X" />CATEGORY NAME 2 </a></li>
  	<li><a href="CAT-URL3" title="CAT-NAME3"><img src="IMG-SRC3" alt="CAT-NAME3" width="X" height"X" />CATEGORY NAME 3</a></li>
  </ul>

  Then, modify your CSS to something like this so it won’t display bullets of any kind:

  .sidebar_class_selector {
  	list-style: none;
  }

  Option B:
  Get all categories distinctive classes and defined their selectors accordingly.

  .cat-item-8091, .cat-item-27809729, .cat-item-15270234 {
  	[COMMON PROPERTIES]
  }
  
  .cat-item-8091 {background: transparent url(URL-TO-ICON) 0 0 no-repeat;}
  
  .cat-item-27809729 {background: transparent url(URL-TO-ICON) 0 0 no-repeat;}
  
  .cat-item-15270234 {background: transparent url(URL-TO-ICON) 0 0 no-repeat;}

  In case you don’t know, if you notice the first line, I am defining all common properties together; that’s more efficient than repeating them in every selector definition. Since only the background property is different in all of them, that’s the only one you define separately.

  Option C:
  This is kind of a combination of both options A and B

  Create manually a categories list in a text widget:

  <ul>
  	<li class="football"><a href="CAT-URL1" title="CAT-NAME1">CATEGORY NAME 1</a></li>
  	<li class="cooking"><a href="CAT-URL2" title="CAT-NAME2">CATEGORY NAME 2 </a></li>
  	<li class="photography"><a href="CAT-URL3" title="CAT-NAME3">CATEGORY NAME 3</a></li>
  </ul>

  Then modify your CSS accordingly:

  .sidebar_class_selector {list-style: none;}
  }
  
  .football, .cooking, .photography {
  	[COMMON PROPERTIES]
  }
  
  .football {background: transparent url(URL-TO-ICON) 0 0 no-repeat;}
  
  .cooking {background: transparent url(URL-TO-ICON) 0 0 no-repeat;}
  
  .photography {background: transparent url(URL-TO-ICON) 0 0 no-repeat;}

  These are the options I can think of. The less “tedious” of all would be Option B.

• 

  yourboro · Member · Nov 22, 2009 at 1:25 am

  • Copy link

  wow. this is incredible! Thank you so much!