WordPress.org

Ready to get started?Download WordPress

Forums

How do I style a category list with child cats, each level styled differently (5 posts)

  1. ultrus
    Member
    Posted 5 years ago #

    Hello,
    The website I'm working on uses custom bulletted list, as seen at: http://christopherstevens.cc/fun/bulletsFromHell.html

    I need to apply a revised version of this set of styles to a category list in the WordPress sidebar. The list in the above link looks like this:

    <div id="list">
      <ul>
        <li>Level One</li>
        <li>Level One</li>
        <li>Level One</li>
        <li class="nestedList">
          <ul>
            <li>Level Two</li>
            <li>Level Two</li>
            <li>Level Two</li>
            <li class="nestedList">
              <ul>
                <li>Level Three</li>
                <li>Level Three</li>
                <li>Level Three</li>
                <li class="nestedList">
                  <ul>
                    <li>Level Four</li>
                    <li>Level Four</li>
                    <li>Level Four</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    More specifically, can I add a class of "nestedList" to parent categories that have children, or is there a different class name available that I can use? Is there another solution that you would suggest instead? Can I set something in wp_list_categories() ?

    Thank you much for the feedback in advance! :)

  2. sososohu
    Member
    Posted 5 years ago #

    ul too many. :(

  3. Lari
    Member
    Posted 5 years ago #

    Why do you need the class? Can’t you use #list ul ul … in your css?

  4. MoTStudio
    Member
    Posted 5 years ago #

    I think they need the separate nested lists class to style the appearance of the nested lists differently.

    If you style ul with:

    ul {
         list-style-type: disc;
    }

    Then you're going to get a list full of disc markers marking the beginning of each individual listed item.

    To get different looking markers, you're going to need to style each child list/nested list to display differently.

  5. JonMeek
    Member
    Posted 5 years ago #

    You don't really need the nestedList class. You can accomplish what you want with just one class. Then you just add each new ul in the CSS file like this:

    #list ul {
    	list-style:none;
    	font-weight:bold;
    }
    #list ul ul {
    	color:#099;
    	font-weight: normal;
    }
    #list ul ul ul {
    	color:#909;
    	font-weight:normal;
    }
    #list ul ul ul ul {
    	color:#990;
    	font-weight:normal;
    }

    I have posted an example page: nestedlists.html

    Hope that helps.

Topic Closed

This topic has been closed to new replies.

About this Topic