LDX Design

Tag: CSS

Build Custom Styles for LearnDash Quiz Questions

Have you ever wanted your answers displayed inline (next to each other) instead of stacked? How about using an actual blank line for fill-in-the-blank questions?

In this tutorial, I’ll explain how you can use custom CSS to design your quiz questions in various ways.

LearnDash focus mode dark mode example

Create a Dark Mode for LearnDash Focus Mode

A few people have asked me if I could create a “dark mode” for LearnDash’s Focus Mode. The answer is yes, but it does come with a few caveats. Overall though, I was able to replicate the same colors in YouTube’s dark mode and apply them to the LearnDash Focus Mode experience.

LearnDash focus mode dark mode example
Example dark mode for LearnDash Focus Mode

If you’re interested in using a dark mode with LearnDash, I’ll provide you with the custom CSS below.

Customize the “Return to Course” Link in the LearnDash Navigation Widget

When you use the LearnDash course navigation widget, and navigate to a lesson, topic or quiz page, you’ll see a “Return to [Course]” link appear at the bottom. No surprise, this brings you back to the course page.

But what if you wanted to customize the “Return to [Course]” link?

  • 🚫 Hide the “Return to” part and just display the course title?
  • 👈 Add a back arrow before the course title?
  • 👆 Move the entire link to the top of the navigation?
  • Or just completely remove the link all together?!

You’ve come to the right place!

How to Show Percentage (%) Complete in the LearnDash Progress Bar

By default, the LearnDash progress bar only displays a colored bar to indicate a student’s progress in the course. There is no text-based example of what percentage they have completed.

LearnDash progress bar with percentage complete

Sweet lookin’ bar, man! How’d you do that? With this →

I’ve previously covered how to show “X out of Y steps completed” beneath the progress bar, but if you are trying to display a percentage instead, this article is for you.

Show “X out of Y steps completed” under the LearnDash Progress Bar

The LearnDash progress bar does an OK job at visually representing a student’s progress, but there are ways to improve it. If you have 50 or more steps in your course, the progress bar itself might not be the best indicator.

LearnDash progress bar with steps shownHere’s how I did it.

" data-medium-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png" data-large-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png" >

Like the stripes? 😍 Here’s how I did it.

In this tutorial, I’m going to show you how to use a little CSS to display “X out of Y steps completed” below (or above) your LearnDash progress bar.

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.

How to Use & Customize the LearnDash Course Grid

You’ve decided to use LearnDash for your LMS (great choice 👌). And you realized that the default courses archive page looks pretty terrible. But thankfully, you’ve discovered the LearnDash Course Grid add-on. And now you want to take it to the next level.

This post will cover many of the various ways you can customize the LearnDash course grid. There are around 20 different parameters you can use to make your course grid just right, along with various ways to improve your grid’s design. Follow along as I walk you through each one, along with code samples.

🎉 UPDATED for Course Grid 2.0+
On Nov 17, 2021, LearnDash released version 2.0 of the Course Grid add-on. This completely changed how the course grid works. We’ve included information for both versions below. If you see 1.x, that means the old course grid using version 1.7 or below and the [ld_course_list] shortcode. 2.x means version 2.0 or higher and using the “LearnDash Course Grid” block or [learndash_course_grid] shortcode.

Table of Contents

Install the Course Grid add-on

Make sure you have installed & activated the course grid add-on.

  1. Navigate to LearnDash LMS > Add-Ons
  2. The “LearnDash Course Grid” should be the first option
  3. Click Install, and then Activate
LearnDash course grid add-on plugin
Make sure you click “Install,” and then “Activate”

Extra Course Grid Information

Once you’ve activated the course grid add-on, there are a few additional pieces of information you can add to each course. This info can be displayed when viewing your course grid.

  1. In your WordPress admin area, navigate to one of your courses
  2. Click “Edit”

Course Grid Short Description

The first option under “Courses” will be “Short Description.” This only appears when you have the Course Grid add-on active. It’s completely optional, but allows you to add a short description (just like an excerpt) to explain what the course is about.

