Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I style a WordPress page protect form

I have been trying to change the style of this WordPress page protect form.

The WordPress page protect function is enabled and the password is set using WordPress, however I previously had the PPWP plugin installed and with the plugin I was able to make changes to the look and feel of the form.

I also have Elementor Pro installed and it appears that PPWP used Elementor to create the form and bypass WordPress to control the page password protection function.

Now that I removed the PPWP plugin I can enable the password protection using WordPress but can no longer modify the look and feel. I am hoping to be able to use the Hello theme Customizer Additional CSS to make changes to the look of the form by zeroing in on a unique id but cannot figure out how to do that.

If I just try to modify the class it also affects other pages and containers on the site. I only want to manipulate the look and feel of this one form.

The source code for the form is as follows (https://www.bohoblossomstudio.com/freebies-vault/):

<div data-elementor-type="single-page" data-elementor-id="4471" class="elementor elementor-4471 elementor-location-single post-4687 page type-page status-publish post-password-required hentry" data-elementor-post-type="elementor_library">
   <div class="elementor-element elementor-element-26d69811 e-flex e-con-boxed e-con e-parent" data-id="26d69811" data-element_type="container">
     <div class="e-con-inner"></div>
   </div>
   <div class="elementor-element elementor-element-324307b9 e-flex e-con-boxed e-con e-parent" data-id="324307b9" data-element_type="container">
     <div class="e-con-inner">
       <div class="elementor-element elementor-element-50c64a7e elementor-widget elementor-widget-theme-post-content" data-id="50c64a7e" data-element_type="widget" data-widget_type="theme-post-content.default">
         <div class="elementor-widget-container">
           <form action="https://www.bohoblossomstudio.com/wp-login.php?action=postpass" class="post-password-form" method="post">
             <p>This content is password protected. To view it please enter your password below:</p>
             <p><label for="pwbox-4687">Password: <input name="post_password" id="pwbox-4687" type="password" spellcheck="false" size="20" /></label> <input type="submit" name="Submit" value="Enter" /></p>
           </form>
         </div>
       </div>
    </div>
  </div>
</div>

Screenshot of Form:
Screenshot of Form

I am able to add padding using Additional CSS and not affect other containers on the site but not able to center it on the page. I just have this Additional CSS at the moment:

div.elementor-4471 {
  padding:2rem;
}

This is the CSS shown for this class according to inspector:

.elementor-4471 .elementor-element.elementor-element-26d69811{
  --display:flex;
  --flex-direction:row;
  --container-widget-width:initial;
  --container-widget-height:100%;
  --container-widget-flex-grow:1;
  --container-widget-align-self:stretch;
  --flex-wrap-mobile:wrap;
  --background-transition:0.3s;
}

My HTML, PHP, CSS, and JS skills are rudimentary. Any help figuring out how to use CSS, PHP, or JS to manipulate this would be appreciated. I am hoping to learn from this and then be able to apply it to other such situations. Thank you in advance for any tips, suggestions, and solutions.

Tags:

2

Answers


  1. 0

    To modify the appearance of the password protection form on a specific WordPress page without affecting others, use the unique ID (e.g., #pwbox-4687) in combination with custom CSS. Each page has a unique post ID, allowing you to target only the password form on that page, ensuring that your styles won’t impact forms on other pages, follow these steps:

    1. In your WordPress dashboard, go to Appearance > Customize.
    2. Select the Additional CSS option.
    3. Use the following CSS to style the form, ensuring changes apply only to this page’s form.

    /* Style the input field */

    #pwbox-4687[type="password"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    After adding the custom CSS, click Publish to save and apply the changes.

    Login or Signup to reply.
  2. 0

    Considering your applied code:

    div.elementor-4471 {
  padding:2rem;
}

    This would apply the padding to the element (as long as the selector div.elementor-4471 matches). However, if you were to apply e.g. display: block instead of padding: 2rem, the display: flex rule below would overwrite it. This is due to CSS specificity. Knowing this, you need to apply your desired styling with a higher specificity than the code below.

    .elementor-4471 .elementor-element.elementor-element-26d69811{
  --display:flex;
  --flex-direction:row;
  --container-widget-width:initial;
  --container-widget-height:100%;
  --container-widget-flex-grow:1;
  --container-widget-align-self:stretch;
  --flex-wrap-mobile:wrap;
  --background-transition:0.3s;
}

    Looking at the link provided, you need to apply justify-content: center to center the form. You can use this selector:

    .elementor-element-324307b9.e-flex .e-con-inner {
   justify-content: center;
}

    You need a selector like this due to specificity – as this element has this styling below applied, so you need to overwrite it (although "initial" is set as a CSS variable, the value of that variable is "initial").

    .e-con.e-flex>.e-con-inner {
   justify-content: initial;
}

    but also because you need a unique identifier (.elementor-element-324307b9), so your CSS doesn’t interfere with anything else on the page.

    You can apply the styling the same place you placed your current custom CSS.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search