bold the main category, but unbold the subcategory?

[abcdefgary]

hi, my pligg website uses the following category order:

Main Category
- subcategory
- subcategory

I played around with the categories template but had no clue how to make it so that the main category is bolded, while the subcategories are not. for example:

Main Category
- subcategory
- subcategory

is there any way to do this? I'd assume I can put a style tag for the main category, but I tried that and it seems that all of them apply the style, as opposed to only the main category.

thanks

[daone]

nice to see, im not alone. also waiting for howto suggestions.

[abcdefgary]

well, I did look around myself, and this isn't really possible because the categories are looped by codes (if you get what i mean) so, in fact, by putting <ul> codes around the categories makes them indent and each category will be surrounded by its own <ul> code.

so if I put <b> around the category, all of them will be bolded.

so this isn't an easy task (through my eyes) and requires a few extra coding to make it work.

[daone]

abcdefgary: any progress? ;p

seems to no one is interesting in, strange, because if you have many categories in list(with subcategories) looks ugly ;/

[abcdefgary]

mm, no. i have no idea how to do this. it seems to me that there is quite a lot of modifying of codes involved. and im only a beginner.

[wewonk]

Can't you just look at the parent category and apply different CSS for different levels?

[abcdefgary]

I believe it doesn't work like that... well, I tried, and it doesn't work. the categories all loop a before and after code.

[daone]

nobody could support us? devs, any hints how to bold main category? ) ".)

[daone]

..up..
im trying,and trying with no result,

<code noob

maybe someone support us..

[beatniak]

Originally Posted by abcdefgary

well, I did look around myself, and this isn't really possible because the categories are looped by codes (if you get what i mean) so, in fact, by putting <ul> codes around the categories makes them indent and each category will be surrounded by its own <ul> code.

so if I put <b> around the category, all of them will be bolded.

Auch!!! Never use the <b> tag, but make things bold with your CSS.

To fix this problem, make sure the HTML in the tpl's look something like this:

<div id="steef_solution">
<ul>
  <li>Main Cat</li>
    <ul>
      <li>Secondary Cat</li>
      <li>Secondary Cat</li>
    </ul>
</ul>
</div>

After that, just put something like this in your CSS:

  #steef_solution ul li {font-weight:bold;color:red;}
  #steef_solution li li {font-weight:normal;color:blue;}

Result is (tested and works):

- Main Cat

• Secondary Cat
• Secondary Cat

To get rid of the bullets, just add "list-style:none;" (without the quotes) to the corresponding line in your CSS. Making you own buttons is nicer anyways. To create a nicer button, use something like:

#steef_solution ul li a {
  display:block;line-height:2; 
  font:bold 12px arial;text-decoration:none; //nice font, no underline
  padding:5px 0 5px 25px;  //create some space for the bullet
  background:#fff url("../images/my_nice_looking_button.gif") no-repeat 0px 8px
}
#steef_solution ul li a:hover {
  color:#c00; //some other font color when hovering
  background:#ccc url("../images/my_nice_looking_button.gif") no-repeat 0px 8px //some other bg color when hovering
}