Indenting child categories

  • Resolved bobbem

    (@bobbem)


    18 years, 5 months ago

    I’ve looked through the Codex pages dealing with child categories (esp. Styling with CSS), but still cannot get my site to diplay correctly. Any help will be greatly appreciated!

    I would like my subcategories to be indented when displayed in the sidebar. I would like them to look something like this:

    Theory
    __Political Theory
    __Sociology
    __etc.

    My categories function call looks like this:

    <?php wp_list_cats(‘sort_column=name&hide_empty=0&hierarchical=1&optioncount=1’);?>

    In the style.css I’ve tried all of the following, to no avail:

    #subcontent ul.categories ul li a {margin-left: 20px};
    #subcontent ul.children li a {margin-left: 20px};
    #subcontent ul ul li a {margin-left: 20px};
    #subcontent ul ul li {margin-left: 20px};
    .children li a {margin-left: 20px};
    and a bunch of other combinations.

    Thanks again for any help!

Viewing 2 replies - 1 through 2 (of 2 total)

  • I would try the following:

    1. In your sidebar.php file change <ul class='children'> to <ul class="children">. I actually don’t think this will do anything, but just in case.

    2. Try these styles…

    In your layout.css file, where it reads:

    #subcontent ul.categories li ul ul {margin:0 0 0 16px;}

    Change to:

    #subcontent ul.categories li ul li {margin:0 0 0 16px;}

    If you’re still having problems then I would take all of your padding and margin styles out of the ul and li elements and put them in their respective a elements.

    So…


    #subcontent ul li {
    margin:2px 0 2px 18px;
    padding-bottom:2px;
    border-bottom:1px solid;
    }
    #subcontent li a {
    display:block;
    padding:1px 0;
    height:1%; /* IE WIN */
    }

    Becomes…

    #subcontent ul li {
    border-bottom:1px solid;
    }
    #subcontent li a {
    display:block;
    padding:1px 0 2px 0;
    margin:2px 0 2px 18px;
    height:1%; /* IE WIN */
    }

    Let me know if this works.

    Thread Starter bobbem

    (@bobbem)

    Davedotcom,

    This worked:

    Change to:

    #subcontent ul.categories li ul li {margin:0 0 0 16px;}

    Thanks so much! Pheew…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Indenting child categories’ is closed to new replies.