change colour of slideshow bottom section

Store Design
, ,
1

hello, i want to change the colour of the bottom bit of my slideshow, as i cant seem to assign it a color scheme. It is currently white, but i want to change it to color code: #164B3B:

Screenshot 2025-05-19 at 16.29.57.png
Screenshot 2025-05-19 at 16.29.57.png908×922 680 KB

my website is www.antico-abito.com , theme is dawn

2

Hello @ads18922
Go to online store ----> themes ----> actions ----> edit code ----> assets —> component-slideshow.css
add this code at the end of the file and save.

.slideshow__controls.slideshow__controls--top.slider-buttons {
background: #164B3B !important;
}

result

5.png
5.png893×500 440 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Add this CSS to the Custom CSS area in your Slideshow Section:

(Note: I also included --color-foreground so that the color of the dots and arrows can be adjusted as well. It looks a bit odd but --color-foreground is actually in RGB. Example: R, G, B => 255, 255, 255)

.slideshow__controls {
    background: #164b3b;
    --color-foreground: 255, 255, 255;
  }

002.png
002.png797×677 48.2 KB

4

I had the same problem but DrewOswald fixed it half for me… But I also need to change the colors of the blue numbers in the middle.

Kakii07_0-1748522843110.png
Kakii07_0-1748522843110.png917×257 47.4 KB

 
5

Sorry about that here’s the updated CSS so now --color-foreground will affect the rest of the slideshow controls elements.

.slideshow__controls {
  background: #164b3b;
  --color-foreground: 255, 255, 255;
  color: rgb(var(--color-foreground));
}
6

Hey! You can usually target that bottom part with a bit of custom CSS. Something like:

.slideshow__bottom {
    background-color: #164B3B;
}

Just make sure to replace .slideshow__bottom with the actual class you find by inspecting the element in your browser.

You could also use Easy Edits — I built it so you can just click and change colors or even tell the AI what you want, no coding needed.

7

Hello @ads18922,
To change the background color of the bottom section, you can use a custom CSS rule like this:

/* Target the bottom section of the slideshow */
.your-slideshow-class .bottom-section {
    background-color: #164B3B; /* Change this color to your desired hex */
}

Make sure to replace .your-slideshow-class .bottom-section with the correct classes or IDs for your slideshow.

I hope this will help you. Thank you.