LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

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

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.

Previous

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

Next

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

21 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;.

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén