Guide to Styling the CSS of Core Pages and Widgets

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 no 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. This article serves to help you locate and style the MemberMouse core pages and widgets.

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
  
  
• Reset Password core page
  

Core Page Built-in CSS Settings

By default in a new install of MemberMouse, the CSS stylesheets for the five core pages listed above is controlled automatically by MemberMouse.

If you are having an issue with any of these core pages displaying correctly (for example there is only 1 column, or the Paypal button is not displaying), then you will want to check that MemberMouse is loading the stylesheet.

Follow the steps below to activate or deactivate MemberMouse from including your core page CSS Stylesheets automatically:

1. From the MemberMouse menu go to General Settings, and then click on the Other Settings tab.
   
   
2. Scroll down to the Core Page CSS Settings section.
   
   
3. If the checkbox next to the core page is active, then MemberMouse should be loading the CSS Stylesheet for that page automatically:
   
   
   
   
4. If you want to deactivate the stylesheet from being loaded (so you can apply your own custom styles), then uncheck the box.

Locating the CSS stylesheet reference

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

Another option to styling your pages is to copy the MemberMouse CSS stylesheets. The final section of this article has the links to 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:

• Checkout core page – mm-checkout.css
  
• Login core page – mm-login.css
  
• My Account core page – mm-myaccount.css
  
• Forgot Password core page – mm-forgotpassword.css
  
• Protected Content Widget – mm-protectedcontentwidget.css
  
• All CSS Files Zip – mm-stylesheets.zip