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:

This custom code workaround is not officially supported by Unbounce. Our Support team won't be able to help with setup or troubleshooting if issues with the code arise 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:
  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. In your CSS, you need to use the pound/hash symbol (#) before your hex code for it to be valid.
  4. Save and publish the page.

Note:

The color change won't appear within the Page Builder, since the CSS code is run later. You'll have to Preview or Republish the page to see the updated bullet points.

Note:

If you have not applied any styling to your text in the builder, your text color might change upon bullet point color changes. To prevent this, you can simply apply your text color in-app.

Changing Bullet Point Shape

  1. Click on the Stylesheets button at the bottom of the edit page.
  2. Copy and paste the following code:
  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.

Changing Two Different Colors of Bullet Points in Two Different Text Boxes

The CSS code provided in Part 1 will change all bullet points on your page to the same color of your choice. However, if you are using bullet points on different sections of your landing page, you might want to give each textbox a different bullet point color. You can achieve this by using the ID selector for your CSS code to target a specific textbox:

  1. Click the Stylesheets button at the bottom of the edit page.stylesheets.png
  2. Copy and paste the following code:
  3. Click on the textbox containing the bullet points that you would like to modify, then find the ELEMENT ID section at the bottom of the Properties tab on the right side of the page.image2.png
  4. Replace the IDs in the script above with the target textbox IDs.
  5. Add your color codes in hex format. Make sure to use the pound/hash symbol (#) before your hex code for it to be valid.
  6. Save and publish the page.
Was this article helpful?
38 out of 129 found this helpful