[Resolved] Adding an increasing number next to the field

[Author]

Posts

[barisS]

hi,

so this is the code that I've been trying to edit:

[types field='steps' separator='</br><h4>Step</h4>'][/types]

How can I add an increasing number after the h4 text 'Step' ? step field is a single line. You get to add more than one single line. so it is going to look like this for every line:

Step 1
Content
Step 2
Content
Step 3
Content
Step 4
Content

Thank you for your help! You guys are the best.

[Beda]

What you need is a simple numbered list.

Customize that list to output "Step n" instead of "n." which is the native default.
Then separate with the separator attribute by passing the correct HTML markup.

It looks like this afterwards in your text editor:

<ol id="customlist">
 	<li>[types field='types-field' separator='</li><li>'][/types]</li>
</ol>

As you see, I add a Custom CSS class to the wrapping OL element.

This later allows me to customize this with some CSS:

#customlist {
  /* delete default counter */
  list-style-type: none;
  /* create custom counter and set it to 0 */
  counter-reset: elementcounter;
}
#customlist>li:before {
  /* print out "Step " followed by the current counter value */
  content: "Step " counter(elementcounter) ": ";
  /* increment counter */
  counter-increment: elementcounter;
}

This code produces then something like you see in the screenshot.