Change Color of the Bottom of Slideshow - Dawn Theme

Store Design

Topic summary

A user seeks to change the white strip at the bottom of the Dawn theme’s slideshow section (where the counter/navigation dots are located) to black to match their site’s design.

Proposed Solutions:

  • One responder suggested adding custom CSS targeting .slideshow__controls.slider-buttons with a background color change
  • Another provided code to modify .slider-counter__link--dots elements, but this changed button colors to blue rather than the background strip

Current Status:

  • The provided CSS solutions have not successfully changed the white background strip to black
  • The user reports the code either doesn’t work or affects the wrong elements (buttons instead of the background bar)
  • Multiple support providers initially requested store access, but the user noted this should be a universal Dawn theme code change

Unresolved Issue:
The discussion remains open with no working solution yet identified for changing the slideshow’s bottom strip background color.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Does anyone know how to change the color of the white strip at the bottom of the Slideshow where the counter bar is houses? Black would match the rest of my site.

Thanks!

Screen Shot 2023-04-10 at 3.48.55 AM.png
Screen Shot 2023-04-10 at 3.48.55 AM.png1061×537 64.5 KB

2

Hello @bryan76

Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

3

Hi @bryan76

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hi @bryan76

  1. Go to the online store

  2. Customize then select slideshow scrolldown custom css and paste the code:

.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls–border-radius-mobile {
background: color-name;

}

5

no need to access my site to help with a code change that would be universal to every website using Dawn theme. Websensepro was kind enough to share the code

6

Hello @bryan76

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.slideshow__controls.slider-buttons.no-js-hidden button {
    color: #0022EE;
}
.slider-counter__link--dots .dot {
    border: #0022EE;
    background: #0022EE;
}
.slider-counter__link--active.slider-counter__link--dots .dot {
    background: #0022EE;
}
7

that code will change the buttons blue. I am looking to change the white bar across the entire page to black.

8

this code does not seem to do anything. I am looking to make the white strip across the screen black. can you elaborate on what this is supposed to control and where area to place it. Thanks!

9

I feel like this should work but it does not. Any suggestion on why it is not changing the color of the bottom bar?

Thank!