Plugin css overide by theme and damages layout of plugin

Question

I'm currently developing a plugin in wordpress the problem is its layout with different themes the layout of plugin changes.

How to make the plugin css wont change whatever themes is applied?

#playbutton
{
    z-index:99;
    bottom:15%;
    padding: 10px;
    right:0px;
    position:absolute;
    font-size: 95%;
    width:24%;
    height:10%;
    text-align:center;
    color:white;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900000         0, endColorstr=#99000000);
    -ms-filter:                 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,         endColorstr=#99000000)';
    border:1px solid #bfbcc5;
}

Here is css which changes when different themes is applied? I'm currently using % in width or height .

Answer 1

There are a lot of things to consider when you want an element's layout to look the same even when using different themes:

1.) Specificity

• Research what specificity is all about and how you can use it to your advantage
• If you want to make your StyleSheet more dominant, place the tag after the less dominant sheets.
• Make sure your class names are not used by others - trick: use class prefixes
• If all else fails, the !important keyword is your friend.

2.) Parent Layouts

• Say the playbutton's parent element is affected by the theme and that the #playbutton is using percentages, chances are the button will take on the parent's size as it is still dependent. It would be easier if the parent is not affected by the theme so you may need to go back to #1.

I don't know what the total markup of this project's page but I hope this helps.

Answer 2

You need to create wrapper for you plugin and use namespaces. I don't know what you are developing but for example if its video player plugin it could be something like this:

html:

<div class="my-video-player">
    <div class="foo">
        <div id="playbutton"></div>
    </div>
    <div class="bar">
    </div>
</div>

now html code in place, you need to use namespaces also for your css:

.my-video-player {
    /*wrapper styles go here (and also baseline styles: font-size for example), for example: required width and height*/
}
.my-video-player .foo {
    /*now these styles are based on 'my-video-player' styles*/
    /*so if you use width in percentage its based on the my-video-player width*/
}
.my-video-player .bar {}
.my-video-player #playbutton {}

This way your css will not collide with other styles. Also if you need javascript do it like this:

var myVideoPlayer = {

    foo: function() {
    },

    bar: function() {
    }
};

usage:

myVideoPlayer.foo();

Note: Javascript namespaces can be overriden by external code so the best way would be to follow modular javascript pattern, but thats out of scope of this question.