Design & branding

Article author
Josh Lopez
  • Updated

Upload your logo, set your brand color, and update CSS on Memberstack modals.

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 before leaving the page. You should see a preview of your logo off to the right.

 

design-and-branding-ui.png

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>

 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.