Request: Scope CSS to shortcode container (wordfence_2fa_management)

Resolved Tetsuya Imamura
(@s56bouya)

4 months, 1 week ago
I am using the Wordfence plugin and have enabled the
wordfence_2fa_management shortcode on a public-facing page.

When this shortcode is used, Wordfence loads CSS whose scope is too broad,
and the styles affect elements outside of the shortcode output, causing unintended side effects across the page.

In particular, label and a elements are heavily affected.
The impact on a elements is especially severe, as link styles across the entire page are overridden.

For example, the following global CSS rule is applied:
```
a {
 color: #00709e;
}
```
This rule is loaded from the following CSS file:
```
/wp-content/plugins/wordfence/modules/login-security/css/admin.1766263234.css?ver=1.1.15
```
At the same time, the content generated by the wordfence_2fa_management shortcode is wrapped with the following ID:
```
wfls-management-embedded
```
To avoid affecting unrelated page elements, could you please consider
limiting the CSS scope to elements inside #wfls-management-embedded only,
instead of applying global selectors?

This would help prevent unintended styling conflicts when the shortcode is used on non-admin or front-end pages.

Thank you for your consideration.

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support wfphil
(@wfphil)

4 months, 1 week ago

Hi @s56bouya

Our documentation below states that in order to be able to use our shortcode you may have to edit PHP and CSS:

2FA Management Shortcode

When enabled, the “wordfence_2fa_management” shortcode may be used to provide access for users to manage 2FA settings on custom pages. Depending on how your site is built, you may be able to simply use the shortcode in your user account page template, but in other cases, you may need to edit PHP files. If you’re not familiar with modifying PHP files, you will want to enlist the help of a developer to put this in place. You will also likely need to customize styles to make the 2FA setup fit with your site. Testing this shortcode with your site setup is necessary to verify theme and plugin compatibility.

https://www.wordfence.com/help/login-security/
Thread Starter Tetsuya Imamura
(@s56bouya)

4 months, 1 week ago
Hello, thank you for your reply.

At this point, I do not believe this issue has been resolved yet.

I have already read the documentation you pointed me to.

However, I am a bit concerned that the intent of my request may not have been fully understood.

I understand that, depending on the situation, PHP or CSS customization may be required on the user side.
That said, as mentioned in my previous message, my request is specifically about the CSS scope being too broad, and I am asking you to consider changing this behavior on the plugin side.

Currently, I am applying link colors using global styles in theme.json, but these styles are being overridden by the CSS loaded by Wordfence.
For reference, my theme.json includes the following configuration:
```
"styles": {
    "elements": {
        "link": {
            "color": {
                "text": "var(--wp--preset--color--contrast)"
            }
        }
    }
}
```
This theme.json approach is used in WordPress default themes such as Twenty Twenty-Three, Twenty Twenty-Four, and Twenty Twenty-Five.
While I have not verified every theme, this pattern is commonly adopted by many other themes as well.

Because of this, I believe it would be more appropriate for the plugin to limit the CSS scope, rather than requiring theme-level overrides.

Could you please confirm whether the intent of my request is clear?

Thank you for your time.
Plugin Support wfphil
(@wfphil)

4 months, 1 week ago

Hi @s56bouya

Thank you for the additional feedback. I have asked the team about this and I will send a reply once I have an update.

Plugin Support wfphil
(@wfphil)

4 months, 1 week ago

Hi @s56bouya

We are going to add an improvement for this in a future version of the plugin but we don’t have a timescale for when that will be.

Thread Starter Tetsuya Imamura
(@s56bouya)

4 months, 1 week ago

Thank you for taking this into consideration.
I believe addressing this would make the plugin more user-friendly, and I appreciate your efforts.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.