Skip to content

Instantly share code, notes, and snippets.

@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 / default-wordpress-blocks-sass.scss
Last active Oct 8, 2020
WordPress Blocks Styles - Cleaned Up, Commented & Sassified
View default-wordpress-blocks-sass.scss
/**
* WordPress Blocks
*
* Default block styling included with WordPress core.
* Provides a better starting point for WordPress theme developers,
* especially when using Sass.
*
* @link https://github.com/WordPress/WordPress/blob/master/wp-includes/css/dist/block-library/style.css
*
* Most styles from the above file are included.
@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-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-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-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-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 / expand-learndash-course-nav-widget-lessons.css
Created Jul 19, 2018
Auto-Expand Lessons in LearnDash Course Navigation Widget
View expand-learndash-course-nav-widget-lessons.css
/**
* This code will do two things:
*
* 1. Expand the topics (beneath each lesson) in the LearnDash
* course navigation widget.
*
* 2. Hide the arrow that allows lessons to be expanded/collapsed.
*
* NOTE: Be careful using this if you have a large number of lessons and/or topics.
* It could make for a REALLY long sidebar.
@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:
*
@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.
You can’t perform that action at this time.