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:
my website is www.antico-abito.com , theme is dawn
Topic summary
A user wants to change the bottom section color of their slideshow from white to #164B3B on their Dawn theme store (antico-abito.com). The section doesn’t allow color scheme assignment through standard settings.
Two solutions were provided:
-
Edit theme CSS file directly: Add custom CSS to
component-slideshow.csstargeting.slideshow__controlswith the desired background color and!importantflag. -
Use Custom CSS in Slideshow Section (recommended): Add CSS targeting
.slideshow__controlswith:background: #164b3bfor the section color--color-foreground: 255, 255, 255for dots/arrows (uses RGB format)color: rgb(var(--color-foreground))to ensure all control elements (including slide numbers) inherit the foreground color
The second solution was refined after another user reported that slide numbers weren’t changing color. Screenshots demonstrate the before/after results. Status: Resolved with working CSS code provided.
3 Likes
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
If this was helpful, hit the like button and accept the solution.
Thanks
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;
}
1 Like
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.
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));
}