Plugin Development — Override theme CSS

  • bhamrick

    (@bhamrick)


    16 years, 3 months ago

    I’m currently assisting in the development of a plugin that my company is building and I’m running into an issue with the css inheritance from themes. The plugin dynamically builds several new artificial pages which are linked to throughout different widgets and other plugin components.

    My problem is that with several themes, the elements in the pages built by the plugin (i.e. unordered lists, tables, anchors, basically any standard html element) are getting styled by the theme stylesheet, which to a degree is okay, but the layout of the plugin elements is being compromised. On a theme-by-theme basis I have been able to correct these issues, but I have already seen dozens of new themes with similar issues that have not yet been resolved.

    Have any other plugin developers run into this? If so, how have you resolved it? I may just need to build a reset.css that does more than just reset margin and padding, and actually reset each html element back to its browser default styling.

Viewing 1 replies (of 1 total)
  • Michael Fields

    (@mfields)

    16 years, 3 months ago

    I would suggest that you get specific with the styles that you are using for your plugin css. For this example:

    <div id="my_plugin_container">
   <ul class="conversation">
        <li>Hi There</li>
        <li>How are you doing</li>
        <li>Just fine, thank you very much</li>
   </ul>
</div>

    Try using this css:

    /* Reset everything inside your plugin's div */
#my_plugin_container *{
    margin:0;
    padding:0;
    }
/* To access the div */
#my_plugin_container{

    }
/* To access the list */
#my_plugin_container ul.container{

    }
/* To access the list items */
#my_plugin_container ul.container li{

    }

    I’m not a css expert, but I hope this helps 🙂

Viewing 1 replies (of 1 total)

The topic ‘Plugin Development — Override theme CSS’ is closed to new replies.

Tags