How Do I Change the Color or Shape of Bullet Points?

Follow

Changing the color of a list of bullet points in the Classic Builder can be done so using some nifty CSS!

Note:

Custom scripts & CSS will only run in Preview mode, or on a published page. Do Preview your page to test out the color or shapes of these bullet points.

Changing Bullet Point Color

  1. Click the Stylesheets stylesheets.png button at the bottom of the Classic builder.
  2. Copy and paste the following code:
  3. On line 3, add a color code in hex format (for example, #0033FF is Unbounce blue!). More about color codes can be found at HTML Color Codes.
  4. Within your CSS, be sure to use the pound/hash symbol (#) before your hex code for it to be valid.
  5. Save and Publish, or Republish the page.
  6. To view this change, Preview your page, or launch your landing page in your browser. 

If you notice that the color of the text on your landing page also changes after making these changes to the bullet points, simply update the Default Text Style within the Page Properties panel on the right-hand side of the builder, or use the Inline Text Editor to change the color of that text only. 

Changing Bullet Point Shape

  1. Click on the Stylesheets stylesheets.png button at the bottom of the Classic Builder.
  2. Copy and paste the following code:
  3. On line 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 CSS list-style-type Property.
  4. Save and Publish, or Republish the page.
  5. To view this change, Preview your page, or launch your landing page in your browser. 

Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply