Override/ignore CSS from active theme as not to interfere with my custom CSS

Question

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>

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, Sep 17 '20 at 18:24

RiddleMeThis · Accepted Answer · 2020-03-15 15:46:03Z

1

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.

edited Mar 15 '20 at 15:46

answered Mar 15 '20 at 1:44

RiddleMeThis

3,5598 gold badges20 silver badges28 bronze badges

Thank you, how can I make sure my CSS is enqueued after your theme's CSS? I want to specify that I can't choose what theme install/activate on website... If the plugin will be used, for example, on 5 different sites, each site could have a different theme but I want the style of my components (generated with my shortcode) to remain the same on all the sites ...
– icolumbro
Mar 15 '20 at 7:26
You can enqueue your scripts with the wp_enqueue_scripts hook, then set the priority parameter. I will update my answer with an example.
– RiddleMeThis
Mar 15 '20 at 15:38

Add a comment |

Tom J Nowell · Accepted Answer · 2020-09-17 18:25:45Z

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

Tony Djukic · Accepted Answer · 2020-03-15 16:26:01Z

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 tried inserting CSS as internal via the <style></style> tag, so I'm sure my CSS is loaded last, I added a class my-plugin-container { all: initial; }, assigned it to a div used as container for all HTML code and in CSS, for every selector I did: <style>.my-plugin-container .selector-1 {/* CSS rules */} .my-plugin-container .selector-2 {/* CSS rules */} ... </style> but I cannot solved problem... — icolumbro, Mar 17 '20 at 15:16
Can you add the CSS inline onto the actual tags themselves? Or share the URL here and I'll try to address it by looking at it. — Tony Djukic, Mar 17 '20 at 15:20
I'm working on local environment. I edit my original post with code sample, please read there, thank you! — icolumbro, Mar 17 '20 at 15:33
Ok, so is it just that in general a lot of the styes you're trying to implement are being overruled by the theme? — Tony Djukic, Mar 17 '20 at 18:57

Davood Denavi · Accepted Answer · 2020-03-15 00:05:32Z

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.

Stack Exchange Network

current community

your communities

more stack exchange communities

Override/ignore CSS from active theme as not to interfere with my custom CSS

4 Answers 4

1. Use an iframe

2. Build a Web Component

Your Answer

Not the answer you're looking for? Browse other questions tagged plugins themes shortcode css or ask your own question.

Hot Network Questions

Override/ignore CSS from active theme as not to interfere with my custom CSS

4 Answers 4

1. Use an iframe

2. Build a Web Component

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged plugins themes shortcode css or ask your own question.

Related

Hot Network Questions