emmageorge Posted November 12, 2019 Share Posted November 12, 2019 The variant & quantity buttons on product blocks don't have a normal class to target with CSS - how can I style them - or am I being dumb? https://sarahfarooqi.squarespace.com/calendars-product-info Link to comment
tuanphan Posted November 12, 2019 Share Posted November 12, 2019 (edited) You can target it use .variant-select-wrapper select {Your CSS} or select[data-variant-option-name="Option"] {Your CSS} with quantity, use .product-quantity-input input[type="number"] Edited November 12, 2019 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
emmageorge Posted November 13, 2019 Author Share Posted November 13, 2019 Really appreciate that - although cannot figure out how to change the border radius and padding on the Option button - it works on the quantity button... https://sarahfarooqi.squarespace.com/calendars Would be much easier if the product block used up the same styling as on the product item page! Link to comment
tuanphan Posted November 13, 2019 Share Posted November 13, 2019 58 minutes ago, emmageorge said: Really appreciate that - although cannot figure out how to change the border radius and padding on the Option button - it works on the quantity button... https://sarahfarooqi.squarespace.com/calendars Would be much easier if the product block used up the same styling as on the product item page! #collection-5dc2d77721110f74288839b9 select[data-variant-option-name="Option"] { background-color: #d4ddde; font-size: 20px; border-radius: 10px; padding: 10px; } border radius & padding should work Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
emmageorge Posted November 14, 2019 Author Share Posted November 14, 2019 (edited) I really want to give up as life's too short to faff about with this - but it doesn't work and I don't know why, I tried adding !important. Maybe let it drop - thanks for your time Tuan Edited November 14, 2019 by emmageorge Link to comment
tuanphan Posted November 14, 2019 Share Posted November 14, 2019 1 hour ago, emmageorge said: I really want to give up as life's too short to faff about with this - but it doesn't work and I don't know why, I tried adding !important. Maybe let it drop - thanks for your time Tuan Try inserting the code & share url, i'll check. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
emmageorge Posted November 14, 2019 Author Share Posted November 14, 2019 what a man! https://sarahfarooqi.squarespace.com/calendars Here's what I've got - I tried !important after the radius & padding of Option. #collection-5dc2d77721110f74288839b9 { select[data-variant-option-name="Option"] { background-color: #d4ddde; font-size: 20px; border-radius: 10px; padding: 10px;} .product-quantity-input input[type="number"] { background-color: #D4DDDE; font-size: 20px; border-radius: 20px; padding: 10px; } } Link to comment
tuanphan Posted November 14, 2019 Share Posted November 14, 2019 5 minutes ago, emmageorge said: what a man! https://sarahfarooqi.squarespace.com/calendars Here's what I've got - I tried !important after the radius & padding of Option. #collection-5dc2d77721110f74288839b9 { select[data-variant-option-name="Option"] { background-color: #d4ddde; font-size: 20px; border-radius: 10px; padding: 10px;} .product-quantity-input input[type="number"] { background-color: #D4DDDE; font-size: 20px; border-radius: 20px; padding: 10px; } } It worked here https://prnt.sc/pwwpkw Have you tried clearing cache yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
emmageorge Posted November 14, 2019 Author Share Posted November 14, 2019 yep - no difference. Weird non? Link to comment
rooted Posted March 3, 2021 Share Posted March 3, 2021 hi! was this ever resolved? i'm having the same issue. i have two buttons that i need to modify the look of. the two buttons are called "length" and "reusable cooler bag." i used the following code to transform the "length" button, which worked successfully: #item-60219600caaff826bd81857b select[data-variant-option-name="length"] { background-color: #fffcf1; font-size: 20px; border-radius: 30px; border-color:#844427; padding: 10px; } however, when I copy and paste this code, replacing "length" with "reusable-cooler-bag," it doesn't work. my site url is https://maroon-burgundy-9dzz.squarespace.com/config/pages/60219600caaff826bd818567. click on any of the product buttons and you'll see what i'm talking about. thank you so much! Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 On 3/4/2021 at 3:23 AM, rooted said: hi! was this ever resolved? i'm having the same issue. i have two buttons that i need to modify the look of. the two buttons are called "length" and "reusable cooler bag." i used the following code to transform the "length" button, which worked successfully: #item-60219600caaff826bd81857b select[data-variant-option-name="length"] { background-color: #fffcf1; font-size: 20px; border-radius: 30px; border-color:#844427; padding: 10px; } however, when I copy and paste this code, replacing "length" with "reusable-cooler-bag," it doesn't work. my site url is https://maroon-burgundy-9dzz.squarespace.com/config/pages/60219600caaff826bd818567. click on any of the product buttons and you'll see what i'm talking about. thank you so much! Hi. /config is admin url. See how to find page url. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rooted Posted March 9, 2021 Share Posted March 9, 2021 On 3/7/2021 at 12:24 AM, tuanphan said: Hi. /config is admin url. See how to find page url. hey! sorry about that! the page url is: https://maroon-burgundy-9dzz.squarespace.com/order-a-cleanse Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 On 3/10/2021 at 1:15 AM, rooted said: hey! sorry about that! the page url is: https://maroon-burgundy-9dzz.squarespace.com/order-a-cleanse Hi. Your site is private. Did you solve this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment