Skip to content

Instantly share code, notes, and snippets.

@davewarfel
davewarfel / learndash-quiz-styles-buddyboss.css
Last active Jun 1, 2018
LearnDash Quiz Styles for Social Learner/Boss Theme by BuddyBoss
View learndash-quiz-styles-buddyboss.css
/**
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer. They will override the default styles
* that are applied by the Social Learner & Boss theme by BuddyBoss.
*
* These styles only cover certain areas of LearnDash quiz content, and
* do not apply to any other areas of LearnDash or the Social Learner/Boss theme.
*
* This is a sample to get you started.
* Update the colors, borders, etc. to reach your desired outcome.
@davewarfel
davewarfel / basic-comment-quicktags-plugin-styles.css
Last active Jul 2, 2018
Custom CSS for Basic Comment Quicktags WordPress Plugin
View basic-comment-quicktags-plugin-styles.css
/**
* Custom Styles for the Basic Comment Quicktags Plugin
*
* Add these to your child theme style.css file or the
* "Additional CSS" in the Customizer.
*
* Customize the colors, borders, etc. to match your theme.
*/
@davewarfel
davewarfel / learndash-uo-breadcrumbs.css
Last active Jul 21, 2018
Add Styles for Uncanny Owl Breadcrumbs Shortcode - [uo_breadcrumbs]
View learndash-uo-breadcrumbs.css
/**
* By default, no styles are added to Uncanny Owl's breadcrumbs.
* They will inherit the styles of your theme.
* If you'd like to add styles for the [uo_breadcrumbs] shortcode,
* here's some CSS to help you with that.
*
* NOTE: These are simply examples. Update the values and/or add the
* styles that make sense for your setup.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
@davewarfel
davewarfel / learndash-hide-move-topic-dots-mobile.css
Created Aug 2, 2018
Hide/Move LearnDash topic dots & 'back to lesson' button on mobile devices
View learndash-hide-move-topic-dots-mobile.css
/**
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
*
* NOTE: You can change 600px to another value. Any screen sizes BELOW this width
* will receive the following styles.
*/
/* Hide topic dots on screens below 600px */
@media (max-width: 600px) {
@davewarfel
davewarfel / learndash-course-grid-description-font-size.css
Created Sep 7, 2018
Change font-size of course description when using LearnDash's course grid add-on.
View learndash-course-grid-description-font-size.css
/**
* NOTE: Update the font-size value to your liking.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
*
*/
/* Adjust font size of the course descriptions when
* using the Course Grid add-on.
@davewarfel
davewarfel / learndash-print-certificate-button-style.css
Created Sep 10, 2018
Use this code to change the styles of the print certificate button in LearnDash
View learndash-print-certificate-button-style.css
/**
* This will change the styles of the 'Print Your Certificate' button only.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
*
*/
/* Update the colors to match your theme, and feel free to add additional
* styles as well (border radius, text transform, etc.)
@davewarfel
davewarfel / learndash-video-progression-responsive.css
Last active Jun 2, 2020
How to make LearnDash video progression videos responsive on all devices
View learndash-video-progression-responsive.css
/**
* PLEASE NOTE: THIS IS VERY OLD CODE, AND USED TO WORK FOR THE "LEGACY" TEMPLATE, BEFORE LEARNDASH 3.0. IT ALSO DEPENDS ON WHAT THEME YOU ARE USING.
*
* IT MAY OR MAY NOT WORK FOR YOU.
*
* I RECOMMEND YOU TRY ENABLING/DISABLE THE "RESPONSIVE VIDEO CSS" OPTION IN LEARNDASH SETTINGS IF YOU'VE HAVING VIDEO ISSUES.
*/
/**
* This should work for all types of videos: YouTube, Vimeo, Wistia & local videos.
@davewarfel
davewarfel / learndash-3-focus-mode-navigation-expand-arrows.css
Created Jun 28, 2019
LearnDash 3.0 - Focus Mode - Course Navigation - Customize the expand/collapse arrow links
View learndash-3-focus-mode-navigation-expand-arrows.css
/**
* This only works when using the LearnDash 3.0 template.
*
* Use the following CSS to apply a specific background color to the circle
* around the arrow, and then change the color of the arrow itself.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
*
* Use your own color values for both background-color and color.
@davewarfel
davewarfel / learndash-uo-dashboard-shortcode-lesson-numbers.css
Last active Oct 31, 2020
Add sequential lesson numbers to [uo_dashboard] shortcode
View learndash-uo-dashboard-shortcode-lesson-numbers.css
/**
* By default, the Uncanny Owl Toolkit's [uo_dashboard] shortcode does not apply
* lesson numbers to its output. This code will add lesson numbers via CSS.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer. They will add sequential numbers to all lessons
* that are displayed via the Uncanny Owl [uo_dashboard] shortcode.
*
* Feel free to remove the period (.) after the number, adjust the margin,
* or add additional custom styles.
@davewarfel
davewarfel / learndash-uo-dashboard-shortcode-topic-numbers.css
Last active Oct 31, 2020
Add sequential topic numbers to [uo_dashboard] shortcode
View learndash-uo-dashboard-shortcode-topic-numbers.css
/**
* By default, the Uncanny Owl Toolkit's [uo_dashboard] shortcode does not apply
* topic numbers to its output. This code will add topic numbers via CSS.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer. They will add sequential numbers to all topics
* that are displayed via the Uncanny Owl [uo_dashboard] shortcode.
*
* This works best when also using lesson numbers. This will create the following structure:
*