Styling Restrict Content Pro Login and Registration Form Fields

The Restrict Content Pro plugin lets you easily control access to content on your site. As part of this, it allows you to add registration and login forms which let users signup and access the content. Here are a few tips on how to style these components.

Styling the Restrict Content Pro Login / Registration Form Input Fields

Here is an example of CSS for applying some basic styles to the text / password fields of Restrict Content Pro forms:

/* Restrict Content Pro - text and password form fields */

#rcp_login_form input[type=text],
#rcp_login_form input[type=password],
#rcp_registration_form input[type=text],
#rcp_registration_form input[type=password] {

	color: white;
	background-color: #000;
	width: 100%;
	padding: 12px;
	border-radius: 6px;
	font-family: tahoma;
}


/* Restrict Content Pro - text and password form fields (focused) */

#rcp_login_form input[type=text]:focus,
#rcp_login_form input[type=password]:focus,
#rcp_registration_form input[type=text]:focus,
#rcp_registration_form input[type=password] {

	background-color: #333;
}
The first block applies to the normal state of the fields. The second block is (additionally) applied to an input field when it has focus (i.e. the user is currently editing it).

Hiding the Membership Details Box on the Restrict Content Pro Registration Form

Restrict Content Pro includes a "Membership Details" box on registration forms, with details of the membership cost and renewal date. If you wish to hide this box, you can do so with the following CSS:

#rcp_registration_form .rcp_registration_total {
    display: none;
}

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

12 Comments

  1. Hi, thank you for this…what about displaying the price of the respective level the user is signing up for with dynamic consideration according to the discount code they may use ?

    Reply
    • Hey Chris, I've had a bit of a look and can't see any obvious way to achieve this with existing shortcodes, etc. I suspect it may require custom PHP code to achieve, but I'm not familiar enough with Restrict Content Pro at the moment to say for certain. I've logged it for further investigation and will reach out with an update if I'm able to figure out how to do it. Thanks!

      Reply
  2. Hello,

    I used your Divi Booster tool and it was great.

    And recently I have posted a comment about changing the styling of the Content Pro Login plugin. Did you see it?

    Thanks

    Reply
    • Hi sydi, I'm glad you found Divi Booster useful :) I've just replied to your other comment / updated the post with the CSS to hide the "Membership Details" box. Hope that helps!

      Reply
    • Hi sydi, I've just added a section to the post with the CSS to hide the Membership Details box. I hope it helps, but let me know if not. Thanks!

      Reply
  3. Thank you that css is perfect. I have Divi Booster and that's great too!

    Reply
    • Great to hear they're both helping you, Dominic. Thanks!

      Reply
  4. Thanks Dan! You've just saved me from wasting hours trying to solve this CSS puzzle :)

    Reply
    • You’re welcome, Sheila! Glad it helped :)

      Reply
  5. Where should i paste this code ?

    Reply
    • Hi Hamid, you can paste it into the "Divi > Theme Options > General > Custom CSS" box (after anything else in there), or into the style.css of your child theme, if you're using one. I've added a link above to my post on adding CSS to Divi. Hope that helps!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.