LearnDash course grid short description field
Enter your course’s short description in this field

The only place this will be displayed is in the course grid.


If you scroll down to the bottom of the page, you’ll see a section for LearnDash Course Grid Settings. Here you’ll find a few more options:

Additional LearnDash course grid settings
Additional course grid settings

Duration

By default, the course grid will display the featured image you have set for your course. You have the option of showing a video instead.

First, you’ll need to check the Enable Video Preview.

Then, you’ll insert a link to your video in the Video URL or Embed Code box. Simply grab the URL from the address bar of the video you’d like to use.

For YouTube, it would look like this:

https://www.youtube.com/watch?v=XLCkDWc8iLI

For Vimeo:

https://vimeo.com/275112402

NOTE: Currently, course grid video supports YouTube, Vimeo, Wistia & native videos that you upload through the Media Library. It might also work with Spotlightr (formerly vooPlayer), Amazon S3 & Presto Player, but the official documentation is unclear. See here for officially supported video players.

Course Grid Button Text

Each course can have it’s own custom button text displayed in the course grid. Keep in mind, however, that if you add custom button text here, it will always be displayed in your grid, regardless of whether your student has completed the course, the course is free, etc.

Course Grid Ribbon Text

Just like the button text, if you add custom ribbon text in this field, it will be displayed in your course grid. Again, even if a student has completed the course, or you set the course as free, the custom ribbon text will always be displayed.


Simply leave these fields blank if you wish to use the default LearnDash language for your course grid buttons & ribbons.

Subscribe to our YouTube channel for more LearnDash tutorials.

Course Grid 2.x (new)

The following information is for Course Grid version 2.0 or higher, and assumes you are using either the “LearnDash Course Grid” block in the block editor, or the [learndash_course_grid] shortcode.

Usage

There are two ways to use the new course grid:

  1. You can use the “LearnDash Course Grid” block in the block editor. Simply search for it by name when you add a new block.
  2. You can use the [learndash_course_grid] shortcode. This allows you to use the course grid with Elementor, another page builder, in a custom template file, or anywhere else on your site.

When using the block, you’ll have a set of block options in the right sidebar, just like all other blocks in WordPress.

When using the shortcode, you have a ton of parameters (or options) available to you as well. We’ll explain what these are below, and show you how to use them.

Other Post Types

You can display more than just courses with the new LearnDash Course Grid. You can display any post type, which includes but is not limited to:

  • lessons
  • topics
  • quizzes
  • questions
  • assignments
  • essays
  • pages
  • posts
  • or any other custom post type registered on your site

“LearnDash Course Grid” Block Options (2.x)

LearnDash has done a pretty good job of documenting the course grid block options so I won’t repeat them all here. But I’ll try to make a video soon that walks you through them more visually.

Course Grid Shortcode Parameters (2.x)

As of April 2022, these are not documented by LearnDash, so I will show you all of the parameters that you can use with the [learndash_course_grid] shortcode. There are actually even more options available when using the shortcode vs. using the block.

Here’s a quick example of using the shortcode to display a grid with the Skin 2 card, a large thumbnail, and hiding the meta info.

[learndash_course_grid skin="grid" card="grid-2" thumbnail_size="large" post_meta="false"]

Now let’s get into all the parameters:

NOTE
There have been reports that many of the parameters for Styles do not work.

