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 one of the most popular customizations:

Hide all Learn More Buttons

.mv_product_list .mv_secondary_button {
display: none;
}

Hide Learn More for a Specific Product

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

Hide Buy for a Specific Product

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

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

 

Blur Out Email Addresses in Admin

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);
}

Custom CSS Classes

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.

Body 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


Section Classes

.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 wrapped for your entire welcome area (if you have it turned on)

.mv_footer - The wrapper for the footer


Element Classes

.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


Need Help?

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/


Need to dig deeper?


And check out this article on how to customize your button text.