How to change Modula Slider arrow and dot colors

You can change the Modula Slider arrow colors and dot colors with CSS, the code that controls how a page looks. The Slider gallery type has settings to show or hide its arrows and dots, but none for their colors. To change the colors, add the CSS below to your site.

Note: The Slider gallery type needs Modula Pro.

Turn on the arrows and dots

The arrows and dots have to be on before you can see their new colors. Follow these steps in the gallery editor.

1. Go to Modula → Galleries and open your gallery.
2. Open Layout.
3. Set Type to Slider.

4. Switch on Show arrows and Show page dots.

   

Arrows over the image places the arrows on the slide instead of beside it.

You can read about the other options in Modula Slider.

Where to add the CSS

With the arrows and dots on, you can add the code. The place depends on your theme.

• With a block theme: Go to Appearance → Editor → Styles. Open the ⋮ menu and choose Additional CSS.
• With a classic theme: Go to Appearance → Customize → Additional CSS.

The code changes every Modula slider on your site. To change one slider only, see How to add custom CSS to Modula galleries.

Change the arrow colors

Add this code to set the colors of the arrows.

.modula-slider .modula-items .f-button.is-prev,
.modula-slider .modula-items .f-button.is-next {
  --f-button-color: #ffffff;
  --f-button-hover-color: #ffffff;
  --f-button-bg: #e91e63;
  --f-button-hover-bg: #e91e63;
}

Each line controls one color:

• --f-button-color: The arrow itself.
• --f-button-bg: The circle behind the arrow.
• The two hover lines: The colors while the mouse is over the arrow.

Replace the color codes with your own.

Change the dot colors

Add this code to set the color of the dots.

.modula-slider .modula-items .f-carousel__dots > .f-carousel__dot {
  color: #e91e63;
}

The dot of the current slide is fully colored. The other dots are a lighter shade of the same color.