Update your site branding on the Design page.

Set a primary color → Select or enter your brand's 6-digit hex code.

Upload your company logo → This can be a SVG, PNG, or JPEG.
Click Select an Image to open the file picker. Make sure you click the Upload button go before leaving the page. You should see a preview of your logo off to the right.

Customizing Memberstack Modals

Memberstack automatically inherits some font styling from the <body> of your site. Meaning, you update the color, size, weight, and font-family of all Memberstack components by styling your <body> tag.

We currently don't have features to customize the default styling of Memberstack components at this time. It's not recommended, but you are able to override our default styling with custom CSS and !important.

Here are some examples of elements you can customize with CSS:

<style>
.ms-checkout-header {
background-color: #12141c !important;
}
.ms-checkout-header-text {
color: #ffffff !important;
}
.ms-checkout-plan-name {
color: #ffffff !important;
}
.ms-checkout-plan-duration {
color: #ffffff !important;
}
.ms-checkout-price {
color: #ffffff !important;
}
.ms-checkout-label {
color: #ffffff !important;
}
.ms-modal-container {
background-color: #12141c !important;
border-color: #12141c !important;
}
.ms-checkout-plan {
background-color: #8442e8 !important;
}
.ms-field-override {
background-color: #8442e8 !important;
}
<style>


<style>
.ms-password-padding {
background-color: #12141c !important;
}
.ms-reset-container {
background-color: #12141c !important;
}
.ms-password-field {
border: 1px solid white !important;
}
.ms-password-h1 {
color: #ffffff !important;
}
.ms-password-text {
color: #ffffff !important;
}
.ms-password-label {
color: #ffffff !important;
}
.ms-skip-reset-email-link {
color: hsla(0, 0%, 100%, 0.5) !important;
}
</style>


<style>
.ms-portal {
background-color: #12141c !important;
}
.ms-portal-menu {
background-color: #12141c !important;
}
.ms-portal-sub {
background-color: #8442e8 !important;
}
.ms-portal-form {
color: #12141c !important;
}
</style>

Did this answer your question?