Reset all styling for a particular submenu page

  • So I’m currently developing a submenu page for my plugin and I’m trying to import certain third party stylesheet library to the same page, the problem is some of the styling which are defined in wp-admin folder overrides the styling coming from the library itself

    for example?, I’ve added an input tag to the page, in the forms.css (wp-admin) there is a border style written in input[type=’text’] selector (border: 1px solid #7e8993) but in third party CSS which I’ve imported doesn’t have any styling for the same selector and thus I’m getting those border color on my input tag, there are many such styling involved which would override what the library has specified, I’m enqueueing those stylesheet even with the highest priority..

    do I need to dequeue certain stylesheets from wp-admin? what can I do to fix this?

    thanks.

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

  • You could use an iframe.
    But if you are in the WP admin, it’s best to conform to the admin’s styles.

    Moderator bcworkz

    (@bcworkz)

    Hook priority isn’t necessarily effective with styles. Specify dependencies to ensure your style loads after dependents. Then your rules with equivalent specificity will take precedence. For specific problem styles where you have trouble taking precedence you could embed a style block into your HTML.

    Thread Starter Prem Surana

    (@saltylake)

    okay so i found out the problem was with specificity

    input[type="text"] had higher specificity (from wp-admin)
    than what the library had .form-control

    I cannot use iframe as i’m dynamically rendering html and their values using vue

    is there anything i can do rather than manually overriding all of the styles because of the specificity issue?

    I think the best way is to use the admin styles or get out of the admin. Open a popup window or use an iframe. Do it in the Customizer instead?

    Moderator bcworkz

    (@bcworkz)

    If you aren’t going to use the default admin styles anyway, getting out of admin is a reasonable approach. But if you choose to stay, enqueue your own admin style with equal specificity and ensure its dependency is on the related existing stylesheet so yours loads after the equivalent existing rule, thus taking precedence.

    The do_action() call for “admin_enqueue_styles” passes the current screen ID to your callback so you can conditionally enqueue your styles only when needed.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Reset all styling for a particular submenu page’ is closed to new replies.