Customizing The Blocking UI On The Registration Form

Restrict Content Pro uses jQuery BlockUI to block the registration form when it's doing things like calculating totals, changing the payment form fields, and so on. RCP styles this blocking element with some styles for color, opacity, border, and some others. Sometimes people want to customize these styles to match their site. Here's how to do that.

First, it's important to understand that jQuery BlockUI adds the styles to the blocking element itself. If you're familiar with CSS, don't cry when you see all the !important declarations below. It's necessary to override the styles added directly to the blocking element.

WordPress comes with a place where you can input custom styles. To use that, go to Appearance> Customize>Additional CSS in your WordPress dashboard.

Here's a sample of changing the color to blue, changing the opacity of the overlay, and adding a box shadow to it.

.blockUI.blockOverlay {
	background-color: #0088d0 !important;
	opacity: 0.5 !important;
	box-shadow: 0 0 10px 1px #000 !important;

That's all there is to it. Add your own custom styles to make the overlay match your site's design.

Powered by Zendesk