Styling Restricted Content

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:
https://codeable.io/developers/restrict-content-pro/

If a post, page, or another piece of content has been restricted with Restrict Content Pro, then extra HTML classes will be added via the post_class filter. In order for them to appear, your theme must be using the post_class() function in your template.

These classes can be used to style the restricted content differently. Here's a list of the classes that may be added:

• rcp-is-restricted - Is added to any post/page/etc. that has restriction settings.
• rcp-can-access - Is added if the content has been restricted and the currently logged in user has access to view it.
• rcp-no-access - Is added if the content has been restricted and the currently logged in user does not have access to view it.

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.

Here's an example for adding a Font Awesome padlock icon in front of restricted content in the Twenty Sixteen theme:

.rcp-no-access .entry-title:before {
    content: '\f023';
    font-family: FontAwesome;
    margin-right: 15px;
}

The icon should appear for anyone who doesn't have access to view the restricted content.

With a bit more code, you can even unlock the padlock for someone who does have access:

// Default to the closed padlock for all restricted content.
.rcp-is-restricted .entry-title:before {
    content: '\f023';
    font-family: FontAwesome;
    margin-right: 15px;
}

// Override to show the unlocked icon if the user has access.
.rcp-can-access .entry-title:before {
    content: '\f09c';
}

Note: The Font Awesome stylesheet needs to be added to your site separately.