The MemberMouse plugin is designed to be as agnostic as possible to your theme, so that switching from one theme to another should require little or not updating at all to the MemberMouse elements on your site. But you may want to apply more specific classes to certain areas of your site.




Styling Core Pages


When you install and activate MemberMouse on your website, you will see that a set of pages are created. These are core pages. Read this article to learn more about core pages. core pages are MemberMouse specific pages that come equipped with useful SmartTags to help create an easy way for your membership site to function.


There are a total of 9 core pages that members will utilize regardless of the users access rights or purchased product. You can create additional core pages that can be customized for a dynamic user experience for your members. Many of these core pages come with specific stylesheets with CSS settings that are specific to that particular page. They include:


  • Checkout core page

  • Login core page

  • My Account core page

  • Forgot Password core page


Locating the CSS stylesheet reference


**Please Note - As of MM v2.2.0, you can use the built in CSS Stylesheets.  If you are doing that, or first loaded MM on v2.2.0 or higher, then read this article.


You can see this stylesheet reference in the core pages listed above by:

  1. From the WordPress Dashboard, click Pages.

  2. On the Pages section, you will see a listing of all your WordPress pages. When MemberMouse is installed, you will have filters above the list that allow you to view only the core pages:




  3. The listing can help you identify which core pages are the default core pages for all users:





    Under the core Page Type column, you will see the type of core page, as well as if the page is the default for all users. If the flag icon (  ) appears next to the core Page Type, then this page is the default page. The default page will be used for any member that does not have a different core page assigned to their membership level or product bundle.

  4. Hover over the page you want to edit. You will see a list of options. You will want to click on edit:


  5. Once editing the page, you will want to locate the CSS reference in the WYWSIWYG. Be sure you are in 'text' edit mode' to properly view and edit the code:





  6. The CSS reference will look like this:

    <link rel='stylesheet' type='text/css' href='http://www.yourURL.com/wp-content/plugins/membermouse/resources/css/user/mm-checkout.css' />

Editing the default CSS stylesheet location


One option to styling your pages is to copy the MemberMouse CSS stylesheets (click here to see the available stylesheets to download). Then, you can change the CSS reference in your core page code to reflect the location of this new stylesheet, like this:

 <link rel='stylesheet' type='text/css'
href='http//:www.yourURL.com/sitespecifics/customestylesheet.css'
/>


Editing the MemberMouse stylesheets


NOTE: One of the best ways to see what this code is actually displaying is to use the Element Inspector view in your browser. If you are not familiar with how to use the Element Inspector, then read this article for Google Chrome, or this article for Firefox.

You always have the option to edit the CSS stylesheets provided by MemberMouse to fit your needs. For this example, we will look at the stylesheet used on the Checkout core page.

Here is a section of the Checkout page code:

[MM_Form_Section type='accountInfo']
<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
<h3>Account Information</h3>
<p class="mm-formField">
 <label>First Name:</label>
 [MM_Form_Field type='input' name='firstName']
</p>

When you open the element inspector, you can use it to locate any of the div IDs or classes that you see in the code on your page. In the sample below, I have located the div id="mm-account-information-section" which has the class "mm-checkoutInfoBlock" applied to it:




If we wanted to apply a background color, then in the mm-checkout.css stylesheet, we would just add:


background-color: #333;


to the stylesheet. This type of editing is available for any CSS property you want to apply. You can also look to remove CSS classes if you like.



Using Custom Classes on SmartTags


If you would rather apply already created classes to your core pages, you can do that as well. This is a great option if your theme has already prepared CSS classes that you can just look to reuse. NOTE: If you are not familiar with how CSS classes are used in HTML, please read this article.

To use a custom CSS class, you must know the name of the class you are looking to use.  Once you do, simply look at the code of your core page (via these steps)   Then, when you know the element that you want to change, just replace the existing class:

<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
 
with your new CSS class

<div id="mm-account-information-section" class="myownclass">


Using MemberMouse Button Styles


When MemberMouse is activated on your website you'll get access to over 60 web 2.0 button styles.  Read this article to learn how to utilize these button styles on your site.


CSS Stylesheet Samples


Below are links to the CSS stylesheets used on specific core pages and in the protected content widget: