Worked on my site!! super helpful. thank you! For anyone watching this, I think it works even better if you set a smaller padding (10-20px) on the left and right side, so that it'll work well on mobile devices. With the max-width already in use, a smaller left and right padding doesn't really affect the desktop either way.
Great channel ! You are so helpful ! I applied a password protected are on my WP website. When it appears on my phone its all garbled..I know how to make my website mobile friendly but the password protected page wont work on a mobile...can you help ?
How to change the text on this page template? I know one could do it in functions.php by overwriting these texts, I don't know the code when using a child theme though.
Hey Josh - this was super helpful. I had some issues come up when I added the CSS in the theme customized - it made my global header and footer act all kinds of funky. **Resolved by** simply adding the CSS in the *Divi Theme Options > Custom CSS* and now it works just fine! :)
Yeah margin will work fine on mobile and by setting max width it'll be fine on phones. The padding may need to be adjusted for mobile depending on the look but 100px should be fine in most cases. Great point!
I managed to apply these changes and looks great.. Just one more thing about the phrase itself where it says "To view this protected post...etc" if we can change that?
Thanks!! Very nice information - it all works fine. Only problem for me, is that password-protection somehow overrules the Divi section settings. Fx I had a 90% width set on a section, but it wont really show. I have to do some padding instead. So it messes up what the Divi core, somehow. Its not your code, cause I tried it before I used it.
Wow - simple solution. I just had to write the password code, and login on the page. After that no problem... So it affects the css-class, i presume. :)
Beautiful, Bobby! If you're ready to take things to the next level, I currently have a promo out for 10% off on my CSS Course, use code "CSS30" at checkout! joshhall.co/product/divi-css-course/
I don't usually comment, but I had to as you saved me! Thank you so much for such a fabbo and clear video. I could follow it and I'm a cartoonist not a web designer LOL ⭐️⭐️⭐️⭐️⭐️
All I want is a popup which asks the user a password and on submission redirects to the restricted page. Such a simple function and it's so difficult to do in elementor. I tried several methods but none works. Either its entire page or login/password. I just want a pop up with restricted access. I'm not a coder. can anyone help?
Hi Josh. Thank you for your tutorial. I have managed to format my log in page quite well with the margins and even have put a background image. However the background image is bleeding into my box where the password has been entered. Can u please share the code to make the background of just the password box to white. And also is there a way to increase the space between the password box and the "Enter" Button as currently the enter button is stuck just beneath the password box. Really appreciate your assistance. Thanks so much. The URL is bctaskforce.com/workgroups-landing-page/ and the css i have used is .post-password-form { padding: 200px 300px; height: 100vh; background-image: url("bctaskforce.com/wp-content/uploads/2020/07/Globe-network-02.jpg"); }
really useful, it would have been nice to see also how you tackle the footer part to make it stick to the bottom for this page
Worked on my site!! super helpful. thank you! For anyone watching this, I think it works even better if you set a smaller padding (10-20px) on the left and right side, so that it'll work well on mobile devices. With the max-width already in use, a smaller left and right padding doesn't really affect the desktop either way.
If you're using elementor, it's:
.post-password-form {
min-height: initial;
padding: 100px;
max-width: 700px;
margin: auto;
}
Thanks. I tried this on my Elementor site, but it still didn't work for me. Works in Chrome, though.
Thank you 👍🏻👍🏻
Very nice...but it doesn't function with new version and with elemantor...do you have an idea to do this now ? Regards Peter
Hi Josh, I would like to know if there's the possibility to add HTML instead of just changing CSS.
Thank you in advance
Thanks the css worked great, do you have a tutorial on how to change the text?
Great channel ! You are so helpful ! I applied a password protected are on my WP website. When it appears on my phone its all garbled..I know how to make my website mobile friendly but the password protected page wont work on a mobile...can you help ?
I've never done any css ever... this worked very well.
Thank you
Brilliant and easy to understand. Cheers mate.
How would we change the background color of the password-protected page?
Hey Josh! How can i change the text "to view ..below"?
How to change the text on this page template? I know one could do it in functions.php by overwriting these texts, I don't know the code when using a child theme though.
Hey Josh - this was super helpful. I had some issues come up when I added the CSS in the theme customized - it made my global header and footer act all kinds of funky.
**Resolved by** simply adding the CSS in the *Divi Theme Options > Custom CSS* and now it works just fine! :)
Hi Josh, Thank you for the video. Is there a way to have the cursor default to being in the Password Box?
That will still all look good appearing on mobile phones.
Just few days ago this actually was a question in one of the page builder groups on FB.
Yeah margin will work fine on mobile and by setting max width it'll be fine on phones. The padding may need to be adjusted for mobile depending on the look but 100px should be fine in most cases. Great point!
I went ahead and adjust the post code with a media query for mobile :) Good call.
Hi there, how did you display the code section to edit it?
I managed to apply these changes and looks great.. Just one more thing about the phrase itself where it says "To view this protected post...etc" if we can change that?
Thanks!! Very nice information - it all works fine. Only problem for me, is that password-protection somehow overrules the Divi section settings. Fx I had a 90% width set on a section, but it wont really show. I have to do some padding instead. So it messes up what the Divi core, somehow. Its not your code, cause I tried it before I used it.
Wow - simple solution. I just had to write the password code, and login on the page. After that no problem... So it affects the css-class, i presume. :)
Wow and just like that, I realized I could code CSS, really helpful! Thank you, going to look up your classes!
Beautiful, Bobby! If you're ready to take things to the next level, I currently have a promo out for 10% off on my CSS Course, use code "CSS30" at checkout!
joshhall.co/product/divi-css-course/
So helpful! Thanks Josh!
Thanks a lot, this was helpful and well explained!
Hi. Is it possible to add a logo on top of the form?
hey, is there a way I can allow certain roles to access all password protected posts?
Hi Josh, I need from time to time a password not case sensitive? Can you see any solution there?
Thank you. Very useful
Thank you Josh, great help!
Thank you! Exactly what I was looking for!
Hey maybe this is a stupid question but I would like to change the text. I just can not find where to change it 😢😢😢
Unfortunately I think you have to do that with a little php. Out of my realm of expertise. Certainly wish it would be easier natively in WordPress!
this helped thanks, now to customize it further i gotta do a course lol
Thanks, that was exactly what I needed.
you nailed it bruh
Thank you Josh!
I don't usually comment, but I had to as you saved me! Thank you so much for such a fabbo and clear video. I could follow it and I'm a cartoonist not a web designer LOL ⭐️⭐️⭐️⭐️⭐️
All I want is a popup which asks the user a password and on submission redirects to the restricted page. Such a simple function and it's so difficult to do in elementor. I tried several methods but none works. Either its entire page or login/password. I just want a pop up with restricted access. I'm not a coder. can anyone help?
I can relate to this problem, did you ever find a solution?
@@caergalin3854 no
Thanks!
Awesome thank you
Thanks You Its Working
Still relevant in 2023/2024! Had to do this for Elementor as its just hiding stuff.
Hi Josh. Thank you for your tutorial. I have managed to format my log in page quite well with the margins and even have put a background image. However the background image is bleeding into my box where the password has been entered. Can u please share the code to make the background of just the password box to white. And also is there a way to increase the space between the password box and the "Enter" Button as currently the enter button is stuck just beneath the password box. Really appreciate your assistance. Thanks so much. The URL is bctaskforce.com/workgroups-landing-page/ and the css i have used is
.post-password-form {
padding: 200px 300px;
height: 100vh;
background-image: url("bctaskforce.com/wp-content/uploads/2020/07/Globe-network-02.jpg");
}
i like super secure passwords 1234 😁
nobody can pass this
Thanks, Josh! Very useful!