change colour of slideshow bottom section

[ads18922]

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

[GTLOfficial]

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

[DrewOswald]

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;
  }

[Kakii07]

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.

[DrewOswald]

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));
}