how do i create an OL style w/ LI # above the LI text

hoffie4 · Post by **hoffie4** » Tue Dec 13, 2016 11:23 am

I am trying to create a custom formatted ordered list where the step number is above and left aligned with the text. It should look similar to below:

Step 1.
This is where the text goes.

Step 2.
This is where the text goes.

I am having a hard time figuring out how to make the numbers show above the LI text. Is this possible to do (and if so, how can I accomplish it)?

Post by **SteveS** » Tue Dec 13, 2016 4:59 pm

There are several ways you can do this.

You can create an ordered list and use it for Step 1, Step 2,...Step n. Close the orders list after each step, then start a new one for the next step and use the continue numbering property for the ordered list.

You can also use Flare's autonumbering feature, and apply it to each paragraph containing Step n.

I would lean towards autonumbering as it will give you more versatility, but it is a little trickier to set up.

HTH

devjoe · Post by **devjoe** » Wed Dec 14, 2016 9:22 am

Steve's suggestion of using Autonumbering is probably the way to go.

With standard HTML lists, there is a limitation in that there is no tag associated with the actual number. This makes it difficult to format the number separately from the list item. It's possible to use the margin and padding properties of the list and the list item to place the number and the start of the text where you want, and that is about it. If there was a tag for the number, you could perhaps use ::after content to stick in a <br> and ::before to add the word Step, along with formatting that doesn't indent the list body any, to get exactly what you want. Since there is no such tag, this does not work.

Using Flare autonumbers, you can specify a span tag associated with the number. In addition to that, you can tell the Autonumber to add the word Step so you don't need to use a CSS trick to put it there. You can then use CSS tricks to do anything Flare doesn't provide.

hoffie4 · Post by **hoffie4** » Wed Dec 14, 2016 11:00 am

So what you're saying is that the best way to do this is to apply the auto-number feature to each paragraph or create an ordered list and basically manually add a paragraph between each list item, correct? Sorry if I am misunderstanding, I am still relatively new to Flare and have only basic knowledge of HTML & CSS

KayJay · Post by **KayJay** » Thu Dec 15, 2016 3:26 am

You can also do this easily with CSS using the normal ordered list approach - I like this approach for its versatility as it is easy to switch back to traditional formatting if needed. All you need to do is add the CSS with the example below.

The CSS and small HTML example below restarts the numbering for every ordered list element, and uses the combination of the CSS symbol code '\A' and white-space: pre to place a line break before the step name and its contents.
You can then use padding and margin to place any more vertical space you want around each li.

Code: Select all

<html lang="en-US">
<head>
<style>
       /* Change "ol" to "body" if you want the numbering
        to continue to increase over the whole topic, rather than restart for each ol */
	ol { 
        /* Defines which element should trigger restarting counting */
		 counter-reset: step;
	}
	li::before {
               /* Before each list item, the step counter increases, 
                "content" defines the text above the li, 
                and \A is a newline which is explicitly preserved */
		counter-increment: step;
		content: "Step " counter(step) ":\A";
		white-space: pre;
	}
	ol {
        /* Remove traditional bullets */
        list-style: none;
	}
</style>
</head>
<body>
<h1>Ordered list with step counter and newline</h1>
<ol>
	<li>This is my first step</li>
	<li>This is my second step</li>
	<li>This is my third step</li>	
</ol>
<p>This is an intervening paragraph</p>
<ol>
	<li>This is another first step</li>
	<li>This is another second step</li>
	<li>This is another third step</li>	
</ol>
</body>

MadCap Software Forums

how do i create an OL style w/ LI # above the LI text

how do i create an OL style w/ LI # above the LI text

Re: how do i create an OL style w/ LI # above the LI text

Re: how do i create an OL style w/ LI # above the LI text

Re: how do i create an OL style w/ LI # above the LI text

Re: how do i create an OL style w/ LI # above the LI text