Customizing The Blocking UI On The Registration Form

Note: This is part of the developer docs and is considered custom code.
Unfortunately, we cannot provide support for custom code at this time as we do not have the additional resources that would be necessary to provide support for custom code.

If you need assistance with this, please reach out to our list of consultants for further assistance:

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.

Please note: All of these examples serve as a guideline and are here for your convenience. We do not provide support for troubleshooting or modifying these and we do not provide support for any custom development. If you need help with any of these examples, consider hiring a developer.

Have more questions? Submit a request
Powered by Zendesk