ReadyLaunch™ Courses Template Customization

MemberPress Courses come with the ReadyLaunch™ Courses Template enabled by default. Also, the Courses add-on provides additional options for customizing the Courses Template.

This document shows you how to customize the ReadyLaunch™ Courses template and explains available options.

Template Customization

ReadyLaunch™ Courses Template is a full-screen template with its header, sidebar, footer, and styling.

The default customization options allow you to adjust the template to your needs and brand:

1. Navigate to Dashboard > MemberPress > Settings > ReadyLaunch™ tab.

2. Click the Customize link next to the Courses template name.
3. Apply the changes you need, and click the Update button to save the changes.

Courses Template Customization Options

The following options are available for the ReadyLaunch™ Courses Template customization: 

• Brand Color – set the background color of your courses’ navigation bar;
• Accent Color – set the accent color;
• Progress Bar – set the color of the progress bar showing a percentage of the student’s course progress. Also, this color will be applied to your courses’ curriculum;
• Menu Text Color – set the color of the menu item labels within your course menu;
• Logo – add a custom logo to your courses’ header. The logo will be positioned on the upper left side of your courses. It is recommended to use a horizontally designed logo (wide instead of tall);
• Lesson Button Location – position the continue/back buttons on your lesson pages. You can set the position to Top, Bottom, or Both.

Advanced Styling Options

Further, you can additionally style certain template elements by adding custom CSS code to your website.

To simplify this, you can assign custom classes to specific elements of the ReadyLaunch™ Courses Template. You can add custom classes to the following elements: 

• Complete Link CSS – assign custom CSS classes to the Complete Lesson/Section/Course links on your lesson pages;
• Previous Link CSS – assign custom CSS classes to the Previous Lesson/Section links on your lesson pages;
• Breadcrumb Link CSS – assign custom CSS classes to the breadcrumb links on your lesson pages.

Therefore, you can use custom classes to target these template elements and apply custom styling. You can add custom CSS to your custom classes through the theme Customizer (Dashboard > Appearance > Customize).

Note: The ReadyLaunch™ Courses template does not load your theme’s stylesheets or the stylesheets of other plugins, such as Elementor. CSS in your theme files does not apply to course and lesson pages. CSS added in Dashboard > Appearance > Customize > Additional CSS still applies. If a CSS change does not show, clear your site cache and your hosting cache, then reload the page. For Elementor or another page builder, see How to Edit Lessons with ReadyLaunch™ and a Page Builder.

The course sidebar has no custom class option. To style it, add CSS for these selectors in Additional CSS:

• #mpcs-sidebar: the course sidebar on course and lesson pages.
• #mpcs-sidebar .mpcs-section-title-text: the section titles in the sidebar.
• #mpcs-sidebar .mpcs-lesson-row-link: each lesson row in the sidebar. Rows of locked lessons are not links.
• #mpcs-sidebar .mpcs-lesson-link: the lesson icon and title in each row.

The course page uses the same classes for its list of sections and lessons. Start each selector with #mpcs-sidebar to style only the sidebar.

Courses on Phones and Tablets

ReadyLaunch™ course and lesson pages adjust to phone and tablet screens without extra settings. On screens up to 600 pixels wide, the course sidebar is hidden. Members open it with the menu button in the header and close it with the X button. On wider screens, the sidebar stays visible.

FSE Courses Template

The options above customize the default ReadyLaunch™ Courses template. In addition, MemberPress can register the Courses template as a Full Site Editing (FSE) block template.

With the MemberPress FSE mode enabled, the Courses row appears in the “ReadyLaunch™ FSE Templates” table. You can find the table at Dashboard > MemberPress > Settings > ReadyLaunch™ tab. Here, you can apply the Courses template and edit it in the WordPress Site Editor.

The Courses template uses its own header, the ReadyLaunch Courses Header template part. To edit it, click the header area within the template, and click Edit original.

The header part opens for editing. It contains the following blocks by default:

• Classroom Back Link;
• Site Logo;
• Site Title;
• Classroom Nav Menu;
• Preview As;
• Classroom Sidebar Toggle.

You can modify these blocks, remove them, or add new ones.

Further, the Classroom Shell block controls the course content area. Click the block to set the Classroom Colors: the brand color, the accent color, the sidebar background, and the link color.

The course content area renders on the front end only. The Site Editor shows a placeholder for it.

The FSE mode requires WordPress 6.7 or higher and an active block theme.