FROM CACHE - en_header

Dawn Theme: Change Button Text Color + Change menu color only for mobile

Solved
PuaHome
Tourist
13 0 7

Hi all,

 

I have 2 questions I really can not solve.

 

1. I want to change the text color of the buttons (Landing page, product page, cart,...) but the footer color needs to stay the same.

Normally you can change everything in your theme settings, but if i change the button color the footer color changes too. I will attach a screenshot.

 

2. How can I change the background and footer color of my mobile view without changing the normal background color? Is that possible? I attached a screenshot as well.

 

Website: pua-home.com

 

Thank you in advance!

 

Ronny

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2799 528 727

This is an accepted solution.

@PuaHome,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
:root {
  --custom-button-color: #ccc;
  --custom-button-text: #fff;
}

.button,
.button:active,
.button:focus{
    background: var(--custom-button-color) !important;
    color: var(--custom-button-text)  !important;
    border-color: var(--custom-button-color)  !important;
      box-shadow: 0 0 0 .1rem var(--custom-button-color)  !important;
}


.button:hover{
    box-shadow: 0 0 0 .2rem var(--custom-button-color)  !important;
}

@media (max-width: 749px){
    body{
    background: #c2c2c2 !important;
    }
    
    .footer{
background: #c1c1c1 !important;

    }
}

</style>


You can change the values as per your wish:

#ccc = buttons color

#fff = buttons text color

#c2c2c2 = website's background color (mobile only)
#c1c1c1 = footer background color (mobile only)


Kind regards,
Diego

 

View solution in original post

Replies 4 (4)
ZestardTech
Shopify Expert
3589 592 831


Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.liquid and paste this at the bottom of the file:

.button, .button-label, .customer button,
.shopify-challenge__button {
color: white;
}
a#cart-notification-button {
color: black;
}

nav.menu-drawer__navigation {
background: #eae7e0;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
diego_ezfy
Shopify Partner
2799 528 727

This is an accepted solution.

@PuaHome,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
:root {
  --custom-button-color: #ccc;
  --custom-button-text: #fff;
}

.button,
.button:active,
.button:focus{
    background: var(--custom-button-color) !important;
    color: var(--custom-button-text)  !important;
    border-color: var(--custom-button-color)  !important;
      box-shadow: 0 0 0 .1rem var(--custom-button-color)  !important;
}


.button:hover{
    box-shadow: 0 0 0 .2rem var(--custom-button-color)  !important;
}

@media (max-width: 749px){
    body{
    background: #c2c2c2 !important;
    }
    
    .footer{
background: #c1c1c1 !important;

    }
}

</style>


You can change the values as per your wish:

#ccc = buttons color

#fff = buttons text color

#c2c2c2 = website's background color (mobile only)
#c1c1c1 = footer background color (mobile only)


Kind regards,
Diego

 

PuaHome
Tourist
13 0 7
LucyStitch
New Member
1 0 0

This helps, but is not the 100% solution to my problem.
I would want the "add to cart" button to stay as it is and would need the "buy now" to have a different font color.

How can I incorporate that into the code?