How to change the text and button color of the account section?

Solved

How to change the text and button color of the account section?

puffplayground
Tourist
7 0 5

I need help changing all the text and button in the account section to the color white. Does anyone know how I might do this?

Website: www.puffplayground.com

example.png

Accepted Solution (1)
Moeed
Shopify Partner
5426 1468 1753

This is an accepted solution.

Hey @puffplayground 

 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.customer button {
    background: white !important;
}
.customer button:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18,18,18, calc(1 - 1.0)), 0 0 0 var(--buttons-border-width) rgb(255 255 255) !important;
}

RESULT:

Moeed_0-1726564670170.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
5426 1468 1753

Hey @puffplayground 

 

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>
h1#login {
    color: white !important;
}
.login a {
    color: white !important;
}
</style>

RESULT:

Moeed_0-1726562291193.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


puffplayground
Tourist
7 0 5

thank you that seems to have worked, do you know how to change the "sign in" button from yellow to white?

Moeed
Shopify Partner
5426 1468 1753

This is an accepted solution.

Hey @puffplayground 

 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.customer button {
    background: white !important;
}
.customer button:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18,18,18, calc(1 - 1.0)), 0 0 0 var(--buttons-border-width) rgb(255 255 255) !important;
}

RESULT:

Moeed_0-1726564670170.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Safin_Sayed
Shopify Partner
1 0 0

 

form#customer_login button {
    background-color: #ffffff !important;
}

 

Hi @puffplayground Please add those CSS in the assets/base.css file. It will work.

Safin_Sayed_0-1726564788776.png

Thanks.

Sangeetanahar
Explorer
541 36 69

hello @puffplayground 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->customer.css...>.
add the code end of the file

.customer button {

    background-color: white;
}

result

Account-–-Puff-Playground.png

 

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

ZestardTech
Shopify Partner
5760 1051 1390

Hi @puffplayground 

 

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

 

.login a{
color:white;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: [email protected]
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing