Custom ul list-style

Difficulty level: intermediate to advanced.

Example 1: The basics

For this example we will create a unordered list(ul) that will show a disc next to a list item(li) only in a particular area, and will hide them in the rest of the website. You can then decide which lists you want to style in your website.

Note:
Make sure you do this in a development website, and in any case have a backup of the files you are going to work on.

We will take a div and name it "content". The name of your div may be different. In it we will place the ul list to style:

In your stylesheet you would use:

You should now see your list with discs in the area that you chose, and not in the rest of the website.

Example 2: Let's have some fun with lists styles

To turn off all list-style in a theme use:

ul {list-style:none}

instead of

ul {list-style-type:none}

You can do do something like this:

ul {list-style:disc inside}

instead of

ul {list-style-type:disc}

So your final stylesheet would look like:

Note: If you have more than one stylesheet in your theme you will have to make sure there are no list-styles overriding your css, otherwise it still might not show.