Customize LearnDash Button Styles with CSS (Class/ID Names)

Prajwal — If you purchased our Design Upgrade Pro for LearnDash plugin, please send an email to support@escapecreative.com with a link to a quiz page that we can access (might need to create a login & give us access to the course/quiz). Also include the email you used to purchase the plugin. I’m not seeing the email you submitted here in our system.

Thanks.

Add this CSS to your child theme’s style.css file, or the “Additional CSS” area of the Customizer.

.ld-icon-arrow-left,
.ld-icon-arrow-right {
    display: none;
}

Pete — Please see Meredith’s code below. She has provided the CSS for the course grid buttons, as well as the enrolled ribbons. Each different type of ribbon requires slightly different CSS, so you’ll need to be more specific with which types of ribbons you want to change the color for. If you can provide a link to your course grid, I can help you with the CSS.

Well, the ideal solution is to have the entire box be an <a> instead of a <div>, but LearnDash uses a <div>. You could dig through the template files, locate the template for the [ld_course_list], and modify the HTML code that LearnDash outputs. But that’s tedious and you should have some dev skills if you go that route (I’m not assuming you don’t, just putting it out there 🙂).

The other way would be to use JavaScript to make the entire <div> clickable.

If your theme (or another plugin you’re already using) is already loading jQuery, you can use this code.

If your theme doesn’t load jQuery, you could use plain JavaScript. I’d probably insert this into a Custom HTML block at the top of the page that contains your course grid. But you could put it anywhere you have other JavaScript on your site.

<script>document.addEventListener("DOMContentLoaded", function() {
    // get all dom elements with class ".thumbnail.course"
    var aFeatures = document.querySelectorAll(".thumbnail.course");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].addEventListener('click', function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        });
    }
});</script>

And then you'd also probably want to use this CSS to make your cursor change to a pointing hand on hover.

.ld-course-list-items div.ld_course_grid .thumbnail.course {
    cursor: pointer;
}

I tested it out and it works for me, using the Astra theme. Let me know if it works for you.

Customizer > Additional CSS is the correct place, but I think the problem is Divi. Ugh, Divi. For some unknown reason, they modify the LearnDash class names that get output.

Try this CSS instead:

#et-boc .ld_course_grid .thumbnail {
    cursor: pointer;
}

Yes, Divi is bad. Certainly this is my subjective opinion, but it’s an opinion shared by many other WordPress professionals. Elementor is a far superior page builder. Also, I highly recommend only using one page builder per site. Using two different builders could open up a world of compatibility issues, not to mention the potential to really slow your site down.

To remove the button in the course grid, you can use the following CSS:

#et-boc .ld_course_grid .thumbnail a.btn,
.ld_course_grid .thumbnail a.btn {
    display: none;
}

Here’s the CSS to change the “See more” button in the LearnDash course grid. The first part is the default state. The second part is the hover state.

.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn {
	background: #000;
	color: #fff;
}
.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn:hover {
	background: #fff;
	color: #000;
}

Are you using Focus Mode? I assume you want to hide the “Mark Complete” buttons in both the header AND at the bottom of the lesson?

For #2, you can add this CSS to the Customizer in the “Additional CSS” area. Adjust the pixel values to your likely.

