How to Style an HTML Unordered List in a WordPress Sidebar 3


HTML Bullet  Lists in SidebarSome WordPress themes treat lists in the sidebar differently.  I really like themes built on the Genesis framework. It just so happens that the particular theme I am using for this site displays sidebar elements without bullets by default . This can look effective if your list items do not wrap. In the case of this blog, however, the titles of blog posts invariably wrap onto the next line.

As you can see from the screenshot below, the display is less than impressive mainly because the titles are only separated by a very faint line.

One solution would be to make these lines a little darker.

Another solution, and the one that I prefer, would be to add bullets to this particular widget or to the entire WordPress sidebar on my site.

No Bullets in Sidebar

Finding the HTML List Code Used for WordPress Sidebar

It is a good idea to look for the code that is responsible for ‘turning off’ the list bullets.

So, to see how your WordPress sidebar has been styled for HTML lists, you can follow these steps:

  1. From your WordPress Dashboard, click on Appearance-Editor .
  2. Make sure that the style sheet is the active file in your editor.
  3. Do a search for any code that is related to your sidebar or simply search for code similar to this:
     
    list-style-type: none;

You could edit this line of code so that the list style is no longer ‘none’ but, it is better to keep your own CSS additions separate from the original child theme.

Some themes provide an option to add your own styles under Appearance-Customize.

Other themes provide an additional style sheet just for your own style entries. Look in the right hand panel of Appearance-Editor.

If no such options exist, then I usually add my styles to the bottom of the style sheet provided, notating it with my initials in a comment:

/* GG Styles*/

 

Adding Bullets to a WordPress Sidebar

If I add a style at the end of the style sheet to make list bullets visible, then it will override any previous style that turned them off.

In this case, we are not wanting to affect list styles in the rest of the site. just the list items that appear in the sidebar. As it happens, all other lists are acting normally by default anyway.

  • So, you first need to find the name of the div that is used for your sidebar. You could look in your style sheet for a word that contains something similar to sidebar, for example:
     
       #sidebar
     
  • When you find it, note how this div is named.
  • At the bottom of your style sheet, underneath your initials, simple add the following style for the relevant div:
     
       #sidebar ul li {
              list-style-type: disc; margin-left: 10px;
        }

Empty your cache (if you are using a cache plugin of some kind) and then check how your sidebar items look.

The Result for Website Tips 4U

Here is the end result of simply adding 1 line of code to the bottom of my style sheet.

 Sidebar Bullets

I think the post titles are now easier to read and appear distinct from each other.

Removing Bullets from HTML Lists

If you have a need instead to remove bullets from some HTML lists,  then a variation of this code is all that is needed:

#sidebar ul li {
    list-style-type: none;
}

 
Do you have any other issues related to styling HTML  lists?

Teaser image by Idea go, FreeDigitalImages.net

~~~~~~~~~~~~~~~~~

Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

3 thoughts on “How to Style an HTML Unordered List in a WordPress Sidebar