Add section background colour on password page

Jade0200
New Member
8 0 0

Hi everyone!

 

ive changed my password page background but now hoping to add a solid white background to the middle section where the writing is, and then change the font colour to black. Is this possible to do without changing the font etc of the rest of my pages?

 

here’s how it currently looks.....

 

thanks

Jade

0 Likes
bdowling
Explorer
66 13 39

Hi, if you include a link to that password page someone would be able to give a more accurate/definitive answer.

In the meantime, you can try something like this:

Near line 5198 of your "theme.scss.liquid" file in your assets folder, find this chunk of code:

.password-login-form,
.password-signup-form,
.password-message {
  max-width: 500px;
  margin: 0 auto;
}

Try adding these two lines:

  background-color: white;
  color: black;

so the original chunk of code should look like this:

.password-login-form,
.password-signup-form,
.password-message {
  background-color: white;
  color: black;
  max-width: 500px;
  margin: 0 auto;
}

I hope this helps. Good luck

0 Likes
Jade0200
New Member
8 0 0

Ahh just tried that and it doesn’t seem to have worked, thank you anyway!

 

the link is:

thepersonaltouchstudio.com

thank you

0 Likes
bdowling
Explorer
66 13 39

Alright, since I'm testing with a development store, I can't really see if my solution works for sure but I see one more thing you can try based on looking at your link:

Again in the "theme.scss.liquid" file find this chunk of code near line 5177: 

.password-content-section {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password-main {
  display: table-cell;
  vertical-align: middle;
  padding: ($gutter-site / 2) $gutter-site;
}

.password-main__inner {

}

starting with the "password-main__inner" try adding these two lines:

  background-color: white;
  color: black;

 so it looks like this: 

.password-main__inner {
  background-color: white;
  color: black;
}

 If that doesn't work delete those two lines and try adding those lines on each of those two classes above ".password-main__inner" to see if one works.

I hope this works, if not I'll cede this discussion to someone else with password page editing permissions.

0 Likes
Jade0200
New Member
8 0 0

Thank you for helping but they don’t seem to have worked either... my lines also aren’t in the same lines as you’re saying but that might be because I’m using the minimal theme.. maybe should have said that at the beginning but wasn’t sure if that affected the password page or not. 

thanks so much for your time anyway 

 

0 Likes
bdowling
Explorer
66 13 39

Ok, that makes sense. I changed my theme and found the classes that match your site.

Find this chunk of code in the "theme.scss.liquid" file near line 2755 ( you can use control + f to search for the class name too)

.password-page__main {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password-page__main__inner {
  display: table-cell;
  vertical-align: middle;
  padding: ( $gutter / 2 ) $gutter;
}

try adding this:

  background-color: white;
  color: black;

to ".password-page__main__inner" so it looks like this:

.password-page__main {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password-page__main__inner {
  background-color: white;
  color: black;
  display: table-cell;
  vertical-align: middle;
  padding: ( $gutter / 2 ) $gutter;
}

if the white background does not cover far enough try putting the background-color in the "password-page__main" instead. I hope this finally helps. Good luck

0 Likes
Jade0200
New Member
8 0 0

Still no luck! Thank you though

0 Likes
bdowling
Explorer
66 13 39

Are you sure? It works for me when I did that in chrome devtools.

EDIT: This is the opposite of what you want but it still shows the solution. Swap the black for white and white for black and it should achieve the white background and black text you want.

 

E41105E5-9750-419E-94C0-B268B37AD9DA.jpeg

0 Likes