0

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>
Improve this question
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 ♦
    Sep 17, 2020 at 18:24

4 Answers 4

Reset to default
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.

Improve this answer
2
  • 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, 2020 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, 2020 at 15:38
1

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

Improve this answer
0
0

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.

Improve this answer
4
  • 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, 2020 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, 2020 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, 2020 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, 2020 at 18:57
-1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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