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.

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:d

Using a background image on your login page.

First, simply go to Settings -> General and scroll to the bottom.  Expand the group called "Advanced".


You can enter your CSS classes and definitions right here in the Custom CSS area.  These will override the MemberVault defaults in the user view. If you want to apply any CSS to your admin view, please place that CSS in the Custom Admin CSS.  If you are not comfortable with CSS, any website developer should be able to help you, or ping us and we'll help you out.

For this example, the code we are using here will set the background image of the login page, center it, and set it to cover the entire screen.  This code needs to be placed in the Custom CSS area. You can simply replace the URL of the image YOU want to use here.

Please note that the image URL cannot be a google drive or dropbox link, it needs to be a "native" image.  You can either upload this image to your website and grab the URL, OR upload the image as a lesson file and grab the URL there too.

.login-body{
background-image: url(' put the url of your image here ');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
}

* You can change background-position to decide what part of the image gets cut off as you resize your browser.  You can choose any of the following.  (left top, left center, left bottom, right top, right center, right, bottom, center top, center center, center bottom)


If you want to hide the login banner too, simply add this code.

.login-body .form-heading{
opacity:0;
}

  • You can set the opacity to any value 0 - 1 to make it transparent.  (ex. opacity:0.5;would be 50% faded)

If you want to hide the background color behind the logo area, add this code.

.login-body .login-logo{
background: none;
}

Simply save these advanced settings, and log out to see your new login page!

Increase the Size of Your Logo on Your Login Screen

By default, the logo area on the login screen is rather small which isn't ideal for some logos. You can amend the size somewhat by adding this line of code to the Custom CSS area in your settings:

.login-logo .logo_inside {
max-height: 90px;
max-width: 330px;
}

Just amend the height & width sizes to work best for your logo and login screen. 

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.

**********************

.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_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_(PRODUCT ID) - The wrapper for any content inside that product

**********************

.mv_product_view - Page that displays when you click into the product

.mv_module_view - Page that displays when you click into the module

.mv_module_(MODULE ID) - The wrapper for any content inside that module

**********************

.mv_lesson_video - The lesson video container

.mv_lesson_text - The lesson text container

.mv_lesson_download - The lesson downloads container

.mv_lesson_activity - The lesson activity container

.mv_lesson_questions - The lesson question container

.mv_lesson_(LESSON ID) - The wrapper for any content inside that lesson

**********************

.mv_buy_button - The Buy or Sign Up button for any product

.mv_buy_button_(PRODUCT ID) - The Buy button of that product ID.  (ex. mv_buy_button_10)

.mv_product_stats - stats block for the product

**********************
You can combine many of these tags to target specific things. So you can call:

.mv_lesson_1.mv_lesson_text {....}

if you just want to target just lesson text section of just lesson 1. Orrr you could call:

.mv_module_3 .mv_lesson_text {....}

if you wanted to affect ALL lesson text areas inside one module.

Need to dig deeper?

https://www.useloom.com/share/1e8fb802032945d391f37ac82975e0f3

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