Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to change variant drop-down style


Recommended Posts

My site- motocrane.com is generally comprised of dark banners with white Body Text.
However, the product variant drop-downs have a white background, so the white body text is not readable.

How do I change my product variant text to black without affecting the rest of the site style?

Link to post
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

I don't see product page. Can you share link to variant dropdowns?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
7 hours ago, moaiz95 said:

By using the following code you can change varient


/* -- code to change variant drop-down color, dark grey version -- */
.template-product .single-option-selector, .single-option-selector-product {
  background-color:#999999; 
  color:#ffffff;
}
/* - end - */

I am moiz from vidmate app download where you can download youtube videos on your android phone.

Can you explain how to do this on the page: https://www.motocrane.com/heavylift

Link to post
11 hours ago, zacharynelson said:

Can you explain how to do this on the page: https://www.motocrane.com/heavylift

It is spam comment. Squarepace has no .template-product...code.

Add to Home > Design > Custom CSS

body#collection-5e0d56dfa5b0832cb7a43916 .variant-select-wrapper * {
    color: black;
}

 

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 4 weeks later...
On 1/30/2020 at 9:34 AM, zacharynelson said:

Hello,

I am now having the opposite problem on a new page (https://www.motocrane.com/compactcontroller) I've created with a white background.

The Product Block sits on a white background, but the text is illegible because of the Style.

How can I fix the problem on this page so that the text is black, and the "Add to Cart" button has a black background with white text?

 

Answered your email

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 4 months later...

Hi! If anyone can help we are trying to edit the variant drop-down button. We want to make the "Select Item Box" Smaller and have the "Quantities Box" bigger (these would be the 1 Bag, 3 Bags and 10 Bags in the dropdown". Here is our website: enjoysnacks.com. Here is also a specific product page with the variants: https://www.enjoysnacks.com/shop/candies/sour-lychee. Any help would be greatly appreciated!

Link to post
On 6/12/2020 at 4:52 AM, galangster said:

Hi! If anyone can help we are trying to edit the variant drop-down button. We want to make the "Select Item Box" Smaller and have the "Quantities Box" bigger (these would be the 1 Bag, 3 Bags and 10 Bags in the dropdown". Here is our website: enjoysnacks.com. Here is also a specific product page with the variants: https://www.enjoysnacks.com/shop/candies/sour-lychee. Any help would be greatly appreciated!

Add to Home > Design > Custom CSS

.variant-select-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.variant-select-wrapper option {
    font-size: 30px;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
On 6/13/2020 at 11:49 PM, tuanphan said:

Add to Home > Design > Custom CSS


.variant-select-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.variant-select-wrapper option {
    font-size: 30px;
}

@tuanphan Thank you for this, it worked perfectly! One last question, is there a way to add padding to the option drop down (which would be the 1 Bag, 3 Bags and 10 Bags option). They are a little close together when we increase the font size.

Link to post
On 6/16/2020 at 2:58 AM, galangster said:

@tuanphan Thank you for this, it worked perfectly! One last question, is there a way to add padding to the option drop down (which would be the 1 Bag, 3 Bags and 10 Bags option). They are a little close together when we increase the font size.

Hi. Sorry for the late reply. Have you solved yet?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 1 month later...
2 hours ago, TOCCO said:

Can you please help me? 

I want to change the color of these variant boxes. I also want the text to be above the boxes instead of inside.
Thank you

2020-08-21_13-13-22.png

Can you share link to product in screenshot?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...