How can I invert colors in the Dawn theme?

[richjj]

Hey Guys,

I have 2 Problems with the Dawn Theme.

1: in Screenshow 1 you can see that the slideshowbar at the bottom is white, i want it black with white dots/Inverted. Ive not come to see an option for that, atleast i cant find it.

2: Screenshot 2 is the Contact form already inverted, i also cant seem to find an option for this button to turn black with a white frame and text, even though its possible for every other button in this theme.

Im sure you guys can help!

Best regards

(Already posted in Discussions but i think Design more suitable)

[Made4uo-Ribe]

Hi @richjj ,

Would you mind to share your URL website with password if its protected? Thanks!

[richjj]

I´d rather not till its finished to be honest. Which Information do u need to help mit with the Solution? Just ask me anything.

[Made4uo-Ribe]

I try to edit this one with the dawn theme also. If doesnt work, if you dont mind just share even the preview or PM me sio I can provide the exact code. Thanks!

Try this.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    background: black;
}
.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile button {
    color: white;
}
.slider-counter.slider-counter--dots .slider-counter__link--active span.dot {
    background: white;
}
.slider-counter.slider-counter--dots button.slider-counter__link.slider-counter__link--dots.link span.dot {
    border: 1px solid white;
}

Result:

.contact__button button {
    background: black;
    color: white;
}

Result:

I hope it help.

[richjj]

Thanks alot!

I sent you a PM, due to occuring problems with the slidebar.

Thanks!

[richjj]

I think it has something to do with my Color Settings.

i changed “Text” to white and “Background 1” to Black and it worked, but i have to keep those setting cause my Page is built on this color palet.

Is it possible to change it in Code somehow? Only for the Slide.

Thanks!

[Made4uo-Ribe]

Sorry to hear that, try this one.

.slideshow__control-wrapper button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active span.dot {
    background: black;
}
slider-counter.slider-counter--dots button.slider-counter__link.slider-counter__link--dots.link span.dot {
    border: 1px solid black;
}

Result:

I hope it help.

[richjj]

Hey!

Yes I now got your result but how can i invert this now to black background with white Dots?

Do i have to integrate both codes?

thanks a lot!

best regards

[Made4uo-Ribe]

.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    background: black;
}
.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile button {
    color: white;
}
.slideshow__control-wrapper button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active span.dot {
    background: black;
}
.slider-counter.slider-counter--dots button.slider-counter__link.slider-counter__link--dots.link span.dot {
    border: 1px solid black;
}

Use this one. I hope it help.

[richjj]

Hey,

Its still white Bar with black Dots.

I copied the code into base.css at the bottom but nothing really changed.

still looking like this.

best regards!

[richjj]

Solution:

https://community.shopify.com/c/shopify-design/how-to-invert-slideshow-bar-in-dawn-theme/m-p/2133840#M566273