How do it change the text colour of the email sign up section on my password page

[DD2024]

Hi,

I would like to change the text colour from black to white of the email sign up section on the password page of my website. See the screenshot below.

Thanks in advance.

[DD2024]

The text appears white on the mobile version but not the desktop version.

[Guleria · Accepted solution]

Hello @DD2024 ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your section-password.css file and paste the following code at the bottom:

.email-signup-banner__box .email-signup-banner__heading, .email-signup-banner__box div, .email-signup-banner__box form, .email-signup-banner__box form label {
    color: #fff !important;
}
.email-signup-banner__box form input {
    color: #fff !important;
    border: solid 1px #fff !important;
}

Regards
Guleria

[DaisyVo]

HI @DD2024 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

body.password.gradient .email-signup-banner__box.banner__box.newsletter.newsletter__wrapper * {
    color: white !important;
}
body.password.gradient .email-signup-banner__box.banner__box.newsletter.newsletter__wrapper  .newsletter-form__field-wrapper {
    border: white !important;
}
body.password.gradient .email-signup-banner__box.banner__box.newsletter.newsletter__wrapper .newsletter-form__field-wrapper .field::after {
    box-shadow: 0px 0px 1px 1px white;
}

Here is the result: 

I hope this helps

Best,

Daisy

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
 .banner--medium.banner--desktop-transparent .banner__box,
.email-signup-banner__box .email-signup-banner__heading,
.newsletter__wrapper>*+*,
.field__label {
    color: #fff !importnt;
}
.banner--desktop-transparent .email-signup-banner__box .field__input {
    color: #fff !importnt;
    border: solid 1px #fff !importnt;
}
.field__input:focus,
.field:after {
    box-shadow: unset !important;
}

</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!