LearnDash Design & Tutorials

LearnDash Design & Tutorials

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

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

If you’re using LearnDash for your LMS, you probably know that there are buttons that perform all kinds of different functions. From navigation and payment to quiz actions, completing tasks & downloading certificates. Buttons galore!

By default, not every LearnDash button looks the same. When I built Design Upgrade for LearnDash, I went through every line of CSS to find every LearnDash button style, and I’ve compiled them all for you right here, in one convenient place.

If you’re looking to change any LearnDash button style, chances are you’ll find it here.

LearnDash Button Types

Because I didn’t want to have 10+ buttons all looking different from each other, I decided to split them up into two groups:

  • Standard Buttons – all buttons that do not indicate a primary or important action to be taken
  • Primary Buttons – all buttons that do indicate a primary action

Most, but not all, of the class & ID names you’ll see below give you an idea what the buttons are used for. Some are a little more vague.

If you’re feeling extra spicy, feel free to break out each button and style it differently. But please be careful. Having a bunch of different styles ruins consistency… and users love consistent, predictable patterns. Be nice to your users 🙂.

Button States

You can separate out all the :hover, :active & :focus styles, if you’d like to use a hover effect. For simplicity’s sake, I kept them all together.

And obviously, please change the colors & experiment with whatever button styles match your theme.

Where to Put the CSS

The following CSS code should go in one of two places:

  1. If you’re using a child theme, or know how to create one, place this code in the style.css file of your child theme. (recommended)
  2. If not, navigate to Appearance > Customize > Additional CSS, and place the following code in there.

LearnDash Standard Button Styles

These are buttons used for navigation (previous/next lesson, etc.), returning to a page, general quiz buttons, and anything else that indicates a non-primary action.

.learndash #learndash_next_prev_link a.next-link,
.learndash #learndash_next_prev_link a.prev-link,
.learndash #learndash_next_prev_link a.next-link:hover,
.learndash #learndash_next_prev_link a.prev-link:hover,
.learndash #learndash_next_prev_link a.next-link:active,
.learndash #learndash_next_prev_link a.prev-link:active,
.learndash #learndash_next_prev_link a.next-link:focus,
.learndash #learndash_next_prev_link a.prev-link:focus,
.learndash #learndash_back_to_lesson a,
.learndash #learndash_back_to_lesson a:hover,
.learndash #learndash_back_to_lesson a:active,
.learndash #learndash_back_to_lesson a:focus,
.learndash .wpProQuiz_button[name="reShowQuestion"],
.learndash .wpProQuiz_button[name="reShowQuestion"]:hover,
.learndash .wpProQuiz_button[name="reShowQuestion"]:active,
.learndash .wpProQuiz_button[name="reShowQuestion"]:focus,
div.wpProQuiz_quiz .wpProQuiz_button,
div.wpProQuiz_quiz .wpProQuiz_button:hover,
div.wpProQuiz_quiz .wpProQuiz_button:focus,
div.wpProQuiz_quiz .wpProQuiz_button:active,
div.wpProQuiz_content .wpProQuiz_button2,
div.wpProQuiz_content .wpProQuiz_button2:hover,
div.wpProQuiz_content .wpProQuiz_button2:active,
div.wpProQuiz_content .wpProQuiz_button2:focus {
	background: #000;
	color: #fff;
	border: 2px solid #000;
}

LearnDash Primary Button Styles

These includes buttons for marking items complete, joining things, making payments, downloading things and other primary actions.

