plugins - Overrideignore CSS from active theme as not to interfere with my custom CSS

admin管理员组

文章数量:1125897

I'm writing a simple plugin that shows on pages/posts a form with customized style for input fields, checkboxes, buttons, etc... via a shortcode. When user writes the shortcode in the page, it generates some CSS, some HTML and some JavaScript but result is not rendered as I want I think because of active theme CSS. In fact if I wrote the same combination of CSS, HTML and JavaScript in a simple HTML file rendering is perfect and if, in WordPress, I change theme, rendering changes...

How can I prevent the active theme from interfering with my plugin by rendering the controls as if they were inserted in a simple HTML page?

EDIT, added code:

  <div class="chatbox-container">
    <button class="chatbox-open">
        <i class="fa fa-comment fa-2x" aria-hidden="true"></i>
      </button>
    <button class="chatbox-close">
        <i class="fa fa-close fa-2x" aria-hidden="true"></i>
      </button>
    <section class="chatbox-popup">
      <header class="chatbox-popup__header">
        <aside style="flex:3">
          <i class="fa fa-user-circle fa-4x chatbox-popup__avatar" aria-hidden="true"></i>
        </aside>
        <aside style="flex:8">
          <h1>Tal Dei Tal</h1> Seller (Online)
        </aside>
        <aside style="flex:1">
          <button class="chatbox-maximize"><i class="fa fa-window-maximize" aria-hidden="true"></i></button>
        </aside>
      </header>
      <main class="chatbox-popup__main">
        Some sample text, here GDPR terms...
      </main>
      <footer class="chatbox-popup__footer">
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-camera" aria-hidden="true"></i>
        </aside>
        <aside style="flex:10">
          <textarea type="text" placeholder="Type your message here..." autofocus></textarea>
        </aside>
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-paper-plane" aria-hidden="true"></i>
        </aside>
      </footer>
    </section>
    <section class="chatbox-panel">
      <header class="chatbox-panel__header">
        <aside style="flex:3">
          <i class="fa fa-user-circle fa-3x chatbox-popup__avatar" aria-hidden="true"></i>
        </aside>
        <aside style="flex:6">
          <h1>Tal Dei Tali</h1> Seller (Online)
        </aside>
        <aside style="flex:3;text-align:right;">
          <button class="chatbox-minimize"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
          <button class="chatbox-panel-close"><i class="fa fa-close" aria-hidden="true"></i></button>
        </aside>
      </header>
      <main class="chatbox-panel__main" style="flex:1">
        Some sample text, here GDPR terms...
      </main>
      <footer class="chatbox-panel__footer">
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-camera" aria-hidden="true"></i>
        </aside>
        <aside style="flex:10">
          <textarea type="text" placeholder="Type your message here..." autofocus></textarea>
        </aside>
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-paper-plane" aria-hidden="true"></i>
        </aside>
      </footer>
    </section>
  </div>

<style type="text/css">
.chatbox-container {
  all: initial;
  font-family: "Lato", sans-serif;
}

.chatbox-container h1 {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.chatbox-container button {
  color: inherit;
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  cursor: pointer;
}
.chatbox-container button.chatbox-open {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 52px;
  height: 52px;
  color: #fff;
  background-color: #0360a5;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  margin: 16px;
}
.chatbox-container button.chatbox-close {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 52px;
  height: 52px;
  color: #fff;
  background-color: #0360a5;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  margin: 16px calc(2 * 16px + 52px) 16px 16px;
}

.chatbox-container textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  height: calc(16px + 16px / 2);
  padding: 0 calc(16px / 2);
  font-family: inherit;
  font-size: 16px;
  line-height: calc(16px + 16px / 2);
  color: #888;
  background-color: none;
  border: 0;
  outline: 0 !important;
  resize: none;
  overflow: hidden;
}
.chatbox-container textarea::-webkit-input-placeholder {
  color: #888;
}
.chatbox-container textarea::-moz-placeholder {
  color: #888;
}
.chatbox-container textarea:-ms-input-placeholder {
  color: #888;
}
.chatbox-container textarea::-ms-input-placeholder {
  color: #888;
}
.chatbox-container textarea::placeholder {
  color: #888;
}

