🎉 30% Summer Sale Available from 24/05 until 31/05!  Learn more >>

Custom Styled Numbered List Tutorial in Oxygen Builder [Video 10:25]

By
Fabrizio Van Marciano

Welcome to another quick CSS tutorial. Here we will create a simple but cool-looking custom-styled numbered list in Oxygen. Similar to the numbered list style used here on Van Marciano Pro.

Numbered lists are great to use for displaying itemized instructions. For example, if you’re providing steps to a process, a numbered list would be a perfect format for this.

Most numbered lists in blog posts look pretty dull, wouldn’t you agree? But we’re going to change this in this tutorial.

Before we get started, I’m using Oxygen Builder to do this in, however, this tutorial is not technology-dependent. By this I mean you can implement this code in any WordPress theme, as long as you can add your custom CSS.

A plugin I would recommend checking out for adding and managing code snippets to your website safely is the WPCodeBox plugin. This is a premium plugin, however, it’s powerful with lots of time-saving features.

When you’re ready, you can watch the quick video tutorial below.

Numbered List CSS Code Snippet

Below is the CSS code snippet you can copy and use in your theme’s CSS template. Feel free to modify it any way you want.

/* CUSTOM NUMBERED LIST STYLE
----------------------------*/
ol {
    counter-reset: my-custom-counter;
      list-style: none;
      padding-left: 45px;
}

ol li {
    margin: 0 0 0.5rem 0;
      counter-increment: my-custom-counter;
      position: relative;
}

ol li::before {
    content: counter(my-custom-counter);
      background: #000;
      color: #fff;
      font-size: 1.1rem;
      font-weight: bold;
      position: absolute;
      --size: 25px;
      left: calc(-1 * var(--size) - 10px);
      line-height: var(--size);
      width: var(--size);
      height: var(--size);
      top: 0;
      transform: rotate(-10deg);
      border-radius: 50%;
      text-align: center;
}

Don’t forget to preview the result on the front end of your website. For more design tutorials like this, including WordPress and page builder tutorials, check out my premium membership.

Go straight to the main video