Can I add custom CSS rules to the Shopify Cleanslate class?

Dylan_Robinson
Shopify Partner
19 0 5

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

Replies 8 (8)

Gavin5511
Tourist
6 0 2

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
Visitor
2 0 0

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

dollydirtbag
Visitor
2 0 2

Same problem here!

LovelyBen
Visitor
2 0 0

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

It's such an easy thing to do.

Dylan_Robinson
Shopify Partner
19 0 5

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
New Member
4 0 0

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
Visitor
2 0 0

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

LittlesunshineN_0-1674198119649.png

 

Lm17
Visitor
1 0 0

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.