FeatureDescriptionParameter & DefaultPossible
Values
Post TypeWhat elements to display in the gridpost_type="sfwd-courses"sfwd-courses
sfwd-lessons
sfwd-topic
sfwd-quiz
page
post
or any other custom post type
Per PageNumber of elements to display before paginationper_page="9"any integer (try 0 to show all)
Course SortingHow to sort the elements in your grid.orderby="ID"title
ID
date
modified
menu_order
rand
…and more
Order of SortingThe sort order for the “orderby” parameter.order="DESC"ASC
DESC
TaxonomiesCategories, tags, and custom taxonomies (separate multiple with commas)taxonomies=""any registered taxonomy
ld_course_category
ld_course_tag
category
post_tag
Enrollment StatusEnrolled or notenrollment_status=""enrolled
not-enrolled
Progress StatusNot started, completed, or in progressprogress_status=""not_started, completed, in_progress
ThumbnailShow thumbnail?thumbnail="true"true
false
Thumbnail SizeThumbnail image sizethumbnail_size="thumbnail"thumbnail
medium
large
full
any custom image size
RibbonShow ribbon?ribbon="true"true
false
VideoShow video preview?video="false"true
false
ContentShow content? (includes title, desc, button)content="true"true
false
TitleShow title?title="true"true
false
Clickable TitleMake title clickable?title_clickable="true"true
false
DescriptionShow description?description="true"true
false
Description Character LimitMax characters to show for descriptiondescription_char_max="120"any integer
ButtonShow button?button="true"true
false
FilterShow filter options?filter="true"true
false
PaginationPagination typepagination="button"button
infinite
pages
false
Equal HeightEqual height grid itemsgrid_height_equal="false"true
false
Progress BarShow progress bar?progress_bar="false"true
false
Post MetaShow post meta?post_meta="true"true
false
SkinType of skinskin="grid"grid
masonry
list
CardType of cardcard="grid-1"grid-1
grid-2
grid-3
list-2
list-2
ColumnsNumber of columns (only in grid & masonry, not list)columns="3"any integer, but recommend 1-6
Min Column Width (px)Set a minimum width for every columnmin_column_width="250"any integer
Styles
Title Font Family font_family_title=""any available font family
Description Font Family font_family_description=""any available font family
Title Font Size font_size_title=""any available font size value
Description Font Size font_size_description=""any available font size value
Title Font Color font_color_title=""any available color value
Description Font Color font_color_description=""any available color value
Title Background Color background_color_title=""any available color value
Description Background Color background_color_description=""any available color value
Ribbon Background Color background_color_ribbon=""any available color value
Ribbon Font Color font_color_ribbon=""any available color value
Icon Background Color background_color_icon=""any available color value
Icon Font Color font_color_icon=""any available color value
Button Background Color background_color_button=""any available color value
Button Font Color font_color_button=""any available color value
ClassAdd a custom class for CSS stylingclass_name=""any valid HTML class
IDAdd a custom IDid=""any valid HTML ID
Filter
SearchShows only courses in the specified WordPress category. Use the category ID.filter_search="true"true
false
TaxonomiesShow taxonomies in filter?filter_taxonomies="category, post_tag"any registered taxonomy
ld_course_category
ld_course_tag
category
post_tag
PriceShow price in filter?filter_price="true"true
false
Min PriceSet a minimum value for the price filterfilter_price_min="0"any integer
Max PriceSet a maximum value for the price filterfilter_price_max="1000"any integer

Course Grid 1.x (old)

This section will cover how to use the old course grid found in versions 1.7 and below of the LearnDash Course Grid add-on. We’ll cover all the various options you have for customizing your LearnDash course grid with the old [ld_course_list] shortcode.

Subscribe to our YouTube channel for more LearnDash tutorials.

Insert the Grid

Here’s what the basic shortcode looks like for inserting the course grid on your site:

[ld_course_list]

The default options for the course grid will display your courses in 3 columns, and include:

  • Featured image
  • Course title
  • Short description (if it exists)
  • Button
  • Ribbon

If that’s all you need, great. But we can do a lot more.

The following options are enabled by using parameters that modify the shortcode. You can combine as many parameters as you’d like in one shortcode.

Course Grid Columns

You can choose any number of columns from 1 to 7. Simply add col="4" to your shortcode. Change the “4” to the number of columns you’d like to display.

Now I’ll share a handful of CSS snippets that you can use to customize the course grid in various ways. These only work with the legacy course grid output (1.x), using the [ld_course_list] shortcode for “LearnDash Course List” block.

All of the following code should be placed in the Additional CSS area of the Customizer (Appearance > Customize).

BuddyBoss / Social Learner
Most of these snippets WILL NOT work with the BuddyBoss platform or theme. They customized the HTML output for the course grid, so the class & ID names are different. Sorry 🙁.

How to Center the Course Title

Center-align the course title in your grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	text-align: center;
}

Hide Course Title

If you made the course title part of your image, and want to hide the title, you can use this instead:

.ld_course_grid .thumbnail .caption .entry-title {
	display: none;
}

Adjust Font Size of Course Title

You can adjust the font size of the title in the LearnDash course grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
}

NOTE: If you want to make multiple changes to the course title, you should combine them all into one declaration, like this:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
	text-align: center;
	color: #000;
}

Adjust Font Size of Short Description

You can adjust the font size of the course grid description using the following CSS.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	font-size: 20px;
}

PRO TIP
We’ve got an entire article dedicated to short descriptions in the course grid →

Custom Background Color for Each Grid Item

.ld-course-list-items div.ld_course_grid .thumbnail.course, .ld_course_grid .thumbnail {
	background: #113263;
}

Custom Color for Course Title

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-title,
.ld_course_grid .thumbnail .caption .entry-title {
	color: #fec300;
}

Custom Color for Short Description

You can also change the color of the course grid description.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	color: #000;
}
[ld_course_list col="4"]

Show a Progress Bar

The progress bar is not shown by default. If enabled, it will be shown for current students only, and display a student’s progress in that course. To show the progress bar, add progress_bar="true" to your shortcode.

[ld_course_list progress_bar="true"]

Limit the Number of Courses Shown

You can specify exactly how many courses you want to be displayed in your grid. Use the num parameter. As far as I’m aware, there is no limit here. Any integer should work. If you have more courses than the number used, pagination will be shown at the bottom of your grid.

[ld_course_list num="12"]

Change the Order in Which Courses Appear (Sorting)

By default, your course grid will be ordered based on the date your courses were published. You can change this with a handful of different options. Use the orderby parameter to change your grid’s sort order.

[ld_course_list orderby="menu_order"]

orderby should be used in conjunction with the next option, order, to specify ascending or descending.

You can set orderby to any of the following options:

  • title – uses the course title
  • ID – uses the course ID
  • date – uses the original publish date
  • modified – uses the date the course was modified/updated
  • menu_order – uses the specified menu order that you provided
  • rand – displays your courses at random
  • …and several other, less used, options are available here

Course Order: Ascending or Descending

The order parameter will only take effect when used with the orderby parameter. order tells your grid whether to sort courses by ascending (lowest to highest) or descending (highest to lowest) values.

  • When ascending (ASC) is chosen for orderby="title", your courses would be displayed in alphabetical order from A-Z.
  • When using dates (date & modified), ascending will show the oldest content first, while descending will show the most recent content first.
  • For ID & menu_order, ascending will show the lowest number first (i.e. 1), while descending will show the highest number first.
[ld_course_list orderby="title" order="ASC"]

Hide the Content

By default, your course grid will display the course title, a short description (if you’ve entered one), and a button that links to the course. You can hide all of these things, and just show the thumbnail, using the show_content parameter.

[ld_course_list show_content="false"]

Hide the Course Image/Thumbnail

By default, your grid will display the course thumbnail image. You can hide the image by using the show_thumbnail parameter.

[ld_course_list show_thumbnail="false"]

NOTE: Do not use both show_content="false" and show_thumbnail="false" as it will cause your course grid to display empty boxes with nothing inside.

Only Show Student’s Enrolled Courses

If you want to use the course grid on a student’s profile page, you can use the mycourses parameter to only display the courses that the current user is enrolled in.

[ld_course_list mycourses="true"]

You can also choose to show only those courses in which a student is NOT enrolled:

[ld_course_list mycourses="not-enrolled"]

Only Show Completed, In Progress or Not Started Courses

You can also choose to show only courses that fall within a particular course status for the user. Of all the courses that a user is enrolled in, you can show only those that they have completed, or only the ones that are still in progress (started but not yet completed).

