CSS LearnDash LMS

Learndash Is one of the best, if not the best, WordPress LMS system. There are three other serious participants; LifterLMS, Tutor LMS and Sensei LMS. The CSS-code on this page is only for Learndash! What is a LMS? LMS means: Learning Management System.
Learndash is a plug-in for WordPress that gives a website the opportunity to create and present a digital learning experience to the visitor. Learndash is completely compatible with WooCommerce and multiple payment providers.

Adjust Learndash with CSS

CSS-adjustments in Learndash.

Although Learndash is an excellent LMS, it’s nearly always necessary to make some adjustments. Here is an overview of useful and fun CSS codes for Learndash. These are CSS codes that we apply ourselves to Learndash installations and that have proven their usefulness. Our CSS code often contains a color. This is only to ensure that the Learndash CSS-Code example works. You can replace the color code with a different color.

CSS codes for Learndash

Learndash lesson topic with a different color

This CSS code is ideal, if you want to like the class components a different color in the overview of lessons and class components.
/* Topic (les topic) different color */
.ld-topic-title {
color: #1E90FF !important;
}

Learndash lesson component (topic) change font-size

If you would like to give the class components a larger (or smaller) font in the overview of lessons and class components.
/* Topic (les topic) other font-size*/
.ld-topic-title {
font-size: 16px !important;
}

Learndash lesson with a different color

If you want to give the lessons a different color in the overview of lessons and topics.
/* lesson different color */
.ld-lesson-title {
color: #1E90FF !important;
}

Quiz Learndash different color

If you want to give the quizzes a different color in the overview of lessons and lessons.
/* Quiz different color */
.ld-text ld-primary-color {
color: #1E90FF !important;
}

Icon arrow different color

The overview had a small arrow icon that collapses, and shows all the topics. You can change the color. 
/* Color of the collapsable arrow icon - lessons */
.ld-icon-arrow-down {
color: #1E90FF !important;
}

Change lessons title to bold in the main view on the page

If you want to show the lessons Bold, in the main overview of lessons and topics.
/* show the lessons Bold, in the main overview  */
.ld-item-title {
font-weight: bold !important;
}

Resize quiz icon Learndash

If you would like to make the icon of the quizzes larger (or smaller) in the large overview of lessons and lessons.
/* Resize quiz icon Learndash */
.ld-icon-quiz {
 font-size: 20px !important;
}

Hide the link under image user profile

Below the profile of the user (top right) is a link as standard; You can remove this.
/* Hide the link under image user profile */
.mt-0  {
 color: #F4F6F6 !important;
}

Hide scrollbar in left list of the lessons

Learndash shows a scroll bar as standard. You can hide that with this code.
/* Hide scrollbar in left list of the lessons */
.learndash-wrapper .ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	overflow-y: hidden;
}

Hide the Avatar at the top right

Learndash shows an avatar as standard when focus fashion is active. This CSS code for hides that avatar.
/* HIDE AVATAR MENU (IN LESSON)*/
.ld-user-menu .ld-profile-avatar {
    display: none;
}

Replaces avatar with mobile menu

Learndash shows an avatar as default. This CSS code for Learndash shows a hamburger menu on that same location. This concerns the Learndash user menu only.
/* Replaces avatar with mobile menu */
.ld-user-menu::before {
    font-family: "Dashicons";
    content: "\f349";
    margin-left: 15px;
    color: red !important;
}

Hide breadcrumbs in Learndash lessons

Learndash shows the breadcrumbs in the lessons as standard. With this CSS code, no more…
/* Hide breadcrumbs in Learndash lessons */
.ld-breadcrumbs-segments{
display:none;
}

Customize the code to your liking!

Almost all the CSS code on this page can be changed for another purpose. If a CSS Snippet (piece of code) contains a target (class) and, for example, a font instruction, you can replace the CSS font instruction part with: display: none; To hide it, for example.
Example:
/* Change lessons title to bold in the main view on the page  */
.ld-item-title {font-weight: bold !important;}

Becomes:
/* Change lessons title to HIDE in the main view on the page  */
.ld-item-title {display:none;
}

Wil je meer weten over Learndash?

Learndash is een uitstekend Learning Management Systeem. Het is degelijk gebouwd, veelzijdig en volwassen. Zodanig dat het ook gebruikt wordt door grotere bedrijven en universiteiten. Je kunt met Learndash eigenlijk niet de fout ingaan! Wil je meer weten? Bezoek hun website!