.chatbox-container .chatbox-popup {
  display: -webkit-box;
  display: flex;
  position: fixed;
  box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  display: none;
  bottom: calc(2 * 16px + 52px);
  right: 16px;
  width: 377px;
  height: auto;
  background-color: #fff;
  border-radius: 16px;
}
.chatbox-container .chatbox-popup .chatbox-popup__header {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  color: #fff;
  background-color: #0360a5;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.chatbox-container .chatbox-popup .chatbox-popup__header .chatbox-popup__avatar {
  margin-top: -32px;
  background-color: #0360a5;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.chat-container .chatbox-popup .chatbox-popup__main {
  box-sizing: border-box;
  width: 100%;
  padding: calc(2 * 16px) 16px;
  line-height: calc(16px + 16px / 2);
  color: #888;
  text-align: center;
}
.chatbox-container .chatbox-popup .chatbox-popup__footer {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  border-top: 1px solid #ddd;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.chatbox-container .chatbox-panel {
  display: -webkit-box;
  display: flex;
  position: fixed;
  box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  width: 377px;
  background-color: #fff;
}
.chatbox-container .chatbox-panel .chatbox-panel__header {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  color: #fff;
  background-color: #0360a5;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  -webkit-box-flex: 0;
          flex: 0 0 auto;
}
.chatbox-container .chatbox-panel .chatbox-panel__main {
  box-sizing: border-box;
  width: 100%;
  padding: calc(2 * 16px) 16px;
  line-height: calc(16px + 16px / 2);
  color: #888;
  text-align: center;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
}
.chatbox-container .chatbox-panel .chatbox-panel__footer {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  border-top: 1px solid #ddd;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  -webkit-box-flex: 0;
          flex: 0 0 auto;
}
</style>

I'm writing a simple plugin that shows on pages/posts a form with customized style for input fields, checkboxes, buttons, etc... via a shortcode. When user writes the shortcode in the page, it generates some CSS, some HTML and some JavaScript but result is not rendered as I want I think because of active theme CSS. In fact if I wrote the same combination of CSS, HTML and JavaScript in a simple HTML file rendering is perfect and if, in WordPress, I change theme, rendering changes...

How can I prevent the active theme from interfering with my plugin by rendering the controls as if they were inserted in a simple HTML page?

EDIT, added code:

  <div class="chatbox-container">
    <button class="chatbox-open">
        <i class="fa fa-comment fa-2x" aria-hidden="true"></i>
      </button>
    <button class="chatbox-close">
        <i class="fa fa-close fa-2x" aria-hidden="true"></i>
      </button>
    <section class="chatbox-popup">
      <header class="chatbox-popup__header">
        <aside style="flex:3">
          <i class="fa fa-user-circle fa-4x chatbox-popup__avatar" aria-hidden="true"></i>
        </aside>
        <aside style="flex:8">
          <h1>Tal Dei Tal</h1> Seller (Online)
        </aside>
        <aside style="flex:1">
          <button class="chatbox-maximize"><i class="fa fa-window-maximize" aria-hidden="true"></i></button>
        </aside>
      </header>
      <main class="chatbox-popup__main">
        Some sample text, here GDPR terms...
      </main>
      <footer class="chatbox-popup__footer">
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-camera" aria-hidden="true"></i>
        </aside>
        <aside style="flex:10">
          <textarea type="text" placeholder="Type your message here..." autofocus></textarea>
        </aside>
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-paper-plane" aria-hidden="true"></i>
        </aside>
      </footer>
    </section>
    <section class="chatbox-panel">
      <header class="chatbox-panel__header">
        <aside style="flex:3">
          <i class="fa fa-user-circle fa-3x chatbox-popup__avatar" aria-hidden="true"></i>
        </aside>
        <aside style="flex:6">
          <h1>Tal Dei Tali</h1> Seller (Online)
        </aside>
        <aside style="flex:3;text-align:right;">
          <button class="chatbox-minimize"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
          <button class="chatbox-panel-close"><i class="fa fa-close" aria-hidden="true"></i></button>
        </aside>
      </header>
      <main class="chatbox-panel__main" style="flex:1">
        Some sample text, here GDPR terms...
      </main>
      <footer class="chatbox-panel__footer">
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-camera" aria-hidden="true"></i>
        </aside>
        <aside style="flex:10">
          <textarea type="text" placeholder="Type your message here..." autofocus></textarea>
        </aside>
        <aside style="flex:1;color:#888;text-align:center;">
          <i class="fa fa-paper-plane" aria-hidden="true"></i>
        </aside>
      </footer>
    </section>
  </div>

