Custom CSS Code for LearnPress LMS

Create custom CSS code for LearnPress LMS without having to buy expensive plugins like CSSHero. I tried CSSHero with LearnPress but it did not work well for me. Sometimes it would create only half the code or mostly, no code at all. Consequently, I began using Developer Tools in Chrome and with a little patience, I’ve created dozens of customized CSS coding snippets for the LearnPress LMS plugin that helped make my LMS website much more pleasing to the visitor and student.

I’ve been using the LearnPress LMS plugin by ThimPress since 2018 and found LearnPress to be the most affordable alternative to Teachable, Udemy, and other similar LMS providers. I first began using Teachable as it provided the visual insight I needed to build an LMS website. It’s a format that all online LMS websites follow. Considering that LearnPress is a free open source plugin, I began using LearnPress and stopped using Teachable.

To use the free LearnPress plugin to sell courses to students, I recommend purchasing additional WooCommerce and Stripe plugins, which are sold by ThimPress. These plugins help you easily set up the payment gateway and the plugins provide a recognizable and familiar online purchasing experience.

I no longer use the Course Builder ThimPress theme as I found it to be slow and buggy. Over a few years, ThimPress support created over a dozen snippets of CSS just to make the theme look and run like their demo. So in late 2023, I stopped using Course Builder and began using Total WordPress theme by WPExplorer. I’ve been using Total since 2014 on various other work-related websites I’ve created, and it’s a flawless and extremely versatile theme. The theme’s developer writes clean code and he provides friendly free support too.

I’m not a developer, but just a self-employed person who has over 30-years’ experience creating websites. I wanted to share my experiences and provide some customized CSS code that I created for my LearnPress LMS website to help anyone else looking to create an online LMS classroom using LearnPress.

Here is a list of services, themes, and plugins used to make this website run well.

Hostinger Managed Cloud WordPress Hosting (formerly using Cloudways)
2 CPU Cores, 3GB Ram, 200 GB NVMe Storage; Free CDN, Free SLL, Free Daily Backup, Free On-Demand Backup, Free LiteSpeed Cache, Enhanced DDoS Protection, Up to 100 Websites, more.
About $215 per year. 55% discount first 2 year for new accounts when paid in full.

Total by WPExplorer WordPress Theme
One time purchase of $59 and 6 months of free support. Continued support is very affordable, but the developer will always help you whether you’ve paid for support or not.

WPBakery
WPBakery comes free with the Total WordPress theme by WPExplorer and it’s primarily used on the home page and any other pages not associated with LearnPress. I do not have WPBakery activated on any LearnPress courses pages as LearnPress is more stable, and displays better as a stand-alone. To change the size of LearnPress fonts or tables, I implement custom CSS code which I’ve provided below.

LearnPress LMS Plugin by ThimPress
Free LMS plugin. Requires the purchasing of additional plugins so visitors can make course purchases.

WooCommerce Shopping Cart
This is a free open source plugin that you can install through your WordPress admin plugin panel. You’ll also want to be sure to either activate or download the free Stripe plugin if you’re going to be processing payments through Stripe.

WooCommerce LearnPress Payments Integration Plugin
One time purchase of $49 and 12 months of support. This plugin integrates WooCommerce with LearnPress so that students can purchase your course(s). This is a must-have as WooCommerce is an online purchasing format that’s recognizable and widely trusted. And take it from this experienced amateur website builder, both WooCommerce and the LearnPress payments plugin will make your life a lot easier. Plugin updates will cost you a small fee, and are needed every 2-3 years.

LearnPress Gradebook Plugin
First purchase of $39 and 12 months of free support and upgrades. I primarily bought the plugin so I could monitor students’ progress and see which lessons a student has or has not studied. This was important as I discovered that students who complained about receiving a low grade did not study all of the lessons; students complained about the course when in fact, they did not study. This plugin made this type of information invaluable to me. It costs $27 to update the plugin in 2024 but the plugin only needs to be updated every 2-3 years.

WATU Quiz Plugin
Although LearnPress includes a quiz feature, the quizzes are only viewable within each of the lessons. This free quiz plugin allows you to create additional stand-alone quizzes that are still only accessible to paying customers.

Link to all LearnPress plugins/addons

Yoast SEO Plugin
Must-have free SEO plugin to get your website indexed by all of the search engines. The free version works great for me, but I am considering subscribing annually for $120 to obtain for more SEO features. Use the free version at first and then upgrade when/if you feel the need to.

Wordfence Security
This free security plugin is a must have to protect your website from hackers and brute force attacks. I originally chose to subscribe to the premium version for about $119 annually to primarily stop brute force attacks and hacking attempts. You will become a target once your classroom becomes active and the paid version allows you to block countries too. After moving my hosting over to Hostinger, I no longer need to use the Wordfence plugin as Hostinger has built-in protection.

