Oxygen Builder And LearnDash LMS Video Tutorial – Part 2 (CSS Selectors)

This is Part 2 of a two-part video tutorial on creating a simple online course using LearnDash LMS and the Oxygen Builder website building tool for WordPress. Let’s dive in.

In the previous lesson, we created the basic foundations for our course. We added the course content and configured payment settings. If you missed that lesson, you can always go back and view it here.

We will style our course using the Oxygen Builder plugin for WordPress (Stylesheet only) in this lesson. We’re going to add all of the LearnDash CSS selectors into our stylesheet.

If you’ve just arrived at this post and haven’t started building your online course yet, here is a rundown of the tools you will need:

1. Oxygen Builder (Theme builder plugin used in Part 1 and 2 of this tutorial. However, you can use any other theme that you wish.)
2. LearnDash LMS (Course creation plugin for WordPress)
3. Stripe For LearnDash (Integration plugin)
4. WPForms (Contact form plugin. This is optional)

As usual, if you prefer to watch the tutorial video below, feel free to do so.

Using CSS To Style Elements Of The LearnDash Course

OK, so we’re ready to customize the LearnDash course interactive elements such as the text, buttons, dividers, backgrounds, etc.

To save time, I’ve included a list of all the essential LearnDash CSS selectors you will need to modify each of the elements in your course. All you need to do is change the value. If you are not familiar with CSS, this could prove to be a small challenge for you. However, take your time and learn something new 🙂 If you need assistance, read the last paragraph in this post.

Headings

The CSS snippet below can be used to add some styles to heading elements for your course.

/* HEADINGS - The following text selectors will help you to customise the headings styles */

h2, h3 {
	font-family: “Open Sans“;
  	text-transform: uppercase;
  	line-height: 1.2em;
}

LearnDash CSS Selectors: Course Status And Progress Elements

The CSS snippet below can be used to add some styles to the course status and progress elements.

/* COURSE STATUS AND PROGRESS ELEMENTS 
-------------------*/
.learndash-wrapper .ld-course-status .ld-status.ld-status-progress {
	background: #6b6b6b;
}

.learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress {
	background: #6b6b6b;
}

LearnDash CSS Selectors: Take This Course Button Element

The CSS snippet below can be used to customize the ‘Take This Course’ button. Again, don’t forget to change the color hex values to match the style of your website. Check out this useful tool for finding HEX codes for CSS.

The first part of the code is for the static button. The second is for the hover effect.

/* TAKE THIS COURSE BUTTON
-------------------------*/
.learndash-wrapper #btn-join, .learndash-wrapper .btn-join {
	background-color: #6b6b6b;
  	border-radius: 0;
}

.learndash-wrapper .btn-join:hover, .learndash-wrapper #btn-join:hover {
	background-color: #6b6b6b;
}

Expand All Element

The Expand All interactive element opens up the course content table. If you would like to customize the Expand All button, use the CSS snippet below.

/* EXPAND ALL BUTTON
-------------------*/
.learndash-wrapper .ld-expand-button {
	background-color: #6b6b6b;
  	border-radius: 0;
}

.learndash-wrapper .ld-expand-button:hover {
	background-color: #6b6b6b;
}

Mark Complete Button

The Mark Complete button usually pulls the CSS from the primary buttons CSS. However, if you would like to adjust the border radius, here is the snippet for this:

/* MARK COMPLETE BUTTON
-----------------------*/
.learndash-wrapper #learndash_mark_complete_button, .learndash-wrapper .learndash_mark_complete_button {
	border-radius: 0;
}

Next Lesson Button Element

The following CSS snippet can customize the background color and border radius of the ‘Next Lesson’ button element. Don’t forget to change each HEX color value, including the hover button effect.

/* NEXT LESSON BUTTON - The code below can be used to customize the ‘Next Lesson’ buttons. */

.learndash-wrapper .ld-button {
	background-color: #6b6b6b;
  	border-radius: 0;
}

.learndash-wrapper .ld-button:hover {
  	background-color: #6b6b6b;
}

Quiz Button And Quiz Results

The following CSS snippet will enable you to modify the CSS values for the Quiz Button and Quiz Results elements.

/* QUIZ BUTTON 
-------------*/
.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_button,
.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_button2 {
	background-color: #6b6b6b;
  	border-radius: 0;
}

.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_button:hover,
.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_button2:hover {
	background-color: #494949;
}

.learndash-wrapper
.ld-quiz-actions input[name="reShowQuestion"],
.learndash-wrapper
.ld-quiz-actions input[name="restartQuiz"] {
	background: #6b6b6b;
}


/* QUIZ RESULTS CSS 
------------------*/
.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_questionListItem 
.wpProQuiz_answerCorrect label {
	background: #6b6b6b;
}

.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_questionListItem label.is-selected,
.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_questionListItem label:focus-within {
	border-color: #494949;
}

.learndash-wrapper
.wpProQuiz_content
.wpProQuiz_questionListItem 
.wpProQuiz_answerCorrectIncomplete label {
	border-color: #494949;
}

Other Essential Elements

OK, so we’re almost done with all of the key CSS components for modifying each of the LearnDash elements. Now, here are a few other essential interactive elements that you may wish to customize with CSS.

/* COURSE CONTENT HEADER 
-----------------------*/
.learndash-wrapper
.ld-table-list
.ld-table-list-header {
	background-color: #707070;
}


/* EXPAND LINK 
--------------*/
.learndash-wrapper
.ld-expand-button 
.ld-button-alternate
.ld-icon {
	background: #fcb045;
}

.learndash-wrapper
.ld-expand-button 
.ld-button-alternate {
	color: #fcb045;
}


/* COURSE MATERIALS
------------------*/
.learndash-wrapper
.ld-tabs 
.ld-tabs-navigation 
.ld-tab.ld-active {
	color: #fcb045;
}

.learndash-wrapper 
.ld-tabs 
.ld-tabs-navigation
.ld-tab.ld-active:after {
	background: #fcb045;
}

It’s A Wrap!

Literally, it’s a wrap! You have most of the LearnDash CSS selectors you need on this page to customize your course and make the site look exactly how you’d like it to look.

As I mentioned in the video, the Oxygen Builder plugin allows you to customize all global elements such as the website header and footer, landing page design, etc. However, many of the elements within LearnDash do not have simple design options like this.

I Need Assistance!

If you get stuck and require some assistance, or perhaps you need your entire course design and layout is taken care of, check out my design services page here. I also offer WordPress consultation and we can go through it together. Click here for more information.