<style type="text/css">
.chatbox-container {
  all: initial;
  font-family: "Lato", sans-serif;
}

.chatbox-container h1 {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.chatbox-container button {
  color: inherit;
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  cursor: pointer;
}
.chatbox-container button.chatbox-open {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 52px;
  height: 52px;
  color: #fff;
  background-color: #0360a5;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  margin: 16px;
}
.chatbox-container button.chatbox-close {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 52px;
  height: 52px;
  color: #fff;
  background-color: #0360a5;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  margin: 16px calc(2 * 16px + 52px) 16px 16px;
}

.chatbox-container textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  height: calc(16px + 16px / 2);
  padding: 0 calc(16px / 2);
  font-family: inherit;
  font-size: 16px;
  line-height: calc(16px + 16px / 2);
  color: #888;
  background-color: none;
  border: 0;
  outline: 0 !important;
  resize: none;
  overflow: hidden;
}
.chatbox-container textarea::-webkit-input-placeholder {
  color: #888;
}
.chatbox-container textarea::-moz-placeholder {
  color: #888;
}
.chatbox-container textarea:-ms-input-placeholder {
  color: #888;
}
.chatbox-container textarea::-ms-input-placeholder {
  color: #888;
}
.chatbox-container textarea::placeholder {
  color: #888;
}

.chatbox-container .chatbox-popup {
  display: -webkit-box;
  display: flex;
  position: fixed;
  box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  display: none;
  bottom: calc(2 * 16px + 52px);
  right: 16px;
  width: 377px;
  height: auto;
  background-color: #fff;
  border-radius: 16px;
}
.chatbox-container .chatbox-popup .chatbox-popup__header {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  color: #fff;
  background-color: #0360a5;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.chatbox-container .chatbox-popup .chatbox-popup__header .chatbox-popup__avatar {
  margin-top: -32px;
  background-color: #0360a5;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.chat-container .chatbox-popup .chatbox-popup__main {
  box-sizing: border-box;
  width: 100%;
  padding: calc(2 * 16px) 16px;
  line-height: calc(16px + 16px / 2);
  color: #888;
  text-align: center;
}
.chatbox-container .chatbox-popup .chatbox-popup__footer {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  border-top: 1px solid #ddd;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.chatbox-container .chatbox-panel {
  display: -webkit-box;
  display: flex;
  position: fixed;
  box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  width: 377px;
  background-color: #fff;
}
.chatbox-container .chatbox-panel .chatbox-panel__header {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  color: #fff;
  background-color: #0360a5;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  -webkit-box-flex: 0;
          flex: 0 0 auto;
}
.chatbox-container .chatbox-panel .chatbox-panel__main {
  box-sizing: border-box;
  width: 100%;
  padding: calc(2 * 16px) 16px;
  line-height: calc(16px + 16px / 2);
  color: #888;
  text-align: center;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
}
.chatbox-container .chatbox-panel .chatbox-panel__footer {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 16px;
  border-top: 1px solid #ddd;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  -webkit-box-flex: 0;
          flex: 0 0 auto;
}
</style>