.learndash .learndash_join_button .btn-join,
.learndash .learndash_join_button #btn-join,
.learndash .learndash_join_button .btn-join:hover,
.learndash .learndash_join_button #btn-join:hover,
.learndash .learndash_join_button .btn-join:active,
.learndash .learndash_join_button #btn-join:active,
.learndash .learndash_join_button .btn-join:focus,
.learndash .learndash_join_button #btn-join:focus,
.learndash_checkout_buttons input.btn-join[type="button"],
.learndash_checkout_button input[type="submit"],
.learndash_checkout_buttons input.btn-join[type="button"]:hover,
.learndash_checkout_button input[type="submit"]:hover,
.learndash_checkout_buttons input.btn-join[type="button"]:active,
.learndash_checkout_button input[type="submit"]:active,
.learndash_checkout_buttons input.btn-join[type="button"]:focus,
.learndash_checkout_button input[type="submit"]:focus,
#sfwd-mark-complete #learndash_mark_complete_button,
#sfwd-mark-complete #learndash_mark_complete_button:hover,
#sfwd-mark-complete #learndash_mark_complete_button:active,
#sfwd-mark-complete #learndash_mark_complete_button:focus,
.learndash .wpProQuiz_button,
.learndash .wpProQuiz_button:hover,
.learndash .wpProQuiz_button:active,
.learndash .wpProQuiz_button:focus,
form#sfwd-mark-complete input#learndash_mark_complete_button[disabled],
.ld_course_grid .thumbnail.course a.btn-primary,
.ld_course_grid .thumbnail.course a.btn-primary:hover,
.ld_course_grid .thumbnail.course a.btn-primary:active,
.ld_course_grid .thumbnail.course a.btn-primary:focus,
.learndash .learndash_course_certificate .btn-blue,
.learndash .learndash_course_certificate .btn-blue:visited,
.learndash .learndash_course_certificate .btn-blue:hover,
.learndash .learndash_course_certificate .btn-blue:active,
.learndash .learndash_course_certificate .btn-blue:focus,
.learndash .quiz_continue_link a#quiz_continue_link,
.learndash .quiz_continue_link a#quiz_continue_link:hover,
.learndash .quiz_continue_link a#quiz_continue_link:active,
.learndash .quiz_continue_link a#quiz_continue_link:focus,
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"],
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"]:hover,
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"]:active,
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"]:focus,
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"],
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"]:hover,
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"]:active,
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"]:focus {
	background: #000;
	color: #fff;
	border: 2px solid #000;
}

If you have any questions about LearnDash button styles, please let me know in the comments. I’m happy to try and help out wherever I can.

If you’re looking for an even easier way to customize LearnDash elements, check out Design Upgrade Pro. 80+ customizable elements with no coding required.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Get your LearnDash Mobile App →

Previous

Hide the Comment Form on LearnDash Courses, Lessons, Topics, Quizzes & Essays

Next

Explaining LearnDash Course Types: When & Why to Use Each One

