Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
If you’re using LearnDash’s login modal, you might feel as though it’s a bit too wide. If you aren’t also using the free registration part of the modal, then the login form takes up a lot of space on the screen.
This super-quick tutorial will show you how to shrink the size of the login modal popup window. You’ll be able to customize the CSS to whatever width you want to use.
By default, the LearnDash login modal is set to 80% width. This means it will take up 80% of whatever the screen size of the visitor. On larger screens, this will mean 1000px or more. It might look something like this:
That’s way more space than we need. Let’s reduce its width and make it look more like a normal popup window.
The CSS
Add this CSS to the Appearance > Customize > Additional CSS panel in the WordPress admin area. You can adjust the width as you see fit. I think 550px looks really nice.
.learndash-wrapper .ld-login-modal {
max-width: 550px;
}Upgrade the Entire Design
If you want to take things a step further, you can upgrade the entire design of the LearnDash login modal (registration panel, too) with our Design Upgrade Pro for LearnDash plugin.
You can change background colors, text colors, the close icon, input color, remove the login login, remove some of the description text AND add a background overlay to the page behind the modal. Here’s an example of how we spiced it up with Design Upgrade Pro for LearnDash.
Zoe
Do you happen to know how to change the description text underneath the Login heading?
Dave Warfel
You’ll need to either use a translation plugin like Loco Translate or Say What? … or customize the LearnDash template files and change the text in there. A translation plugin is probably the better method for most users.