Use the following to only show a user’s completed courses:

[ld_course_list mycourses="true" status="completed"]

Use the following to show only those courses in which a user has started but not yet completed:

[ld_course_list mycourses="true" status="in_progress"]

Use the following to show only the courses that a user is enrolled in and has not started:

[ld_course_list mycourses="true" status="not_started"]

Filter by Course Access Mode (price type)

In a recent version of LearnDash (~3.4), a new parameter was added for price_type. It allows you to only show courses that have been assigned a specific access mode in the course settings.

There are 5 access modes:

  • open (open)
  • free (free)
  • buy now (paynow)
  • recurring (subscribe)
  • closed (closed)

Here’s an example showing 4 of the 5 access modes, excluding “open” courses:

[ld_course_list price_type="free,paynow,subscribe,closed"]

Filter by LearnDash Category or Tag

LearnDash courses have their own built-in category & tag system, just like WordPress itself. If you use LearnDash categories & tags to further organize your courses, you can filter your course grid by using the following parameters:

  • course_cat="10" – Only show courses assigned to the category with ID of 10
  • course_category_name="math" – Only show courses whose category slug is math
  • course_tag_id="10" – Only show courses assigned to the tag with ID of 10
  • course_tag="math" – Only show courses whose tag slug is math

NOTE: You can only use one category or tag per shortcode. Using multiple categories/tags will not work. This is invalid: [ld_course_list course_cat="1,2"]. It will show courses in the first category, 1, and ignore the 2.

Add a Dropdown Menu Filter

You can allow the user to filter the course grid by adding a dropdown menu to the top of your grid.

To allow filtering by LearnDash categories…

[ld_course_list course_categoryselector="true"]

To allow filtering by WordPress categories…

[ld_course_list categoryselector="true"]

At this time, the dropdown menu filter only works for categories, not tags.

Filter by WordPress Category or Tag

This works in the same way as the LearnDash categories & tags, only the parameters are different:

  • cat="10" – Only show courses assigned to the category with ID of 10
  • category_name="math" – Only show courses whose category slug is math
  • tag_id="10" – Only show courses assigned to the tag with ID of 10
  • tag="math" – Only show courses whose tag slug is math

Disable the Grid

If you have the Course Grid add-on installed, but want to disable grid for a single instance of the course list, you can do so with the course_grid parameter:

[ld_course_list course_grid="false"]

The design won’t be pretty, but this might be an option if you’re writing your own custom CSS.

Old Course Grid Shortcode Parameters (1.x)

Here’s a complete list of all the options available for the old version of the LearnDash course grid. You can use as many parameters as you’d like. Here’s an example of how to use multiple parameters with the [ld_course_list] shortcode:

