- Author was Featured
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 5-6 years
- Item was Featured
- Referred between 50 and 99 users
- Sold between 10 000 and 50 000 dollars
- United States
I’m finishing up a Media Gallery plugin for WordPress, which I have styled accordingly. I am now realizing that depending on the theme a person uses a bunch of my styles may get hi-jacked depending on the themes stylesheet.
I do have all my elements prefixed with a special classname, but how do I deal with a theme that has inhereted divs/elements that I don’t know about? (Hopefully I’m making sense here)...
Let’s say I have p element that in my code that I don’t want to have any margins, padding or borders. I would use:
.my-plugin p { margin:0; padding:0; border:none; }
But, since I’m inserting content into someone elses theme/structure, they could have:
#content #random-div #something-else p { margin-bottom:26px; padding:500px; border: 8px dashed #000 }
The only ways I can think of making sure I override this are to use !important, but I don’t want to have to use that on every single line of CSS …
The other way would be to try and account for any and all div/element structures, which is impossible, ie:
#content #random-div #something-else .my-plugin p { margin:0; padding:0; border:none; }
Is there a recognized solution for this, or do you guys just do your best trying to keep your styles as you intended and realize that some people may just need to make customizations depending on their styles?
Maybe I’m over-thinking things… or missing something simple.
Thanks for any and all help!
- Item was Featured
- Sold between 5 000 and 10 000 dollars
- Repeatedly Helped protect Envato Marketplaces against copyright violations
- Referred between 100 and 199 users
- Bought between 10 and 49 items
- Microlancer Beta Tester
- Has been a member for 2-3 years
- Exclusive Author
- Portugal
I usually use some reset to make sure it shows up as I want.
Ex: .my-plugin div, .my-plugin p, .my-plugin a. my-plugin img { margin: 0; padding: 0; border: none; outline: none; }
This way I’m sure it will show the margins and the paddings I’ve set.
- Attended a Community Meetup
- Author was Featured
- Bought between 50 and 99 items
- Exclusive Author
- Has been a member for 3-4 years
- Item was Featured
- Most Wanted Bounty Winner
- Referred between 500 and 999 users
IDs are less likely to get over written, so I would wrap your elements in a DIV tag with a unique ID, and then style off of that.
- Author was Featured
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 5-6 years
- Item was Featured
- Referred between 50 and 99 users
- Sold between 10 000 and 50 000 dollars
- United States
.mediablender-container * { all my reset styles }
I’m testing on the Twenty-Ten theme and in their css they have:
#content tr td { border-top: 1px solid #E7E7E7; padding: 6px 24px; }
Their td still overrides my td… I know I could override theirs by using:
#content .mediablender-container tr td
But, there’s no way to tell how other themes will be setup.
Also, just to note, I did try swapping my class name out with an id and there wasn’t any difference.
- Microlancer Beta Tester
- Author had a Free File of the Month
- Has been a member for 3-4 years
- Item was Featured
- Author was Featured
- Austria
- Exclusive Author
- Referred between 200 and 499 users
- Author was Featured
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 5-6 years
- Item was Featured
- Referred between 50 and 99 users
- Sold between 10 000 and 50 000 dollars
- United States
revaxarts said
This is the part where it comes to CSS specificity
Yeah, I think understand the rules… I’m just wondering if there’s any way to override a higher specificity without using !important.
Is there anyway to override the td:
#content tr td { border-top: 1px solid #E7E7E7; padding: 6px 24px; }
if I have a table in my plugin with an id called “my-table” that ends up being placed within a themes div #content without using
#content table#my-table tr td { border-top: 1px solid #E7E7E7; padding: 6px 24px; }
Since with my plugin I know what my table name is… but, I will have no idea if a theme has parent divs named #content or #my-content or #fruitloops.
Request processing...