Customizing Colors and Styles in Courses

Courses for MemberMouse includes a number of options that allow you to control the experience of your learners. By default, Courses presents your content in a customizable, self-contained interface. Developers and advanced users may disable this interface and style their using CSS and their theme.

To change these options, select MemberMouse > Courses, and at the top of the screen, click Settings.

Classroom Mode

The included self-contained interface for Courses is called Classroom Mode. It includes a variety of templates:

  • Courses List
  • Course Overview
  • Lesson Content

Here's an example of a Course Overview:

If Classroom Mode is disabled, styling for these pages will be dictated by the WordPress theme, which governs the overall appearance of your site. Theme styling varies widely, so it's difficult to provide a representative screenshot, but you will note that it contains familiar site elements, such as the header, site menus and navigation, sidebars, and so forth:

Advanced users can customize the appearance of their theme and add CSS to style Courses elements in the Appearance > Customize admin panel menu.

Classroom Mode Settings

When Classroom Mode is enabled, Courses for MemberMouse provides options to customize the interface. Set these options as desired, and click Save Settings at the bottom to apply your changes.

Classroom Mode Enable or disable Classroom Mode
Color OptionsSelect colors for your brand, accents, the progress indicator, and menu text. Clicking Select Color displays a color picker:

Classroom LogoChoose a logo to be displayed at the top-left corner of the interface. Clicking Select Image opens the standard WordPress media selector. You may select an existing image, such as your site logo, or upload a custom image.
Lesson Button LocationSpecify the location of the navigation buttons that allow learners to advance to the next lesson, or return to the previous lesson:
Top – Displayed in the header menu bar 
Bottom – Displayed underneath lesson content 
Both – Displayed in both locations 
Link CSSOptionally enter a CSS class to apply to the complete lesson, previous lesson, and breadcrumb links. This feature may be used by developers in concert with WP Footer Hook apply custom styling to the interface.

WP Footer HookEnable this option to execute the wp_footer action after rendering the interface. By default, Classroom Mode completely bypasses your WordPress theme. This offers the best performance, but doesn't any opportunity for other plugins to load the libraries they need.

For example, the MemberMouse Member Link and Purchase Link SmartTags™ require additional scripts and libraries to function properly, so if you wish to use these SmartTags™ in your courses, you should enable this option.

Developers and advanced users may also write custom code to load additional scripts, styles, and libraries to customize Courses or provide additional functionality.
Was this article helpful?

Related Articles

Can’t find the answer you’re looking for?

Reach out to our Customer Success Team
Contact us!