Preference offers list styles (bullet lists) to give you more than a simple dot. To see Preference list styles in action, you can check out the live demo for this theme here:
How to Style the Ordered Lists
All you will need to do is apply a class to your <ol> when making lists, with the exception to the “Default” style which will just be a numbered list.
<ol> This is the default list, no class needed.
<ol class="decimal-leading-zero"> This will give you a numbered list starting with zero (0) until it reached 10 or more.
<ol class="upper-alpha"> This will give you a list with Alphabetical letters in uppercase.
<ol class="lower-alpha"> This will give you a list with Alphabetical letters in lowercase.
How to Style the Unordered Lists
This is also done by adding a class to your <ul> when making lists, with the exception to the “Default” style which will be dots.
<ul> This will be your default list style, no class needed.
<ul class="square"> This will give you a list style of small blocks (squares).
How to Style the Image List Styles
These are list styles that are unordered and uses an image (actually an image sprite) to achieve the various lists that you seen on the live demo site.
<ul class="list-arrow1"> This will give you the arrow style 1
<ul class="list-arrow2"> This will give you the arrow style 1
<ul class="list-arrow3"> This will give you the arrow style 1
<ul class="list-arrow4"> This will give you the arrow style 1
<ul class="list-circles"> This will give you the arrow style 1
<ul class="list-starburst"> This will give you the arrow style 1
<ul class="list-checkmark"> This will give you the arrow style 1
Adding Colour for Image Lists
You will be adding one additional class to your <ul> lists like this example for the “list arrow 1 with the amber colour” style:
<ul class=”list-arrow1 list-amber“>
In addition to the default colour, your other available colours are:
- list-amber
- list-purple
- list-red
- list-grey