CSSLists

Styling Lists with CSS

By August 27, 2012August 5th, 2016No Comments

When presenting lists of things, WordPress uses standard XHTML elements:

  • <ol> for an Ordered List (where the order of items is important, so items are numbered)
  • <ul> for an Unordered List (normally shown as items with bullets)
  • <li> for each item in a list, ordered or unordered.

By default, most lists (and some list items) in WordPress are identified by id or class attributes, making styling lists easy. With fairly simple changes to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting, change the bullet or numbering style, remove the bullets altogether, or any combination of these.

Nested Lists Layout

Different Themes format lists in different ways. The most common lists users often want to modify in WordPress are the sidebar menu lists. Since many sidebars feature nested lists, let’s look at those in more depth.

Begin by examining the style.css file found within the Theme’s folder you are using. Most WordPress Themes label their sidebar menu section with the words sidebar, menu, or a combination of both. So, look for the sidebar Template file, typically calledsidebar.php. This is a sample sidebar.php layout; your version may be different, but the concept will be the same.

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li>
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li>
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li>
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

When you are working with nested lists and you want an individual style for each list, you have to recreate the “nest” in the stylesheet (style.css).

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}
ul 
The first style (#sidebar ul) sets the look for the overall list. It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.
li 
The #sidebar li assigns a style to the actual list item. Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.
ul li 
The #sidebar ul li determines the style of the first nested list. Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific CSS ID. In the above example, after the#search section, the first nested list is #pagenav. If you use Pages this is where the list of Pages would be generated. SincePages work outside of The WordPress Loop, and often highlight specific information like “About Us”, “Contact”, and “Site Map”, you may want to design the Pages style differently than the rest of your lists by putting the specific information about the look of the Pages in the #pagenav.
ul ul li 
The #sidebar ul ul li applies style to the links within the #sidebar ul ul to help customize the look of this list. Again, if you have customized the #pagenav list, it will be different from the rest of your nested list items.
    • ul ul ul li 
      The #sidebar ul ul ul li is the style for the sub-sub-list. If you have a list of categories with subcategories, the categorytitle will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below. Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:
      • Category Title
        • Category One
        • Category Two
          • Sub-Category One
          • Sub-Category Two
        • Category Three

Source: http://codex.wordpress.org/Styling_Lists_with_CSS