NOTE: Please understand that all Custom CSS changes like this are "Coloring outside the lines" and we can't officially support or help with issues regarding custom CSS. We're happy to show you what other users have done, but these aren't official features. If you run into issues, consider hiring someone to help, or not using CSS.
​
You can also check if your CSS is valid here:
​https://jigsaw.w3.org/css-validator/#validate_by_input

Although MemberVault lets you change your logo and colors easily in the general settings, we understand sometimes you want to take it to the NEXT LEVEL to customize your site.

As of version 1.2.1, we allow you to supply custom CSS and custom Javascript that your users will see.

While there are countless things you can do with CSS, I'll walk you through some of the most popular customizations:

.mv_product_list .mv_secondary_button {
display: none;
}

.mv_product_list .mv_product_(ID#) .mv_secondary_button {
display: none;
}

.mv_product_list .mv_product_(ID#) .mv_primary_button {
display: none;
}

*Note - for the Specific Product codes above, replace the (ID#) references (including the parentheses) with the product's ID # which can be located in your address bar when editing or viewing the product:

If you are recording a screen share to show someone your MV admin, but want to respect the privacy of email addresses, you can easily do that with custom CSS. Add this code to the Custom Admin CSS area:

.js_display_email {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

If you are comfortable in CSS, you might want to tweak certain things on certain pages, or certain buttons.

We have a handful of CSS classes that will allow you more control.

The combinations are literally endless.

Remember that CSS is a priority-based system and "cascades", so if you want to target broad changes, stick to Body and Section classes.

If you want to target specific products or elements you'll have to use Specific Classes.

.mv_logged_in - Body class for anyone logged into their account

.mv_not_logged_in - Body class for anyone NOT logged into their account

.mv_page_home - Your homepage, or marketplace. Where all of your products are listed

.mv_page_product - Any product page where you see the overview and all the modules

.mv_page_product_(PRODUCT ID) - Page of that specific product

.mv_page_module - Any module page where you see the content and list of lessons

.mv_page_module_(MODULE ID) - Page of that specific module

.mv_page_lesson_(LESSON ID) - Page of that specific lesson

.mv_product_list - The wrapper for a list of products

.mv_my_products - The wrapper for My products

.mv_available_products - The wrapper for Available products

.mv_product_item - The individual product card

.mv_product_(PRODUCT ID) - The product card for that specific product

.mv_announcement - The announcement bar (if you have it turned on)

.mv_welcome_area - The wrapper for your entire welcome area (if you have it turned on)

.mv_footer - The wrapper for the footer

.mv_primary_button - Any colored "main" button, such as sign up, mark as complete, or view module

.mv_secondary_button - Any outlined button, such as 'Learn More'

.mv_lesson_video - The lesson video container

.mv_lesson_download - The lesson downloads list

While WE can't help you in customizing CSS, we have some amazing Certified Partners who know MemberVault AND CSS and will be able to customize your account beyond what is typically seen.

Juci Kisistók: https://codeglitter.vipmembervault.com/

Gabrielle Chipeur: https://programs.gabriellechipeur.com/
​

​Questions? Reach out to us at hello@membervault.co, via chat support within your Admin account (available to paid users), or within our FB Group, The MV Collaborative.
​