Create A Modern Course List Layout For Uncanny Groups For LearnDash

Here at Discover eLearning we are huge fans of Uncanny Owl. Every plugin Uncanny Owl offers is truly exemplary, thanks to the quality and value they offer for any LearnDash LMS customer looking to get the most out of their platform. That’s why we regularly shine a spotlight on these products to our own clients. The company is committed to growing the WordPress LMS industry through their extensive knowledge and professionalism, and their customer service is refreshing and enlightening. I have learned so much over the last few years from the technical support offered by the team behind Uncanny Owl.

Uncanny Groups For LearnDash

One of Uncanny Owl’s most outstanding products is an extension for LearnDash LMS called Uncanny Groups For LearnDash. As you may already be aware, LearnDash provides a highly useful user groups system for managing bulk user enrolment into courses. Uncanny Groups For LearnDash fully upgrades this system with myriad frontend reporting screens, and a smart user interface for Group Leader role users to easily manage and control their groups.

The Uncanny Groups For LearnDash plugin also makes it possible for platform administrators to use groups to gear their LMS site towards the sale of course access at company level through the use of seat management. They can also integrate the system through e-commerce solutions such as WooCommerce and Memberships.

As a result, Uncanny Groups For LearnDash is the most recommended and most returned-to extension plugin for LearnDash that we speak to our clients about. Often, when we begin a relationship with a new client, they want to make their digital learning platform as appealing to big businesses and large employers as possible. The customisation and versatility of Uncanny Groups For LearnDash makes it the ideal toolkit to work with to achieve this goal.

Customising The Uncanny Groups For LearnDash User Interface For A Modern Look

This is our simple method for improving the look of one of the main frontend user interface screens provided by the Uncanny Groups For LearnDash plugin – The Group Management Screen.

By default, when a Group Leader visits this default UI screen, they will see a list of all courses that are assigned to their group in the form of a simple bulleted list:

We’ll apply a simple block of CSS code to this page (which you can do by adding the code to the Customise>Additional CSS box for the page) to transform the layout into this:

This modern box-style layout also allows you to apply some extra colour to the hover style of each course box, so you can add your branding colours to the page.

Here is the code you need to achieve the same effect:

.uo-groups .uo-list li {padding:0px; float:left; max-width:max-content; margin:0 10px 8px 0; border:1px solid black;}
.uo-groups .uo-list li:hover {color:#fff;}
.uo-groups .uo-list li:before {display:none!important;}
.uo-list li:hover a {background-color: #3f44a2; color: #fff;}
.uo-list a {display: block;padding: 10px;}
.uo-groups .uo-list li:hover {padding-left:0!important;}

Just update the background colour hex values as required to match your own branding colour scheme. If necessary, you can also update the text colour for better visibility when set against your background colour.

We hope you find this handy CSS tip for Uncanny Groups For LearnDash helpful! Continue to follow the Discover eLearning blog for even more helpful LearnDash Tips and Tricks in the near future.

You can also follow our social media channels on Facebook, X, and LinkedIn where we posts regular updates and advice for LearnDash platform users.