Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LearnDash 3.0 - Focus Mode - Course Navigation - Customize the expand/collapse arrow links
/**
* 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.
*/
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview .ld-expand-button .ld-icon {
background-color: #000;
color: #fff;
opacity: 1;
}
@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 25, 2020

Hi nice to meet you!
I have any question about side bar in focus mode of learndash.
Default, sidebar has placed on left side of screen, I want to placed sidebar's position on right side.
2
this is my project status.
Please help me!!

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jul 28, 2020

I also commented on your post on the wordpress.org support site, but here's the CSS again:

@media (min-width:768px) {
	.learndash-wrapper .ld-focus .ld-focus-sidebar {
		left: unset;
		right: 0;
		border-right: 0;
		border-left: 1px solid var(--ldx-course-nav-line-separator-color);
	}
	.learndash-wrapper .ld-focus .ld-focus-main {
		margin-left: 0;
		margin-right: 350px;
		-webkit-transition: margin-right .3s ease;
		transition: margin-right .3s ease;
	}
	.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar {
		-webkit-transform: translateX(-webkit-calc(100% - 50px));
		-ms-transform: translateX(calc(100% - 50px));
		transform: translateX(calc(100% - 50px));
		border-left: 0;
	}
	.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
		padding: .75em 1em .75em 4em;
	}
	.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
		right: unset;
		left: 0;
	}
	.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
		transform: translateY(-50%) translateX(-20%) rotate(180deg);
	}
	.learndash-wrapper .ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
		transform: translateY(-50%) translateX(-20%) rotate(0deg);
	}
}
@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

thank you for your help!! Good service!
How can I give you good review?
I will give you best review!
By the way, I have other problems on using learndash plugin.
Could you keep touch with me on skype or whatsapp?
We could have best connection together.
My skype address is stjamesmichael1126@outlook.com
My gmail is stjamesmichael11.26@gmail.com
What is your skype address? let me know that.
thank you good service

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jul 28, 2020

You can leave a review on this page:
https://wordpress.org/support/plugin/design-upgrade-learndash/reviews/

It'd be awesome if you could mention the great support I provide.

I don't do Skype or WhatsApp, and am not currently available for hire.

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

Ok, then I'd like to share my problem with you.
I want to insert icons like sample. This is my project status now.
2

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

This is sample what I want.
1

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

thank you for your help

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jul 28, 2020

You'll need custom code for that. You'll probably have to edit the LearnDash template files.

LearnDash doesn't provide any option for that.

There is a plugin called Visual Customizer by Snap Orbital that has some custom icons, but I don't know that it will give you this exact output. Might be worth a look though.

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

thank you for your help!

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

Hello, I have other problem for using learndash.
I added video on lesson. By the way I can't see progress of lesson on icon by lesson button.
I can't see change progress after watch video.
1

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jul 28, 2020

If you're using LearnDash's video progression feature, and auto-completing the lesson after the video completes, it should change to a checkmark.

But if not, and you're embedding the video directly in WordPress, then the user will need to click the "mark complete" button for the checkmark to change.

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 28, 2020

Hello, dear sir.
let me know that more.
Untitled

@davewarfel

This comment has been minimized.

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 30, 2020

thank you for your help!
But I can't see my solutions on that.
Please check my screenshot!
saaa jpg
I inserted my shortcode in input of lesson editor.

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 30, 2020

But I can't see progression in site. Progression don't changed.
44
Please help me!

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 30, 2020

Thank you for your help!
But let me know more.
I add shortcode on editor of lesson in admin panel. Please see
saaa jpg
my screenshot!

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 30, 2020

But I can't see change of progression in page.
Progression icon don't change.
44
Please help me!

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 30, 2020

If you are a expert for learndash, I will hire you

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jul 30, 2020

  1. I don't think that's a valid shortcode.
  2. It looks like you've customized the LearnDash focus mode. I also can't see if there are buttons below your video. There should be.
  3. I am an expert but I'm not available for hire.

Good luck with your project.

@talentedFullStack

This comment has been minimized.

Copy link

@talentedFullStack talentedFullStack commented Jul 30, 2020

Hey member of learndash center!
I want auto complete of lesson after watching video.
No need complete lesson button.
Do you understand me?
For best using of learndash, please help me!

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jul 30, 2020

Sorry, I'm all out of help. Good luck.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment