How can I add custom CSS rules to the Cleanslate Class?

[Dylan_Robinson]

Hello,

I'm wondering if I am not allowed to add my own CSS rules to the shopify-cleanslate class. I added my own styles the "more payment options" popup box and then about a month later I noticed they were all gone. Looks like shopify generates the subclasses dynamically and they changed, thus erasing all of the work I did. Any way to get around this? I'd really like to have my site's color scheme be consistent.

Thank you

[Gavin5511]

Did you find out how to do this Dylan? I too am looking to modify Shopify Cleanslate CSS (and get rid of the horrible yellow PayPal button)?

Thanks, Gavin

[LovelyBen]

Same here! Did you find any solution in the meantime?

[dollydirtbag]

Same problem here!

[LovelyBen]

Good to hear. Hopefully someone will fix this at some point. 

It's such an easy thing to do.

[Dylan_Robinson]

Hi there, thought I would pop in and let you guys know how I ended up getting around this (if I remember correctly.) Since shopify periodically generates the subclasses randomly, what you have to do is find the furthest nested class which doesn’t change (I believe it was shopify-cleanslate in this case) and then use :nth-child selector to create css rules for the subclasses of that element which represent the dynamic subclasses. If anyone wants me to take a look at their site and tweak the code for them I will be happy to do so. Cheers

[Sitka-LLC]

Hey, Dylan. I know this thread is old, but I'm trying to apply styles to the additional checkout buttons on this page: https://stackcare.com/cart

I want them to have the same border radius as the regular checkout button. Do you know how to do this? thanks

[LittlesunshineN]

hi Dylan

I am having this issue as well. the button is really overpowering and goes out of out styleguide. 

I spent a couple of hours but i couldn't make it happen 

www.imperialjewellery.com.au

We just want to change the background colour of the dynamic button to #003031

[Lm17]

Probably too late to help anyone in this thread, but for anyone else in the future.
What Dylan was talking about was using something like .shopify-cleanslate InsertElementHere:nth-of-type(#), where you would replace the italicized text with whatever you want to affect.

For a simple example, I want to increase the width of the "Shop Pay" button (which is a list item "li" and the first one for me), so I did:
.shopify-cleanslate li:nth-of-type(1) { flex-basis:250px !important; }

In my actual case, there were 4 buttons I wanted to affect, (Shop Pay, Amazon Pay, Pay Pal, and Meta Pay) I instead did:
.shopify-cleanslate li:nth-of-type(1),
.shopify-cleanslate li:nth-of-type(2),
.shopify-cleanslate li:nth-of-type(3),
.shopify-cleanslate li:nth-of-type(4) {
flex-basis:250px !important;
}

This will make all the buttons 250px in width on a desktop browser.

Hope this helps.

[Donnie202]

Came in handy! Thanks!