CSS how to highlight restricted pages?

[Dennis_G]

Restricted pages are marked with a small red padlock.

Is there a way to highlight for example the whole page title or any other element dependend on the padlock?

We need to clearly show if the page is "secure" or "open", the padlock is too small.

Any help is welcome :-)

[Diego]

 Hello @Dennis_G !

As I understand, you need to create something that more clearly displays the current page status.

As you have noticed, we are unable to do so natively. However, we might be able to reach the desired outcome by using CSS in Confluence.

NOTE:

Anyone coming from Confluence Cloud should be aware that this kind of solution is not natively available for your platform. You can read more here:

• [Atlassian Support] Functional differences in Confluence Cloud 

• [Atlassian Support] Compare Atlassian cloud vs server

You can also try to use the HTML Macro to try and create a script to achieve your desired result. Here, this thread and our documentation might be helpful to understand some basic usage of the macro:

• [Atlassian Community] Render page resources (image,js,css,cdn) in Confluence HTML Macro but with limited scope
• [Atlassian Community] HTML macro with javascript
• [Confluence Server] How to use JavaScript in Confluence

You will need to monitor the element that corresponds to the padlock in Confluence. For Confluence Cloud (I did not have a Server instance at hand), this is the element:

You should be able to find the corresponding one in Confluence Server by using the developer tools of your browser.

I hope this shines some light on where to go! Let us hear from you.