116 Comments

  1. Hello, i m trying to customize the learn-dash quiz page, questions and options.
    I want to increase the font size and color of my questions and also want to increase the font size of given options, but i don’t know css
    although i use google search for my css custamization but this time i can’t be able to solve the problem.
    I specially purchase the learndash plugin for only quizzes on my site, can you please provide me the css code to increase font size and color of my questions and question options (Radio button text).
    I will be very thankful to you for this.

    • Prajwal — If you purchased our Design Upgrade Pro for LearnDash plugin, please send an email to [email protected] 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.

  2. Is it possible to use CSS to right justify the buttons? (namely the button that says: Take This Course)

    • Hey Brent. It sure is! Add this CSS to your child theme’s style.css file, or the Additional CSS area of the Customizer.

      .learndash .learndash_join_button {
      	text-align: right;
      }
  3. Kakybat

    How to remove(or change) the right arrow and left the arrow?
    (next lesson, next topic, back to lesson … )

    • 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;
      }
  4. Hi I’m wondering if there’s a way to remove the secondary navigation heading from LearnDash quizzes. A secondary heading with the exact same text appears under the main heading and makes the page look clunky.

    We had a similar issue with our page posts and products so the theme developers sent CSS code to fix the issue (see below), but it’s still appearing on our quizzes. Any thoughts?

    .single-post h2.entry_title {
    display: none !important;
    }

    • You can remove it with the Quiz settings. Go to edit your quiz. Click the “Settings” tab at the top. Scroll down and uncheck the option for “Quiz Title.” See this screenshot.

  5. Pete

    Hi Dave. How do we change the colour of the “see more” of courses in the course grid. Also, the ribbon on top of the course squares in the course grid?

    Appreciate the help where possible!

    • 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.

    • Peter

      Hi Dave. Sorry for the late reply. The ribbons in referring to are all of the ones in the course grid. Whether they are “enrolled” or “new course” etc. I would like them to all show as a uniform color (in our case, a type of green).

      One other question I had is, is there a shortcode available to narrow course grid displays by category? I mean, if you assign categories to each course (let’s say, “marketing” or “IT”) can you show them in different areas depending on their grouping of category? Hope this makes sense.

      Thank you very much in advance.

      Ps. Our network is an intranet setup and it is difficult to get access organized. But I will do so if possible. Appreciate all your help.

  6. I am trying to customize my course grid button color and color behind the ‘Enrolled’ Text when looking at the course grid. I had it working, but then Activated the Design Upgrade for LearnDash (Free Version) I liked how this updated everything except my course grid. My grid use to have blue background color and transparent background on the ‘Enrolled’ Text. Now both backgrounds are a green color that is not in my theme (Harmony) anywhere. Overall I really like the Design Upgrade Plugin, but can you please help me figure out how to update the CSS to change my button colors and background colors? Do I have to pay just to alter the button color? Thank you so much! Newbie here and googling CSS updates for LearnDash button colors hasn’t helped much!

    • Hey – Been playing around – I finally got my button colors how I want them with the following CSS:
      .ld_course_grid .thumbnail.course a.btn-primary,
      .ld_course_grid .thumbnail.course a.btn-primary:hover,
      .ld_course_grid .thumbnail.course a.btn-primary:active,
      .ld_course_grid .thumbnail.course a.btn-primary:focus{
      color: white;
      background: #8DB9DA;
      }

      However, the ‘Enrolled’ above the featured Image in the course grid is still the wrong font color has has a green background. Can you direct me to the proper .ld_course_grid item where I would customize that? Also – how do I customize the font size on the Course Name in the Course Grid? Thank you again!

    • Hi Dave – I apologize for all the comments. I finally found all the documentation I think I need to get my course grid to look how I would like in the CSS file. I wanted my ‘Enrolled’ Ribbon and background custom colors and my ‘See More’ Button with custom color and background. I also need to get my font size and color changed for the Course Title in the Course Grid. I believe I have the CSS right, as my ribbon and button is correct, and my Course Title is Left Aligned, but it will NOT change the color or font size with this CSS. Any suggestions. Putting CSS here for those that happen upon this post!

      .ld_course_grid .thumbnail .caption .entry-title {
      font-size: 2px;
      text-align: left;
      color: #8DB9DA;
      }
      body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled {
      color: white;
      background: #8DB9DA;
      }
      .ld_course_grid .thumbnail.course a.btn-primary,
      .ld_course_grid .thumbnail.course a.btn-primary:hover,
      .ld_course_grid .thumbnail.course a.btn-primary:active,
      .ld_course_grid .thumbnail.course a.btn-primary:focus{
      color: white;
      background: #8DB9DA;
      }

    • You probably just have some theme styles that are more specific than the CSS you’ve written. Can you post a link to the page with your grid? I can send you updated CSS that will work.

    • Meredith

      Thanks Dave! I did some more code digging! I forgot I had put a font size for the Title in the course Grid in my master CSS style sheet awhile ago. I was trying to update the CSS in just my page, so the master was overriding it. I took that out and was good to go! I appreciate the quick response! Hopefully I helped others with these questions!

  7. Nima

    Dave, I worked out both of the above. I saw a post of yours that deals with categories in course grid.

    However, I cannot seem to work out with Meredith’s code for custom styles on course grid. It doesnt seem to reflect any changes for me. Any ideas?

    • Pete Nima

      Sorry, My name is Peter but my last name is Nima. Sorry for the confusion 🙂

    • Peter — Some themes output slightly different class/ID names for the course grid, so it’s possible you need slightly different code. I would need a link to your course grid page in order to confirm this. Please post a link to your page and I’ll take a look.

    • Peter

      Hi Dave,

      The styles were working fine until I installed DU plugin. Now this css doesn’t seem to function and is being overridden by DU settings. When I disable DU all works ok for custom button colors using the above css.

      Does that seem about right? I can’t get you access at this stage as the site is still on our servers.

    • Peter — Yes, that makes sense. The styles I use for the Design Upgrade plugin are pretty specific so they will override the styles in this post.

      The Pro version of Design Upgrade will win out over everything, so if you’re interested in some of its other features, that is one way to go.

      But if you just want button colors, you can add an !important after the CSS declaration. That will make your custom CSS take precedence over the Design Upgrade plugin. For example, the line that has color: #000; would look like this instead: color: #000 !important;.

  8. Peter

    Thank you so much, Dave. This worked an absolute treat!!

    We are still in the testing phase for our LmS site, I have already put in a budget request for buying the pro version.

    In the meantime, and to get the right output for presentation purposes, is there a way to add a hover syntax to this string?

    • I’m not sure exactly what code you’re using. If it’s just for the course grid buttons, or all buttons. If you paste the full code that you’re using here, I can help you with the hover style for it.

  9. Peter

    We’re using the primary and non primary code you’ve listed in the above article. Just with 006f66 as color. Not sure you wanted me to post that all in here 🙂

    • Gotcha. The hover styles are already in there. But you can pull them out and change their color, if you’d like.

      There are 4 general “states” that an element can be in.

      The normal state, which is when you first view it.

      .somebutton

      The hover state, when the mouse hovers over it.

      .somebutton:hover

      The active state, when the mouse is actively being pressed down on it.

      .somebutton:active

      And the focus state, when the keyboard focus is on it.

      .somebutton:focus

      There are different theories on whether or not to use different styles for each state, but to keep things simple, you can use the same style for hover, active & focus. Just pull out all the lines that contain :hover, :active and :focus at the end, and put them into their own declaration. And change the colors.

      Here’s an example:

      .somebutton {
      	color: #fff;
      }
      .somebutton:hover,
      .somebutton:active,
      .somebutton:focus {
      	color: #000;
      }
  10. Hi Dave,
    Is there a was to change where the default quiz button links to? At the end of my quiz there is an automatic “Click Here to Continue” button but when pressed, it just re-starts the quiz. What I want it to do is to close the page in the browser (since the quiz is a new page in the browser and by closing, the person will see the original course page). I would either like to delete this button altogether or change what it does.
    Thanks,
    Sarah

    • Hi Sarah — There are a few filters on the LearnDash support site that you can probably use to adjust where students are directed to after completing a quiz. And there are some you can use for overall completion of a course (which could be helpful if your quiz is the final step in the course).

      I don’t have the bandwidth to test them out and/or provide examples, but any developer familiar with LearnDash should know how to use them. You can search for a qualified LearnDash developer on Codeable.

      If you want to just hide the button with CSS, you can use the following:

      .learndash .quiz_continue_link {
          display: none !important;
      }
  11. josie

    Hi Dave! I’m trying to change the text on the ‘take this course button’ to purchase now, are you able to help!?

    Thanks!

    • Yep 🙂.

      Navigate to LearnDash LMS > Settings. Then click on “Custom Labels.” Scroll down a bit until you see “Take this Course (Button).” Enter “Purchase Now.” Click the “Save” button.

  12. Josie

    Awesome! I thought I would need code, I should have looked harder! thanks for your help 😃

  13. Pete Nima

    Hi Dave,

    Is there a way to make the entire course box of one course in the grid clickable, I mean not just the buttons but the whole box itself? I saw something like this on one of your posts but I cant seem to locate it now. Appreciate all the help!

    • 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.

    • Pete Nima

      Hi Dave,

      Thank you very much for your help! And yes, definitely not a developer! haha
      This worked perfectly, the only part though that I couldn’t work out was the CSS portion to force a hand on hover. Im using Divi theme. Can you be a little more specific where you would place this CSS please?
      Btw, I tried both the theme customizer>custom CSS and also the wordpress theme editor (I know, cowboy coding), but I cant seem to get it to work! I also tried the code modules CSS element (where I put the code for the course grid) but also no luck.

    • 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;
      }
    • Pete Nima

      That worked beautifully! Thank you!
      Divi is that bad? Lol.. I use both Divi and Elementor but Divi has a more attractive pricing structure.
      I have one more question please. I have been looking at how to remove the button all together. I inspected the element and found it is a.btn but I cannot for the life of me work out how to get it to validate. Is this possible anyway, to remove the button I mean??

    • 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;
      }
  14. Is there any way to use CSS to edit the “Take This Course” button to say something like “Begin Workshop’ but only for specific ‘courses’?

    I guess all mentions of ‘Course’ should say ‘workshop’ but, as you know, changing the label in LD settings changes it for the entire site.

    • Hey Terry. Unfortunately not. You could use JavaScript to do a string replace on the element with an ID of btn-join, and then use a WordPress plugin to only run that JavaScript on the page where you want to replace it. You could repeat this multiple times for each course page, changing the output each time.

      It’s not pretty, and you’ll need to do some research, but it’s one of the easier (and only) ways I know of.

  15. Hello Dave, I’ve scrolled through the comments and used Meredith’s code to change the ‘enrolled’ button colour. However, the ‘see more’ button is still in blue. How do I change that button colour please?

    • 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;
      }
    • Awesome, Dave. Thanks so much for the code snippet. Buttons now look fabulous in our brand theme. Super grateful 🙂

  16. Reetika

    Is there a way to fix the size of radio and square button in quiz options in learndash. It shows different size in different mobile OS.

    • You can try the following CSS, but I’m not positive it will work. I think LearnDash adds a width of 2% to the radio buttons & checkboxes for quizzes, and on some devices, this can be problematic, especially for longer answers.

      .learndash-wrapper .wpProQuiz_content ul.wpProQuiz_questionList input.wpProQuiz_questionInput {
      	width: auto;
      }

      Add this to the “Additional CSS” area in the WordPress Customizer.

  17. I’m using this plugin for 6 months now, it is super easy to use yet very powerful with affordable price.
    Thanks

  18. How do I change the ‘enrolled’ and ‘see more…’ button color on each of the pages( I am using ‘category-name’ attribute of course grid on each page of different categories) and i want to have different color buttons on each of the category grid list. Is there any possible way to do this?

    • I don’t think LearnDash provides a class name that you can use to target specific categories of grid items. You can, however, target individual grid items by finding the class name as shown in this screenshot.

      That’s the best option I can find.

  19. Aftab

    Thanks, that will help 🙂

  20. I NEED CHANGE LINK OF JOIN COURSE LEARN DASH BORED
    IF STUDENT CLICK IN BUTTON JUST GO TO CHECKOUT WOOCOMEERCE PAGE

    • I’m not sure I understand what you’re asking, but I think it’s related to the “Take this Course” button. If that’s the case, and you want that to go directly to WooCommerce checkout, while adding the product to the user’s cart, you can set the Course Access Mode to “Closed” and use this URL (123 would be the product ID):

      https://yoursite.com/cart/?add-to-cart=123

      Learn more in the official docs →

  21. Ian Schnee

    Your resources are so helpful! Is it possible to hide the “Mark Complete” button for lessons but not topics? I am using a plugin for having topics automatically complete lessons, but the lesson mark progress buttons are still there. Thanks you!

    • 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?

  22. Ian Schnee

    I was not in focus mode when I ran into the problem, so I checked that out. The problem went away for my newer courses, but was still there for my old coursers from Learndash 1.0, so I just created new courses for them and moved the content over. Your plugin let me really improve the look of focus mode, but I have two quick questions (sorry if I should post this elsewhere–I couldn’t find an answer on your site):
    1) I’ve checked the the Hide “back to…” link but it’s not hiding–is that a pro only feature? The hide page title and hide breadcrumbs are working great.
    2) For textbook navigation, is it possible to make each lesson and topic cell vertically shorter? I don’t see a way to change the padding or margin of them. Thanks!

    • Hi Ian,

      I’ll respond to each of your questions below.

      1) Hide “back to…” link not hiding
      Yes, this is a pro only feature, but you have the Pro version. If you’ve checked the box, it should hide it. It works on my testing site so there is probably a conflict with your theme or another plugin you’re using. Would you mind providing me access to your site so I can take a look? You can email [email protected].

      2) Is it possible to make each lesson and topic cell vertically shorter?
      Are you referring to the navigation panel on the left side of focus mode? Please let me know and I can provide some custom CSS for you to use. There is no setting for this in the plugin.

  23. Hi Dave,
    1) Thanks so much, I’ll send you access. You guys are the best!
    2) Correct, I mean the left side nav while in focus mode. I feel like I recall using your plugin, or maybe just some css from you, for modifying this, and doing a border radius on it, before focus mode existed, but now none of that is preserved for me.

    • 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;
      }
  24. Peter Pazman

    Dear Dave,

    great tutorial. I tried to customize the quiz page. Is there a way to change the color of the radio button and the border around the answer when an answer is selected?

    • For the border around the selected answer… if you’re not using the Design Upgrade for LearnDash plugin, use this CSS:

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

      Change “red” to whatever hexadecimal color code you want to use.

      If you are using the Design Upgrade for LearnDash plugin, use this CSS instead:

      .ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:focus-within, .ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label.is-selected, .ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:focus-within, .ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label.is-selected {
          box-shadow: inset 0 0 0 2px red;
      }

      As for the radio buttons, in short, no. There are ways to create custom radio buttons but you risk accessibility when doing so. Also, because of the HTML that LearnDash uses for them, it makes it even more difficult to do.

  25. Peter Pazman

    Dear Dave,

    It worked like a charm, thanks a lot!

    I also want to change the buttons for printing the certificate, restarting the quiz and continuing after the user completed a quiz (button color and text color). I tried to use the CSS classes/ID names you provided but it didn’t work. Can you help me with that, too?

    • 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.

  26. Megs Bassili

    Very helpful thank you

  27. How can I change the button-color on my registration form; the last button to finalize the registration. Which CSS code can I use to change, for example, the border-color. You can’t see de border at this moment, because it has the same color of the button.

    • 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?

    • Are you asking about the “login” button or the “nice, I would like to request an account” button? And are you asking about it’s normal state, or how it looks when hovered? Or both?

  28. Peter

    Hello!
    Same problem than Desiree, on the Learndash popup login/registration form, when you click on register and all the fields appears, the button “Register” is hardly visible due tu the color and lack of border. How can we edit this button? can`t find the class its belongs to! :S

    • 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;
      }
  29. Peter

    Thank you so much!! 😀

  30. Hello!

    Hope you’re keeping safe?

    Is there a short code to show the progress of an individual lesson within a course please?

    I know I can show the progress of a course using this code:

    [learndash_course_progress course_id=”12″]

    but is there something which will allow me to show the progress of an individual lesson?

    Many thanks

    Aidan

  31. Hi Dave,
    Thanks for your speedy reply and getting back to me.
    Not to worry.
    Kind regards
    Aidan

  32. Hi!

    Could you help me out? I’m trying to get all learndash buttons to appear without border radius (0px).

    thanks for the guide

    • 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;
      }
  33. Leah

    Hi, Dave!

    I’ve been trying to look for CSS code that can customize the look of “Take this course button”. I want to have the same button background color as it is not hovered to yet and then the same color when it is hovered. Same with the text color. So basically, I wanted to remove the hover thing. I simply want it to be a normal button. Can you help me with this one? Thanks a lot! Your response will be highly appreciated.

    • Sure. This should work:

      .learndash-wrapper .btn-join, .learndash-wrapper #btn-join,
      .learndash-wrapper .btn-join, .learndash-wrapper #btn-join:hover,
      .learndash-wrapper .btn-join, .learndash-wrapper #btn-join:active {
      	background: #000;
      	color: #fff;
      }
  34. On Mobile Devices the Enroll button for each course is not centered. It is shifted slightly to the right and isn’t aligned to the center. How do I align it?

  35. You would have to be logged in. As a logged out user the button says “log in to enroll” but as a logged in user is just says “enroll”

    https://ibb.co/QbY7P4F

    • 🤷‍♂️ – It could be poor CSS on LearnDash’s part, or it could be a CSS conflict with your theme or another plugin. I’m not sure. You can hire a developer to sort it out for you. It should take them less than 5 minutes.

  36. puneet jethi

    Hello Dave

    Is it possible to change the button colour of ‘Register’ when we login popup.
    I am using DESIGN UPGRADE PRO too but this option is missing there.

    Thanks

    • 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.

    • puneet jethi

      Thanks for replying.
      I just want to change the register button colour. (Not register an account button colour)

    • 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;
      }
  37. puneet

    Hello Dave

    Thanks

    Can you please also send the css of “register an account” button.

    • If you want to do both, forget the other CSS I sent and use this instead. It includes both buttons:

      .learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit,
      .learndash-wrapper .ld-login-modal .ld-login-modal-register .ld-js-register-account {
          background: yellow;
          color: black;
      }
      .learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit:hover,
      .learndash-wrapper .ld-login-modal .ld-login-modal-register .ld-js-register-account:hover {
          background: black;
          color: yellow;
      }
    • puneet Jethi

      Hello Dave

      Thanks for the code

      I also need the css code for login button in pop up. Can you please share that too.

      Secondly, is it possible to open Login Popup on every page from header. I set up the login popup from header but it is only working from “courses page”.

      Thanks

    • Try this for the login button:

      .learndash-wrapper .ld-login-modal .login-submit input[type="submit"] {
      	background: #000;
      	color: #fff;
      }
      .learndash-wrapper .ld-login-modal .login-submit input[type="submit"]:hover {
      	background: #fff;
      	color: #000;
      }

      As for the login popup from the header, yes, that is possible. Follow the LearnDash documentation here.

  38. Rabia

    hey i want to change lessons display as it resembles radio button can you please help

    • 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.

  39. Rabia

    hi i ma talking about courses page when i opened my course intro page it displays lessons and topics but that bullet resembles radio button i want to change it , i am using lerndash course list shortcode

  40. hi i am using course list block and want to remove lesson icons or what you call them bullets as they resemble radio buttons and users get confused to see them ,can you please help from all courses tab go to “Tango Core Training” course and kindly see the lesson list .thanks

  41. this course lessons

    • You can remove them completely with this CSS:

      .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon {
      	display: none;
      }

      Add this to Appearance > Customize > Additional CSS.

      Since they dynamically update based on completion, I can’t provide any other CSS to “customize” or “change” them, only to remove them.

  42. Rabia

    Thanks Dave

  43. Hi Dave, is there any custom CSS to align next and previous buttons only for mobile (something like this: https://i.ibb.co/LhCMMNp/Screen-Shot-2021-08-04-at-10-28-37.png)
    Thanks!

    • Hi Billy – Technically, I think so. However, because of the HTML and existing CSS LearnDash uses, it would be quite hacky. In the DOM, the order of the buttons goes: Previous, Mark Complete, Next. And the parent element for each of them is identical (.ld-content-action). They don’t have unique classes. LearnDash also uses the column-reverse value of the flex-direction property, along with the order property to re-order the buttons.

      You could target the first & third .ld-content-action <div>s, which would target the previous & next buttons, and play with the flex-basis or width, setting them to around 50%. But you still might run into issues with the flex-direction property on the parent element being set to column-reverse. You might need to change this to row or row-reverse for it to work.

      It’s more than I care to explore at the moment, but hopefully this helps give you an idea.

  44. Hi Dave,

    I have a question about changing the button colour of the Learndash Course grid. I’m currently experimenting with the Learndash plugin and the Astra theme. Howerver, when I use the css that Meredith so kindly provided, it doesn’t show any changes. Is it possible that the Astra theme is overwriting my custom css? Or am I changing the wrong element? Please let me know.

    Thanks in advance!

    Kind regards,
    Odile

    • Hi Odile,

      I believe I have updated the code in my Design Upgrade for LearnDash plugin since I posted this article, and that code is more specific than what I’ve mentioned here. That’s why it’s not working.

      This CSS will change your button colors:

      body div.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary {
      	background: black;
      	color: yellow;
      }
      body div.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary:hover {
      	background: yellow;
      	color: black;
      }

      Change the color values as you desire.

  45. Ruth

    Hi,
    I am trying to change the colour of the next/previous buttons and while I can change the colour of the background, that makes the whole ‘box’ a different colour and not just the grey buttons if you see what I mean (they’re rounded buttons in a square container) and the white text seems to be feint even though it’s set to bright white. Is there a way to colour just the buttons rather than the whole container?
    Many thanks,
    Ruth

    • Hi Ruth. Yes, there is a way, but I would need to see a focus mode page on your site to be able to confirm that the CSS I could give you works properly. Feel free to reach out via email. [email protected]

  46. For users viewing Learndash on their mobile, I want to change the size of the buttons, such as “Next Lesson” “Previous Lesson”, etc. Concurrently, how would I adjust the size of the font for a smaller button. Thanks.

  47. Hi. Wanted some guidance on how to resize the LearnDash buttons when a user is going through the course on the mobile. For example, want to change the size of “Next Lesson”, “Previous Lesson”, etc. Can this be done with CSS or needs a developer? If it can be done with CSS, your input would be appreciated. Thanks.

    Regards,
    Jonathan

    • Hi Jonathan –

      It can be done with CSS. You’ll want to look into a CSS technique known as “media queries.” They let you target only certain screen sizes, so you can target mobile without affecting larging screens like laptops & desktops.

      Also, here’s a video that will help you locate the CSS you need to use:



  48. Hi I am trying to customize the “Register” button in the modal on my website. Can you help me find the right selector?

    • Sure. Here is the selector that should work for any/all styles you want to add or change for the “Register” button in the modal.

      .learndash-wrapper .ld-login-modal-register .ld-button.ld-button-reverse
  49. Yaroslav

    Hello! I can’t figure out how to style the Next and Previous Lesson buttons (hover).

    This: (which is come from LearnDash settings – Accent color)
    .learndash-wrapper .ld-button:not(.ld-button-reverse):not(.learndash-link-previous-incomplete):not(.ld-button-transparent)
    overwrites everything I try to use in order to set hover for these buttons.

    Please help! 🙂

    • Yes, LearnDash uses some aggressive CSS when you use their 3 color settings. Try adding !important to the end of your CSS, and place it in Appearance > Customize > Additional CSS.

      color: red !important;
      background: blue !important;
  50. Each of my lessons has a couple of topics that I do not want my students to check as task complete. Is there a way of removing the checkbox so that the topic always stays active and doesn’t affect the student’s ability to use the Lesson Complete button?

    Thanks in advance.

    Michael

    • Yes, there’s most likely a way, but it would either require some template customization, or custom CSS to hide buttons & checkmarks. There’s no quick/easy solution.

  51. Hi Dave,
    I want to change the css of the link text in all topicss’ ‘materials’ tab, and if it’s possible – to add an icon for all these links.
    could you help me?
    thanks,
    Alice

    • Hi Alice – Both of these things are possible with a little CSS, but I don’t have the time to write it for you. Any competent CSS developer should be able to do this in about 10-15 minutes though.

  52. Mike

    Hi,
    Using the design upgrade, my “previous lesson” or “previous topic” buttons break to a second line and make the button larger than the “next lesson”. Is there anyway to reduce the font size of these buttons?

    • Hi Mike – Sure. You can use the following CSS to change the font size to anything you’d like.

      .learndash-wrapper .ld-focus-content .ld-content-actions .ld-button,
      .learndash-wrapper .sfwd-mark-complete input[class="learndash_mark_complete_button"] {
      	font-size: 12px;
      }

      This will apply to all screen sizes, but only affect the bottom area of focus mode (“previous lesson,” “next lesson,” and “mark complete” buttons).

      If you want to change the font size based on screen size, you’ll need to wrap that code in media queries for each screen size range you want to target.

  53. Mike

    Awesome, worked perfectly, thanks!

Leave a Reply

Your email address will not be published.

Powered by WordPress & Theme by Anders Norén