[ld_course_list col="4" progress_bar="true" num="12" orderby="title" order="ASC"]
FeatureDescriptionParameterPossible
Values
Disable GridThis will disable the grid layout for this particular instance.course_grid="false"false
Grid ColumnsNumber of columns your grid will have on large screens.col="4"1, 2, 3, 4, 5, 6, 7
Progress BarA visual indicator of a student’s current progress in each course.progress_bar="true"true
Number of CoursesHow many courses will be displayed in your grid.num="10"any integer
Course SortingHow to sort the courses in your grid.orderby="title"title
ID
date
modified
menu_order
rand
…and more
Order of SortingThe sort order for the “orderby” parameter.order="ASC"ASC
DESC
Hide ContentHide the title, description & button.show_content="false"false
Hide ThumbnailHide the thumbnail image.show_thumbnail="false"false
My CoursesShows only the courses in which the current user is enrolled.mycourses="true"true
Not-Enrolled CoursesShows only the courses in which the current user is NOT enrolled.mycourses="not-enrolled"not-enrolled
Course StatusShows only the courses that correspond to the current user’s status in their enrolled courses. You must set mycourses="true" to use this parameter.status="completed"completed in_progress not_started
Course Access ModeShows only the courses that have been assigned a specific access mode in the course settings. Separate multiple values with commas.price_type="free,closed"open free paynow subscribe closed
If using LearnDash categories & tags…
Course Category IDShows only courses in the specified LearnDash category. Use the category ID.course_cat="10"any course category ID
Course Category Name/SlugShows only courses in the specified LearnDash category. Use the category slug.course_category_name="math"any course category slug
Course Tag IDShows only courses tagged with the specified LearnDash tag. Use the tag ID.course_tag_id="10"any course tag ID
Course Tag Name/SlugShows only courses tagged with the specified LearnDash tag. Use the tag slug.course_tag="math"any course tag slug
Course Category SelectorAdds a dropdown menu to filter the course grid by course category.course_categoryselector="true"true
If using WordPress categories & tags…
WordPress Category IDShows only courses in the specified WordPress category. Use the category ID.cat="10"any WordPress category ID
WordPress Category Name/SlugShows only courses in the specified WordPress category. Use the category slug.category_name="math"any WordPress category slug
WordPress Tag IDShows only courses tagged with the specified WordPress tag. Use the tag ID.tag_id="10"any WordPress tag ID
WordPress Tag Name/SlugShows only courses tagged with the specified WordPress tag. Use the tag slug.tag="math"any WordPress tag slug
WordPress Category SelectorAdds a dropdown menu to filter the course grid by WordPress category.categoryselector="true"true

Style Your LearnDash Course Grid (1.x)

The default LearnDash course grid just doesn’t look that great. The rows are not all equal heights. The spacing is off. And if you use a theme that also uses the Bootstrap framework, your grid might look really wonky.

The best solution to fix all these issues, as well as bring an updated set of styles to your course grid, is to install the free Design Upgrade for LearnDash plugin. This will not only improve your course grid design, but all the other areas of LearnDash will benefit from improved styles.

Disclaimer: This plugin was developed by our team.

Design Upgrade for LearnDash plugin cardDownload for free

" data-medium-file="https://ldx.design/wp-content/uploads/2018/11/design-upgrade-learndash-free-plugin-card-2020-300x162.png" data-large-file="https://ldx.design/wp-content/uploads/2018/11/design-upgrade-learndash-free-plugin-card-2020.png" >

If you want even more design control over your LearnDash course grid, check out the pro version. In addition to 20+ specific course grid options, you’ll get over 80 more design options to customize the look & feel of other LearnDash elements on your site. Here’s a quick preview of the course grid features:

The Design Upgrade Pro for LearnDash plugin is great for…

  • custom border color & thickness
  • add a drop shadow to each course
  • add effects on hover
  • full-width course grid buttons
  • custom ribbon colors
  • improved progress bar

Now I’ll share a handful of CSS snippets that you can use to customize the course grid in various ways. These only work with the legacy course grid output (1.x), using the [ld_course_list] shortcode for “LearnDash Course List” block.

All of the following code should be placed in the Additional CSS area of the Customizer (Appearance > Customize).

BuddyBoss / Social Learner
Most of these snippets WILL NOT work with the BuddyBoss platform or theme. They customized the HTML output for the course grid, so the class & ID names are different. Sorry 🙁.

How to Center the Course Title

Center-align the course title in your grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	text-align: center;
}

Hide Course Title

If you made the course title part of your image, and want to hide the title, you can use this instead:

.ld_course_grid .thumbnail .caption .entry-title {
	display: none;
}

Adjust Font Size of Course Title

You can adjust the font size of the title in the LearnDash course grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
}

NOTE: If you want to make multiple changes to the course title, you should combine them all into one declaration, like this:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
text-align: center;
color: #000;
}

Adjust Font Size of Short Description

You can adjust the font size of the course grid description using the following CSS.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	font-size: 20px;
}

PRO TIP
We’ve got an entire article dedicated to short descriptions in the course grid →

Custom Background Color for Each Grid Item

.ld-course-list-items div.ld_course_grid .thumbnail.course, .ld_course_grid .thumbnail {
	background: #113263;
}

