change color or email signup form in password page

Store Design
,

Topic summary

A user seeks to change the email signup form’s border and text color to white on their store’s password page.

Initial Solution:

  • First attempt involved adding CSS code to theme.liquid file, which didn’t work for the password page specifically
  • User successfully applied modified code directly to the password page, but the outline color change remained incomplete

Working Fix:
After several iterations, the solution that worked was:

.newsletter-form__field-wrapper .field:after {
  box-shadow: unset !important;
  border: solid 1px white !important;
}

Additional Requests Resolved:

  1. Mobile image ratio issue: White space appeared under images on mobile view

    • Fixed with: .banner__media.media { min-height: 50rem !important; }

  2. Content positioning: The image fix caused horizontal centering issues

    • Resolved with: .banner__content { top: 150px !important; }

All CSS modifications use @media screen and (max-width: 767px) for mobile-specific targeting. The discussion appears resolved with working solutions for all issues.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I would like to be able to change the color of the border and the text of the email form to white on the password page only. Seems like i could only do the arrow for now. (see code in screenshot). Thanks for your help

Screenshot 2024-08-12 at 13.45.52.png
Screenshot 2024-08-12 at 13.45.52.png3328Ă—1912 488 KB

2

Hey @lplabranche

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 tag

RESULT:

Moeed_0-1723485732011.png
Moeed_0-1723485732011.png612Ă—328 28 KB

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

Best Regards,
Moeed

3

Unfortunately didn’t apply to the password page. Thanks

1 Like
4

However I added some of your code directly to the page instead to do it in the theme.liquid file and now only the outline color change is missing. I don’t knwo if you could help me from there

Screenshot 2024-08-12 at 14.11.04.png
Screenshot 2024-08-12 at 14.11.04.png2668Ă—1378 322 KB

1 Like
5

Hey @lplabranche

Try adding this code in there as well

.newsletter-form__field-wrapper .field__input:after {
    box-shadow: 0 0 0 var(--inputs-border-width) rgb(255 255 255 / 55%) !important;
}
6

did try and it’s the only one that did not work

1 Like
7

Hey @lplabranche

This one would work, give this one a try

.newsletter-form__field-wrapper .field:after {
    box-shadow: unset !important;
    border: solid 1px white !important;
}

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

Best Regards,
Moeed

1 Like
8

did the trick much appreciated!

1 Like
9

I would have one more request if you don’t mind. I would like the image ratio to be resized for mobile view only so the white space
underneath the images disapears. Let me know if you can help!

Screenshot 2024-08-12 at 14.27.11.png
Screenshot 2024-08-12 at 14.27.11.png832Ă—1782 133 KB

10

Hey @lplabranche

Add this code

@media screen and (max-width: 767px) {
.banner__media.media {
    min-height: 50rem !important;
}
}

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

Best Regards,
Moeed

1 Like
11

Great! but it created an other issue whereas I need to drop all the content of the section to center it horizontally in the section. Would you have a solution for that as well?

12

Hey @lplabranche

Add this code

@media screen and (max-width: 767px) {
.banner__content {
    top: 150px !important;
}
}

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

Best Regards,
Moeed

1 Like