Styling You lists

December 24, 2013|

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:

List Styles

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.
default-ordering

<ol class="decimal-leading-zero"> This will give you a numbered list starting with zero (0) until it reached 10 or more.
leading-zero

<ol class="upper-alpha"> This will give you a list with Alphabetical letters in uppercase.
upper-alpha

<ol class="lower-alpha"> This will give you a list with Alphabetical letters in lowercase.
lower-alpha

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.
default

<ul class="square"> This will give you a list style of small blocks (squares).
square

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
arrow1

<ul class="list-arrow2"> This will give you the arrow style 1
arrow2

<ul class="list-arrow3"> This will give you the arrow style 1
arrow3

<ul class="list-arrow4"> This will give you the arrow style 1
arrow4

<ul class="list-circles"> This will give you the arrow style 1
circles

<ul class="list-starburst"> This will give you the arrow style 1
starburst

<ul class="list-checkmark"> This will give you the arrow style 1
checkmark

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“>

arrow-amber

In addition to the default colour, your other available colours are:

  • list-amber
  • list-purple
  • list-red
  • list-grey

 

 

Categories: Setup Tutorials for Preference

Leave a Reply

Black Friday Offer - 50% Off Discount on ALL PRO THEMES AND MEMBERSHIPS Use discount code BFCM2019