How do I style Categories list in sidebar differently?

Community Forums Forums General Discussion How do I style Categories list in sidebar differently?

This topic is: not resolved

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  djw2 2 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #18519


    I am developing a site right now for a client with the list of categories in the left hand sidebar. The categories also have subcategories. She would like the parent categories to be bolded and the subcategories to not be bold.

    How can I do this?

    I just learned of the Genesis Simple Sidebars plugin a minute ago, reading someone else’s post. I’ve read the description, but still don’t know if it will help me with this problem.




    do you have a link to the site you’re working on?



    Yes, here is a link to a page where I have posted a sample of what I’m asking about. In the sidebar is a list of categories. The names of States are subcategories of the category ‘United States’, but I need the Parent categories ‘United States’ and ‘Continents’ bolded while the child categories remain unbolded.

    The only css I could find that related to categories is here below:

    /* Post Meta
    ———————————————————— */

    .post-meta {
    background: url(images/dashed-line.gif) repeat-x top;
    clear: both;
    color: #595959;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    text-transform: uppercase;
    padding: 15px 0 0;
    margin: 10px 0 0;

    .post-meta .categories {
    background: url(images/icon-categories.png) no-repeat 3px 0px;
    display: block;
    margin: 0 0 10px;
    padding: 0 0 0 40px;

    .post-meta .tags {
    background: url(images/icon-tags.png) no-repeat 1px 3px;
    display: block;
    padding: 0 0 0 40px;

    .post-meta .tags a {
    background: #efefef;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 10px;
    padding: 4px 7px;

    .post-meta .tags a:hover {
    background: #f5f5f5;

    Thank you for your help.



    I’m still hoping someone can help me out with this. I just don’t know css enough yet to understand how to make some category names bold and others not.

    Any help is really appreciated.




    I’ve continued to hunt for a solution to this problem and what I have found thus far is this:

    In the menu panel I selected ‘CSS classes’ in the Screen Options dropdown menu. For each PARENT in the Categories menu I gave it a name. In my example above (on a page with the categories menu in the sidebar – not the homepage), the Parent is ‘Continents’ and ‘United States’.

    I gave CSS classes ‘continent-parent’ and ‘united-states-parent’.

    In the stylesheet I added;

    .continents-parent {
    font-weight: bold;

    .united-states-parent {
    text-decoration: bold;


    Unfortunately this bolds everything in the list, not just the parent category.

    It would be really helpful if someone could help me figure out this last detail, so that only the Parent name in the category list is bold.


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.