I tried out a few methods of formatting my lists (including creating numerous ol, ul and li classes), but I found that by far the best way to set them up was to use 'complex selectors'. Despite the name, using this made setting up my lists a whole lot easier.
Setting up the styles
For my numbered lists, the first list level has the numbering 1,2,3 and the second level has a,b,c.
To set this up I use the styles:
Code: Select all
ol
{
list-style-type: decimal;
}
ol ol
{
list-style-type: lower-alpha;
}
The ol ol style is a complex selector. It sets the formatting to use for a list within a list, in this case a,b,c numbering.
I just use two levels, but say you wanted to define a style for a third level, you'd use ol ol ol.
To add complex selectors in your stylesheet, you'll need to open the CSS file in Flare's text editor and add them there (you can leave the bit between the brackets empty). Once they're in the stylesheet, you can edit the styles in the normal stylesheet editor view - they'll be listed in the (Complex selectors) section.
You can use the same method for bullet lists (ul), e.g.:
Code: Select all
ul
{
list-style-type: circle;
}
ul ul
{
list-style-type: square;
}
I also use a complex selector to define the style for a second level bullet list inside a numbered list, e.g.:
Code: Select all
ol ul
{
list-style-type: square;
}
Working with lists in the editor
After setting up the list styles, setting up lists in your topics is fairly easy.
- To create a list, click on the List icon.
- To move an item in the list to a different level, just click on the Indent and Outdent icons.
Using paragraphs in lists (for items without numbers/bullets)
If you want a line in the list that doesn't have a number/bullet, you can just use a p tag in the list (without a li tag).
To do this:
1) Right-click the li tag and select Make Paragraph item(s).
2) Press Enter to get a new paragraph, it'll be grouped with the paragraph above it. (If you want it to be separate, right-click the new p tag and select Move Left).