• plugins
• themes
• shortcode
• css

Share Improve this question edited Mar 17, 2020 at 15:32 icolumbro asked Mar 14, 2020 at 17:49 icolumbroicolumbro 7911 silver badge99 bronze badges 1

• Your problem isn't WordPress specific, it's a general HTML problem. How to insert something in a webpage without that pages styling being applied to what you inserted. There is no WordPress specific solution to this – Tom J Nowell ♦ Commented Sep 17, 2020 at 18:24

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 2

There are only 2 ways to achieve this, neither are WordPress based:

1. Use an iframe

Make your shortcode display an iframe who's URL leads to the actual place that renders the HTML

2. Build a Web Component

Web components internal DOM are separated and isolated from the rest of the page, allowing you to load in your styles safe in the knowledge they'll only be applied to those DOM elements.

---

Neither of these solutions are WordPress based, or require WordPress knowledge. These are general web development solutions to a general web development problem

You can make sure that your CSS is enqueued after your theme's CSS and also make sure that your CSS is using rules that are more specific. This will help in making your CSS override the theme's CSS.

Worse-case scenario you could add !important to a few CSS rules if you are having a hard time overriding your theme.

When you use wp_enqueue_style you should use the wp_enqueue_scripts hook, it offers a priority parameter. Here is an example.

function wpse_my_plugin_styles() {
    $plugin_url = plugin_dir_url( __FILE__ );
    wp_enqueue_style( 'my_styles',  $plugin_url . "/css/style.css");
}

add_action('wp_enqueue_scripts', 'wpse_my_plugin_styles', 999); 

You could also create a child theme. This would allow you to customize the CSS however you want and not worry about it getting wiped out if the plugin updates.

Specificity in CSS is the most reasonable solution here because it's for 'a plugin' so it should be coded as though it could be successfully applied and utilized on any site regardless of theme. Yeah in this instance you could write a child theme or if you control the theme, edit the theme CSS itself, or add a bunch of !important declerations to you CSS but none of those are really WP Best Practices.

So first you want to make sure that the stylesheet for your plugin is properly enqueued:

function yrplugin_enqueue_frontend() {
    //I organize my plugins with a lot of sub-directories so I put my stylesheets into a CSS folder
    //I also always include version numbers
    wp_enqueue_style( 'yrplugin-frnt-css' , plugins_url( 'css/style.css', __DIR__ ), array(), 'version-number-here' );
    //In case you want to enqueue some javascript...
    //wp_enqueue_script( 'yrplugin-frnt-js', plugins_url( 'js/frontend.js', __DIR__ ), array( 'jquery' ), 'version-number-here', true );
}
add_action( 'wp_enqueue_scripts', 'yrplugin_enqueue_frontend', 100 );

For your shortcode wrap the contents of your output in something like this, if you haven't already. You can switch to a class if you plan on using multiple shortcodes in a single post that way you won't have duplicate IDs.

<div id="yrplugin_container">
    <!-- The rest of your HMTL -->
</div>

Finally, for your CSS you'd be looking for more specific selectors:

#yrplugin_container input[type=text]{
    /* your css rules */
}
#yrplugin_container input[type=submit]{
    /* your css rules */
}

If you use that sort of specificity, you shouldn't get much, if any interference from the main theme's stylesheet.

If you still encounter issues you could then simply inline the CSS into the actual elements that the shortcode outputs like:

<input type="text" style="put your overriding css here" />

That should cover it, let me know if you need more info.

I'd suggest looking at using a custom theme if you want to ignore CSS from your theme and them using plugins to get the functionality that is offered by your theme. Here is an article that will help you do this without any code: https://www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/

The other option if there are only some css elements you want to overwrite the properties of would be to tag things with !important. However, use of the !important tag is highly discouraged.

本文标签：