Custom Color for Course Title

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-title, .ld_course_grid .thumbnail .caption .entry-title {
	color: #fec300;
}

Custom Color for Short Description

You can also change the color of the course grid description.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	color: #000;
}

Hide Grid Button

.ld_course_grid_button {
	display: none;
}

Custom Grid Button Colors

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

Grid Buttons: Rounded/Squared Corners

If you’d like to change the course grid buttons to have squared corners, or change the default border radius (24px), you can use the following CSS. Use 0 for squared corners or change the value for your desired roundedness.

body div.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary {
	border-radius: 0;
}

Change Color & Style of Ribbons

There are several different types of ribbons, and the code to style each type is a little different. For the styles I’m going to provide, see the code below for how to structure the CSS.

  • General Ribbons: a ribbon showing a price, or any ribbon that does not fall into one of the other categories. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon {
  • “Free” Ribbons: displayed on free courses that the user has not enrolled in yet. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.free {
    LearnDash changed their HTML output for free ribbons and they can no longer be styled differently. They will inherit the styles of general ribbons.
  • “Enrolled” Ribbons: displayed if a logged-in user is enrolled in that course. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled {
  • “Custom” Ribbons: displayed if you’ve provided a custom text label in the Course Grid settings of the admin. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.custom {
    LearnDash changed their HTML output for custom ribbons and they can no longer be styled differently. They will inherit the styles of general ribbons.

Now that you know which type of ribbon you need to target, here are some styles you can use for various effects.

NOTE
Everything that starts with /* and ends with */ is just for commenting purposes. When you add these examples to your CSS, you can omit those lines. Use as little or as much of these lines as you’d like, and feel free to add more of your own if you know CSS.

/* Change ribbon styles */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon {
	/* background color */
	background: #ffa500;
	/* text color */
	color: #000;
	/* add curved edges to inside of ribbon */
	border-radius: 0 5px 5px 0;
	/* remove text shadow */
	text-shadow: none;
	/* change font size */
	font-size: 18px;
	/* remove ribbon shadow */
	box-shadow: none;
}

/* Change color of the ribbon's shadow. Colors should match. */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon::before,
body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled::before { border-top-color: #d68b02; border-right-color: #d68b02; } /* Remove ribbon shadow */ body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon::before { display: none; }

Hide All Ribbons

This will hide every type of ribbon on the course grid. It could be updated slightly to target only “enrolled” ribbons. See the section above.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ribbon {
	display: none;
}

LearnDash Course Grid FAQ (1.x)

A handful of common questions & answers about the course grid.

Can I display groups in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_group_list]. There is also a Group List block.

There is no documentation on this yet so we’re not sure what options or parameters are available, if any. (updated July 30, 2020)

Can I display lessons in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_lesson_list course_id="123"]. Replace the course_id with your own.

There is also a Lesson List block.

Can I display topics in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_topic_list course_id="123"]. Replace the course_id with your own.

There is also a Topic List block.

Can I display quizzes in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_quiz_list].

There is also a Quiz List block.

Can I use course grid on more than one page?

Absolutely. Use it on as many pages as you’d like. You can use different parameters each time. Some examples include:

  • Show only courses that the user has registered for using [ld_course_list mycourses="true"] on an account page
  • Use it again on a custom course listing page with show_content="false" to just show an image gallery of courses
  • Create unique pages that show a grid only for courses in specific categories using category filters course_cat="10" or cat="12"

Can I use course grid multiple times on the same page?

Sure. There is no limit to the number of times it can be used on a page.

  • Use the category filters, and your own headers, to split your grid up into multiple sections, each with courses that belong to a different category
  • If you’re using a technique to show/hide content for logged in vs. logged out users, you can show logged in users their enrolled courses, and logged out users can see ALL courses.
  • …and many more creative ways I’m sure I’m leaving out

Course Grid Bonus Tips

Here are a few things I do to improve the look of my course grid.

Page 3 of 3