Change color of Variant picker box and Quantity box to white in Dawn

[cvette]

Hi!

Any help on how to change color of Variant picker box and Quantity box to white in Dawn?

[mrashid]

@cvette don't worry about it. please share store url

[PageFly-Richard]

Hi @cvette 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.quantity:before,.product-form__input--pill input[type=radio]+label,.select__select {
background-color: #fff !important;
}
.product-form__input--pill input[type=radio]:checked+label {
    background-color:#000;
    color: #fff;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[cvette]

Thank you, that worked! Is there a way to now make the font bold and a bit larger?

[mrashid]

@cvette please add this code in base.css

.select__select, .product-form__input .form__label {
    font-weight: 700;
    font-size: 16px;
}

[cvette]

Yes that did it. Should have done it to the quantity one as well ... Do you have a code for that? 

[mrashid]

@cvette share your store url...

[cvette]

My store is still live in Debut, I am working on the theme in Dawn before I take it live. How do I share it will you?

[mrashid]

@cvette open code . right click on preview

[mrashid]

@cvette past code in base.css

.quantity__button svg {
    width: 13px;
}
.quantity__input {
    font-size: 16px;
    font-weight: 700;
}

[cvette]

Fixed! Again, I truly appreciate your help!! 

I have a few more things I am trying to fix if you have the time and if not I completely understand and appreciate all you have already done.

#1 - My headers will not center on any of my pages....

#2 - I cannot get the colors to change to my grey that is on my home page...

#3 - Is there a way to be able to size image banners...

[mrashid]

@cvette for banner. open customization, then open section settings and select your banner size. adapt to first Image recmended

[cvette]

I would like to be able to adjust it from side to side so it doesn't span across the whole screen

[mrashid]

@cvette for color check this short video
https://somup.com/cZ1logEQer

[cvette]

I think I may have called it the wrong thing ... not my banners but the larger picture that spans across the site...

I would like to be able to make this smaller so it does not go edge to edge

[mrashid]

@cvette let me clear, you don't want full width banner? right

[cvette]

Now do we have a way to adjust the size on this?

[mrashid]

@cvette like this? 

[cvette]

Yes. Will I be able to adjust it later if I need to?

[mrashid]

@cvette give me two minutes i will share short video for add code.

[mrashid]

@cvette open image banner section in theme editor and update code 54 to 57 like in screenshot

<div
  id="Banner-{{ section.id }}"
  class="page-width banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>

[cvette]

so delete what is there and add the code above?

[mrashid]

@cvette yes

[cvette]

That didn't seem to work, I ended up with this.

[mrashid]

@cvette ohh sorry I don't understand the requirement

[mrashid]

@cvette is it possible for you to share video

[cvette]

Would like it to look like this.