Bricks Builder: How to create a custom numbered list style using CSS [Article]

In this tutorial, you’ll learn how to use simple CSS to create a unique style for your ordered list items in Bricks Builder.

There are several ways you can create a custom-ordered numbered list style when working with Bricks Builder. Let’s take a look –

1. Use nested divs inside a container with the layout set to horizontal, and an icon or SVG.
2. Use some custom CSS.

We’re going to use CSS for this tutorial, so let’s get to it.

Step one: Open up WPCodeBox

Before we get started, you’ll need a way to add some CSS to your Bricks Builder website. There are a few ways in which you can do this. One method would be to add CSS to the CSS field for the text element by going to Style > CSS > Custom CSS.

However, it’s not the best practice to have CSS code scattered all over the place. You know my feeling on this as I prefer to have my CSS in one place.

This is where the WPCodeBox plugin comes in. With this plugin, you can create and manage areas to keep all of your custom code. So, we’re going to create a new snippet and name it custom-numbered list items.

If you’re already using WPCodeBox and have a CSS stylesheet you’d like to use, then feel free to add your code there.

Step two: Copy and paste the code

Copy and paste the following code snippet into your CSS field or custom stylesheet.

/* Custom-Numbered List 
----------*/
ol {
  counter-reset: my-awesome-counter;
  list-style: none !important;
  padding-left: 40px;
  margin-left: 20px;
}
ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  position: absolute;
  --size: 30px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background: #000000;
  border-radius: 50%;
  text-align: center;
}

Step three: preview

So now, how would you use this inside of Bricks Builder?

You should be able to drop in a rich text element on your page inside of the Bricks Builder. You can then edit the content and add your list items and your custom-numbered list will be generated automatically.

This list style will also be auto-generated when you add content using the default WordPress editor.

Result

If you paste the code above with no modifications, your custom-numbered bullet list will look like this –

You are free to modify the CSS code snippet in any way you wish. Here are some suggestions you can use. Experiment with a few to see what effect you like best –

1. Change the background color of the numbered list

Change the hexadecimal value of the color code to match the appearance of your website:

  background: #000000;

2. Change the background solid color to a gradient color

Instead of using a solid background color, you can add a cool gradient color effect too. You’ll need to replace the background color line of the code with the following –

background: rgb(253,98,0);
background: linear-gradient(90deg, rgba(253,98,0,1) 0%, rgba(249,0,237,1) 100%);

For more inspiring gradient color snippets, check out this free tool.

3. Change the shape using CSS clip-path

Another idea would be to use the CSS clip-path declaration to add a cool angle effect to your bullet points list. Here’s an example –

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

Check out clippy for more inspiration clip-path shape ideas.