If your digital workplace isn't largely composed of lists, I'll eat my hat. Lists keep us organized, especially when it comes to procedures and policies, whether it's for onboarding, marketing, or support. And because complexity multiplies, we get lists inside lists inside lists, and need a convenient way of telling them apart and staying organized within our lists. 

One of the questions that comes up often with nesting lists is how to make list markers behave like they do in word processors, changing numbers to roman numerals or letters, for instance. Or styling unordered lists to make it easier to track what layer of list you're on. 

Essentially, for any given list, Administrators want to change this: 

1. Raindrops on roses
2. Whiskers on kittens
   1. Bright copper kettles
   2. Warm woolen mittens

Into this: 

1. Cream-colored ponies
2. Crisp apple strudels
   1. Doorbells
   2. Sleigh bells
3. Schnitzel with noodles

List Style

The attribute used for this is list-style-type, and we'll need to use nesting rules in a way that we haven't yet. The elements that need to be targeted are <ol> (ordered lists), but ordered lists specifically inside other ordered lists. In CSS, you can target an element beneath another by placing them after one and other in order. So to change the first example to the second, we need to target the list that's inside the first list, like this: 

ol ol li {
    list-style-type: lower-alpha;
}

That hits the second list in order. To add a third layer, repeat the same process, like so: 

ol ol ol li {
    list-style-type: lower-roman;
}

That will work in concert with the first piece to style the third layer, and so on. 

Unordered Lists

Unordered lists can be styled in the same way, with different sets of style options. They're marked by a <ul> in HTML, and you'll use that to target them in CSS. Using this, 

ul ul li {
    list-style-type: circle;
}
ul ul ul li {
    list-style-type: square;
}

We can achieve this: 

• Girls in white dresses with blue satin sashes
• Snowflakes that stay on my
  • Nose
  • Eyelashes
    • Silver-white winters that melt into springs

You can find more information on different list types here: https://www.w3.org/wiki/CSS/Properties/list-style-type

Placing CSS like this in the Appearance tab of your digital workplace won't only affect all of your new lists, but all existing ones in your Igloo, letting you shift the look and feel at a moment's notice. Use this along with classes or Page ids to style lists in specific areas to meet your needs. 

If you have questions about the Igloo platform, workflows, or best practices, you can leave a comment here, or ask a question in the Community area.