All Collections
FAQ
Advanced
Changing the color of bullet points
Changing the color of bullet points

A CSS workaround for the theme's default list styles.

Updated over a week ago

The color of bullet points is controlled by the typography styles in the theme's CSS. While a font's color can be changed in the text editor, that color isn't always applied to the bullet points. Here's how you can change that using a CSS class.

Changing the color for a single Shogun page

For this example, let's say we want to have white bullet points.

Select the Text element containing the list. In its Advanced style options, add any name into the CSS Class field. Here we'll use "custom-bullets" as our class name.

Then, drag an HTML element into the page and paste in the following code using our selected class name ("custom-bullets") and our color of choice ("#fff" for white):

<style type="text/css">
  .custom-bullets li {
     color: #fff !important;
  }
</style>

Adding CSS to your theme to reuse on multiple pages

If you'd like to use custom bullets across multiple pages without having to add the HTML element each time, you can add the following code directly into the CSS file of your theme:

.custom-bullets li {
  color: #fff !important;
}
Did this answer your question?