How Do I Change Bullet Point Color/Shape?

Follow

At the moment, there isn't a built-in way to change color or shape of the bullet point in an unordered list.

However, you can achieve this change with a bit of custom CSS. 

Note:

Since this is custom code, it isn't officially supported by Unbounce. This means that our Support team won't be able to help in getting it set up, or troubleshooting any issues with the code in the future. 

Changing Bullet Point Color

  1. Click the Stylesheets button at the bottom of the edit page.

    stylesheets.png

  2. Copy and paste the following code:

    <style> 
    .lp-pom-text ul li {
    color: ADD COLOR CODE HERE;
    }
    </style>

  3. Add a color code in hex format (for example, #0098db is Unbounce blue!). More about color codes can be found at HTML Color Codes.
  4. Save and publish the page.

Changing Bullet Point Shape

  1. Click on the Stylesheets button at the bottom of the edit page.
  2. Copy and paste the following code:

    <style> 
    .lp-pom-text ul li {
    list-style-type: square !important;
    }
    </style>
  3. You can change the bullet point shape by replacing square with another value, such as disc or circle. For more about bullet point shapes, check out W3 School's HTML Lists.
  4. Once you're done, save and publish the page.
Was this article helpful?
2 out of 2 found this helpful