Site Kit by Google
Site Kit is a must-have to use along with a Google analytics account. Site Kit and a Google account should be set up and activated after your website is completely finished including all pages, lessons, Yoast SEO keywords, everything. Once your website is ready to go live, then you connect Site Kit to your Google Search Console and Analytics and submit your sitemap.

LearnPress CSS Code

This is a list of custom CSS coding I implement to make the LearnPress plugin look the way it does. You cannot control the size of fonts, tabs, display boxes, etc. in LearnPress unless you use a ThimPress theme or a third-part theme. And that’s not a guarantee everything will work. As previously mentioned, I found it extremely difficult, if not impossible, to make a ThimPress theme display properly so I opted to use Total WordPress theme by WPExplorer and implemented custom CSS to control how LearnPress is displayed on my LMS website.

Using CSS will not break your website. CSS is safe to use but if you do not feel comfortable with CSS, or if you don’t know that CSS is short for Cascading Style Sheets, then definitely proceed with caution. If any of this CSS causes your website to display oddly, then the issue is with your theme reacting to the CSS. Remember that I am using Total WordPress Theme by WPExplorer which, in my opinion, is the best third-party WordPress theme to use with LearnPress.

I access my WordPress CSS via: Theme Panel> Custom CSS. You can also access via: Appearance> Customize> (scroll down)> Additional CSS.

Note: The /* context wording */ notes before each block of code describes what each block does. The slashes and asterisks must remain to “hide” the notes but you can remove the notes as well. I leave them in place for easy reference.

/* makes woocommerce checkout thumbnail bigger */
table.cart img {
max-width: 100px;
}

/* all of the code below pertains to the LearnPress plugin only */

/* hides breadcrumbs in header */
.learn-press-breadcrumb{
display: none;
}

/* hides Materials tab */
.learn-press-nav-tabs .course-nav-tab-materials {
display: none;
}

/* adds padding to bottom of my login page */
.wpb-content-wrapper {
padding-bottom: 10%;
}

/* adjusts spacing to the bottom of the course page only */
.learn-press-courses .course {
margin: 0 0 120px 0;

/* moves quiz next/prev links and numbers from bottom margin of the LearnPress quizzes and places them closer under the quizzes */
#popup-course #popup-content #learn-press-quiz-app
.quiz-buttons.align-center
.button-left.fixed{
position:relative;
left:unset;
transform:unset;
margin-left:0 !important;
}

/* adjusts font size in left menu */
.section-item-link .item-name {
font-size: 17px !important;
}

/* adjusts font size on course page only */
.course-content .course-title {
font-size: 27px !important;
line-height: 20px;
}

/* adjusts font size of left menu course title */
.section-header {
font-size: 16px
}

/* adjusts font size in each course page lesson titles */
.content-item-wrap .course-item-title {
font-size: 25px
}

/* adjusts font size in each page lesson */
.lesson-description {
font-size: 20px;
}

/* adjusts font size for course tabs */
.course-nav-tabs {
font-size: 18px
}

/* adjusts size of student profile avatar made smaller */
.lp-user-profile .lp-profile-left {
min-width: 120px; max-width: 120px;
}

/* adjusts profile header size */
.lp-user-profile .wrapper-profile-header .lp-profile-content-area {
padding: 20px 15px;
}

/* adjusts font & header size in profile menu below tabs */
.dashboard-statistic_row {
font-size: 16px; min-height: 30px;
}

/* adjusts font size below the profile menu tabs */
.learn-press-course-tab-filters .learn-press-filters {
font-size: 16px;
}

/* adjusts font size in course progress */
.learn-press-profile-course__progress .lp_profile_course_progress__header {
font-size: 18px;
}

/* adjusts bottom profile progress */
.learn-press-profile-course__progress .lp_profile_course_progress__item td {
text-align: center; font-size: 16px; line-height: 1; border: 0.5px solid #ccc; padding: 08px; vertical-align: top;
}
.learn-press-profile-course__progress .lp_profile_course_progress__header {
background: var(–lp-primary-color); font-size: 16px;
}

/* adjusts font size for student profile tab */
.lp-user-profile #profile-nav .lp-profile-nav-tabs {
font-size: 18px;
}
.learn-press-filters {
font-size: 18px;
}

/* adjusts font size in profile course results */
.lp-profile-content table.lp-list-table {
font-size: 16px;
}

/* adjusts font size profile settings pages */
.lp-user-profile .lp-profile-content {
font-size: 17px;
}

/* adds a little spacing to top of LP submit quiz button */
#popup-content .lp-button.submit-quiz {
margin-top: 20px
}