/* Lessons */
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading {
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Topics */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview {
	padding-top: 6px;
	padding-bottom: 6px;
}

Sorry Peter but I don’t have the time right now to go through all that CSS. It’s possible that some of the code in this article no longer works because it was written before LearnDash upgraded to 3.0, which changed many of their class/ID names.

You can use the “Inspect Element” in your browser to locate the CSS rules being applied, copy them, update them, and then put the new CSS in your “Additional CSS” in the Customizer.

What are you using for your registration form? Are you using the LearnDash popup or something else? Can you post a screenshot or a link to your register page?

The default LearnDash design uses white text on a transparent background, with a 5px white border. If that’s not what you are seeing, you must be using a plugin or custom CSS that is changing it.

Just using the default LearnDash styles, this CSS will target that button. The first part is the default style and the second piece of code is for when it’s hovered. Change the colors and border size as you wish.

.learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit {
    background-color: #000;
    color: #fff;
    border: 3px solid red;
}
.learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit:hover {
    background-color: #fff;
    color: #000;
    border: 3px solid red;
}

Hi ed – You can do that with this custom CSS. Add it to Appearance > Customize > Additional CSS in your WordPress admin area.

.learndash-wrapper .ld-button, .learndash-wrapper .ld-expand-button, .learndash-wrapper .btn-join, .learndash-wrapper #btn-join, .learndash-wrapper .learndash_mark_complete_button, .learndash-wrapper #learndash_mark_complete_button, .learndash-wrapper .ld-login-modal .ld-button, .learndash-wrapper .ld-login-modal input[type=submit], .learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit, .learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields .ld-item-search-submit .ld-button, body div.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary, .learndash-resume-button input[type=submit], .learndash-wrapper .ld-login-button, .learndash-reset-form .learndash-reset-button[type=submit], .learndash-wrapper .ld-focus-comment .ld-comment-reply a.comment-reply-link, .learndash-wrapper .ld-focus-comments .form-submit #submit {
	border-radius: 0;
}

I’d need to see one of your course pages. I don’t know what button you’re referring to. I just looked at your site, straightforwardpiano.com/courses/the-fyodor-method-free-trial-course/, and everything is centered for me.

If you can post a link to the page and show me a screenshot of what isn’t centered, I might be able to help.

Hi Puneet. The “Register” button uses the text & bg colors for the registration panel. It just reverses them. So the background color becomes the text color and text color becomes the background color.

If you want to just change that button, I can give you some custom CSS. However, do you want to just change the “Register” button, or do you also want to change the “Register an Account” button that shows up before the form is displayed? The CSS is different for each.

OK. Use this CSS:

.learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit {
    background: yellow;
    color: black;
}
.learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit:hover {
    background: black;
    color: yellow;
}

Which lessons display? What page is it on or what shortcode/block are you using?

There is likely a way to change it with CSS but this would require custom code.

Hi Zoya,

Yes, you can use our premium plugin to change the background color of the course contents table, along with 100 other design options. Design Upgrade Pro for LearnDash →

If you don’t want to use the plugin, you can change it with custom CSS.

Hi Paige – No, CSS is for style changes only. For text changes, you would use a translation plugin like Loco Translate, or a text change plugin like Say What?.

Hi Desiree,

The Uncanny Toolkit login is different from the WordPress login… which is different from the LearnDash login. They all use their own unique HTML & CSS, so the CSS to change each of them is different. I’d need to know exactly which one you’re using to be able to help.

If your login page is publicly viewable, please post a link and I’ll see if I can help you.

A few things I see with your code:

1. text-decoration-color is for text that has an underline, and usually, it’s not needed. The underline is the same color as the text itself, by default.

2. Your code has nothing for the icon. You’ll need additional CSS to change the icon color.

3. The background color variable is using the wrong syntax. All variables start with two dashes. var(–-ldx-alert-success-color-bg)

That’s about all the help I can provide here for free. If you’d like me to take a look at your site and fix the code directly on there, I can do that for a small fee. Shoot me an email: dave@escapecreative.com

Hi Kathleen,

This CSS code should work. Change the 300px value to whatever width you want the button to be. Add this code to Appearance > Customize > Additional CSS.

.learndash-wrapper .learndash_mark_complete_button {
	max-width: unset;
	width: 300px;
}

That’s because you’re using my plugin, Design Upgrade for LearnDash. Replace the previous code with this code:

body .learndash-wrapper #learndash-registration-wrapper #learndash_registerform #wp-submit {
    background: orange;
}
body .learndash-wrapper #learndash-registration-wrapper #learndash_registerform #wp-submit:hover {
    background: red;
}

And yes, in the Additional CSS area.