WordPress.org

1. ultrus
   Member
   Posted 1 year 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 1 year ago #

   ul too many. :(

3. Lari
   Member
   Posted 1 year ago #

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

4. MoTStudio
   Member
   Posted 1 year 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 1 year 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.