Password Reset Modal

Community Help
#1

Is it possible to customize the password reset modal? I’ve changed the primary color, and all that—but the modal’s gray background looks out of place.

If nothing else, I’d like to be able to center it. Right now, it appears near the top of the window.

#2

Hey Sydney,

Great question, this forum post should hopefully be able to help you: Multiple brand colours they used custom CSS to update some colors. You can do the same for the modal gray and the position😊

2 Likes
#3

I made an attempt. But, of course, it didn’t go as planned. This isn’t my strong point. :sweat_smile:

This is what I tried. Could someone point me in the right direction? I’m not sure what’s missing, or incorrect (honestly, probably all of it). I’m just trying to make a white modal. I’ve already changed the font and default text, so everything else is fine.

<style>
.ms-forgot  {
    background-color: #ffffff !important;
}
</style>
#4

Hey Syndney :grin:You’re on the right track.

The style tags, structure, and !important all look great. I’m guessing the class name .ms-forgot is the issue.

Try, this instead.

<style>
.ms-reset-container {
    background-color: #ffffff !important;
}
.ms-password-field {
   border: 1px solid black !important;
}
</style>

You may want to add a border to make the text field stand out more.

<style>
.ms-reset-container {
    background-color: #ffffff !important;
}
.ms-password-field {
   border: 1px solid grey !important;
}
</style>
#5

Hey Duncan,

Sorry to reply in an older topic. Is there a list of all the elements within the memberstack UI a user could apply custom CSS to?

Thanks in advance!