Why can't I change the font color on my password page?

Store Design
1

Hello.

I am trying to change the color of the heading and body text font to black on my password page. I have a white background and the font colors are appearing white (can’t be seen) when I preview my page on desktop and mobile. But when I am making the changes, it shows that the font is black. Please help! Thank you!

This is what it looks like when I edit the font.

Screen Shot 2021-04-02 at 3.15.10 PM.png
Screen Shot 2021-04-02 at 3.15.10 PM.png2870×1488 236 KB

This is what it looks like when I preview it. All of the black font is not appearing because it is white and is blending with the background but I set it as black.

Screen Shot 2021-04-02 at 3.12.34 PM.png
Screen Shot 2021-04-02 at 3.12.34 PM.png2868×1496 78.1 KB

1 Like
2

@smomin93

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @smomin93 ,

Hope you are doing well. You can edit the code for your theme.

Please follow these steps:

  1. From your Shopify admin, go to Online Store > Themes → Select your theme.

  2. Click Actions > Edit code.

  3. Find the file name “theme.scss.liquid” so you can add your style on this file.

Please take a look at our screenshot: https://prnt.sc/10k5phm

  • To solve your problem, please place this code at the end of theme.scss:

.password-page__wrapper {

color: #000;

}

Please take a look at our screenshot: https://prnt.sc/112u1kr

Hope this helps!

1 Like
4

@LitExtension Thank you for the help! I added your change and some of the text is showing up but not all of it.

It now looks like this. The body text is there but the headings text color is still missing. Thank you!

Screen Shot 2021-04-03 at 1.26.34 PM.png
Screen Shot 2021-04-03 at 1.26.34 PM.png2864×1500 109 KB

5

Hi @smomin93 ,

Please place this detailed code at the end of theme.scss:

.password-page__wrapper h1, .password-page__wrapper .h1, .password-page__wrapper h2, .password-page__wrapper .h2, .password-page__wrapper h3, .password-page__wrapper .h3, .password-page__wrapper h4, .password-page__wrapper .h4, .password-page__wrapper h5, .password-page__wrapper .h5, .password-page__wrapper h6, .password-page__wrapper .h6 {

color: #000000;

}

Please take a look at our screenshot: https://prnt.sc/1145s41

Hope this helps!

1 Like
6

Thank you so much for your time and help!! This definitely worked! :slightly_smiling_face: