Before creating a Nested Ordered List, using Custom HTML blocks, create a H3 Heading, Horizontal Rule, and Paragraph, and insert the following code into Additional CSS to change the size of the H3 Heading:
------------------------------------
h3 {
font-size: 26px;
}
------------------------------------
Open another Custom HTML block and insert the following code:
------------------------------------
<ol>
<li></li>
<li></li>
<ol>
<li></li>
<li></li>
</ol>
<li></li>
<li></li>
<ol>
<li></li>
<li></li>
<li></li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</ol>
<li></li>
</ol>
-----------------------------------
Now add your text between the tags, preview the page and the Ordered Nested List should look like this:
Not exactly mind-blowing is it? The sub and sub sub paragraphs are all decimal, font size too small and color too light, and space between the sub sub and main paragraphs to large. So, let's see what we can do to improve it.
An ordered list (ol), consists of a basic five attributes: 1 (decimal), A (upper-alpha), a (lower-alpha), I (upper-roman), and i (lower-roman). Let's see how we can incorporate some of these into an ordered list.by inserting the following code into Additional CSS:
---------------------------------------
ol li, ol ol li, ol ol ol li {
font-family: helvetica, arial, verdana, sans-serif;
font-size: 18px;
line-height: 1.4;
color: #747474;
}
ol li {
list-style-type: decimal;
margin-left: -38px;
}
ol ol li {
list-style-type: lower-alpha;
margin-left: -75px;
)
ol ol ol li {
list-style-type: lower-roman;
margin-left: -115px;
}
-------------------------------------
If you find, like I did in the theme I'm using, the space between ol sub paragraphs and the following ol main paragraphs is too large, add the following HTML code into your Custom HTML before the > of the li tag of the following main ol paragraph:
-------------------------------------
style="margin-top: -15px;
------------------------------------
The Ordered Nested List in the previewed page should now look like this:
I think you'll agree, that looks 100% better, and more likely to impress visitors to your website. Now for the final list, the Definition List.
