How can I change the colors on a "choose options" popup page (Trade theme)?

[KalleK]

I am struggling with changing the colors of the objects, like "Go to cart" button and others included in the "Choose option" popup window (not the background color or the "Choose options" button text color). Can anyone come up with a solid solution?

[Moeed]

Hey @KalleK 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[KalleK]

Hi Moeed

Thank you for a swift response. I am new to Shopify creating the first webshop.

I'll give you the URL - https://crowdtracking.eu/collections/all 

The issue shows when you click a "Choose options" button.

If you can come up with a solution, I'll be very happy.   

Best regards 

KallK

[Moeed]

Hey @KalleK 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.quick-add__submit {
    color: black !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[KalleK]

Ho Moeed

Thank for you. But not exactly what I was hoping for.

The issue shows in the popup window, with only black and white colors. I would like change the color for each object besides the background color.   

Do you have an idea?

Best regards KalleK

[Moeed]

Apologies for the confusion,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.quick-add-modal__content-info--bulk thead {
    background: white !important;
}
.quick-order-list__total {
    background: white !important;
}
.quick-add-modal__toggle {
    background: white !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Thanks for the info, do mean changes the color like this? 

If it is check this one. 

.quick-add-modal__content-info--bulk thead { 
    color: #fff;
    padding: 0 20px;
}
.quick-add-modal__content-info--bulk .quick-order-list__table th {
    padding-left: 1rem;
    padding-right: 1rem;
}
.quick-order-list__total {
    padding-left: 1rem;
    padding-right: 1rem;
}
a.quick-order-list__button.button:after {
    content: '';
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255, 255, 255, var(--border-opacity)), 
            0 0 0 var(--buttons-border-width) rgba(255, 255, 255, var(--alpha-button-background));
}
.quick-order-list__total-items span, .quick-add-modal__toggle svg, .quick-order-list__total * {
    color: #fff;
}

And save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[KalleK]

Hi Made4uo-Ribe

Thanks.

This almost solved the problem. Only need to change the color of the total numbers, which are grayed out.

Can you help me with this too.

Best regards KalleK 

[Made4uo-Ribe]

oh, i didnt notice that add this code then. 

Same Instruction. 

.quick-order-list__total-items span, span.totals__subtotal-value  {
    color: #fff;
}

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[KalleK]

Thanks! There as a total in the Quantity column too. Would you be kind to change the color of that too?

Best regards KalleK

[KalleK]

Hi again 

Another issue - The link in "Taxes included. Discounts and shipping calculated at checkout" are almost invisible. Could you help me with that too?

Best regards KalleK

[Made4uo-Ribe]

Please, replace with this code.

.quick-order-list__total .rte a, span.totals__subtotal-value {
    color: #fff;
}
.quick-order-list__total-items span  {
    color: #fff !important;
}

button.quantity__button {
    opacity: 1 !important;
}

And save.

Let me know what still missing. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[KalleK]

Hi 

I was almost there, but when I did the suggested replacement, it was almost like taking two steps back. I have not been able to reestablish the situation before the replacement. Can you please help?

BR KalleK  

[Made4uo-Ribe]

Hi @KalleK 

What happened? When I checked your store today, everything was reset to zero. Also, the code I provided doesn’t seem to be fully working, as it seems to have overridden other codes.

[KalleK]

Hi Made4uo-Ribe

Thank you for writing.

I added this to base.css beneath of existing code:

.quick-add-modal__content-info--bulk thead {
color: #fff;
padding: 0 20px;
}
.quick-add-modal__content-info--bulk .quick-order-list__table th {
padding-left: 1rem;
padding-right: 1rem;
}
.quick-order-list__total {
padding-left: 1rem;
padding-right: 1rem;
}
a.quick-order-list__button.button:after {
content: '';
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255, 255, 255, var(--border-opacity)),
0 0 0 var(--buttons-border-width) rgba(255, 255, 255, var(--alpha-button-background));
}
.quick-order-list__total-items span, .quick-add-modal__toggle svg, .quick-order-list__total * {
color: #fff;
}
.quick-order-list__total-items span, span.totals__subtotal-value {
color: #fff;

It almost solved the issue, but then I replaced:

.quick-order-list__total-items span, span.totals__subtotal-value {
color: #fff;
}

With:

.quick-order-list__total .rte a, span.totals__subtotal-value {
color: #fff;
}
.quick-order-list__total-items span {
color: #fff !important;
}

button.quantity__button {
opacity: 1 !important;
}

Since then I have had the issue you see on the web now. 

What do you suggest me to do?

Best R KalleK

[KalleK]

Hi again 

I was able to adjust some colors from the color scheme, but unfortunately not the background color of the buttons, which should be #1878B9. Any suggestions?

Best R KalleK 

[Made4uo-Ribe]

Hi @KalleK 

Would you mind sharing your store URL? Thanks!

[GTLOfficial]

HEllo @KalleK 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

@media screen and (min-width: 990px) {
.quick-order-list__button.button.button--secondary.small-hide.medium-hide {
background-color: #cec5c5 !important;
}
.quick-order-list__total {
background-color: pink;
}
.caption-with-letter-spacing {
background: pink !important;
}
.quick-add-modal__toggle {
background-color: white !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[KalleK]

Hi Moeed

Thanks.

Best regards KalleK 

[KalleK]

Hi GTLOfficial

Thanks.

Best regards KalleK 

[GTLOfficial]

Happy to help you...!!!