I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.
Related
He guys, right now im working on a conversion-page that is supposed to be included on websites of our partners. We're given a certain space inside their websites to promote our product. The space we're offered is of course supposed to be styled with html and css. And this is where it gets a little complicated. Is there a smart way to prevent our stuff inside their html-structures to be formated by their css?
Sure, I could check all affecting formations and just overwrite them with our own css-formations, but this is pretty dirty and not very reliable in terms of possible changes in the future.
How would you handle this? Might iFrame be a valid solution?
Thanks
Without an iframe you can use a special application of the universal reset concept.
/* cssreset.com */
#your_company_div * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.5em;
text-decoration: none;
vertical-align: baseline;
/* and perhaps some more... */
background: white;
color: black;
}
You may want to explicitly define the font/family as well, unless you just want to use theirs to make it fit in better.
The idea here is basically that it shouldn't matter anymore what the parent website has defined for CSS styling, your content should look the same basically no matter what, because the * trumps all.
Note that there is the same sorts of downside with using a universal reset, in that you nuke inheritance and will have to do define margins and padding if you want a non-zero value.
This shouldn't be that big of a downside for you as you are not so much designing a whole web site, and thus for a little extra work up front it won't matter how they change their site, your block will stay mostly the same.
If you use Iframe then can invoke your page as external in your partners website with your own stand alone style. Else give a hierarchy style to the div and its child elements
I have an application where I allow users to add a snippet of code onto their website which in turn adds a small widget to the site allowing their users to interact with the application etc.
What i'm doing now is placing all of my html in a container that they place on the site with (hopefully) a unique id. Lets say ts-container. Then, in the css that gets loaded on the site that is meant to style my elements, I place #ts-container in front of every selector in the style sheet. Is this the best and only method of protecting my css from affecting their page elements, or is there some way to wrap the entire style sheet without having to actually id every class? Is there a way to place the style sheet in the wrapper container and have it only affect those elements or something? Should I be doing this in an iframe or something similar instead?
Just looking for some suggestions in case I am missing a best practise in my situation.
You can do a sub-reset of the CSS:
#ts-container * {
margin: 0;
padding: 0;
font-size: 13px;
font-weight: normal;
background-color: white;
color: black;
}
You might need to enter some extra styles, but this should prevent any CSS from the parent document from affecting your widget.
iframes are a much easier way to do this, though. Whether you use them or not is a design choice.
I'm creating a snippet of HTML to allow others to add functionality to their web sites (it is a voting widget). I've created a snippet of HTML like this:
<div>
[implementation of my voting widget]
</div>
I spent a lot of time to get the formatting of this widget just right. It works great in a sample web page that does not import a style sheet.
When I add the widget to a page on a Drupal site, however, the imported CSS wreaks havoc with my careful formatting. I'd like my HTML snippet to ignore all CSS style sheets. Is this possible?
Regardless of whether it is possible, is there a better solution?
Instead of relying on your CSS styles not being overridden by any imported stylesheets, you should give your widget a unique id and make sure all of your styles are a derivative of that id making sure to implement any styles you don't want to be overriden (margin, padding, etc):
<div id="votify">
[implementation of my voting widget]
</div>
#votify {}
#votify ul {}
#votify div span {}
/* etc */
You could try using a reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
Of course, you don't want to overwrite the page's CSS but you can get an idea on how to reset the styles your widget uses and use your personal CSS. So something like...
#voting-widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I hope this helps.
Without using a style sheet I think you'd have to explicitly set all margins, padding, fonts, etc in the style attribute so it takes precedence over any CSS sheets that there are.
Reset your widget CSS to default values, and THEN add your formatting code. This will clear out any page styles so you can work from a clean slate.
div#widget, div#widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/* ... whatever other reset code ... */
/* ... then add your own code ... */
color: red;
}
I need a simple <hr/> in a page that extends a default one (I'm using Django template framework); in this default page, a standard and untouchable stylesheet styles HR with border:none; height:1px but I would like to reset these styles to their default values.
I tried putting {border:1px inset; height:auto;} in my page but I didn't get the same aspect as having no style at all.
Is there a method to restore the default style for a tag?
In order to make your rule apply, you'll need to ensure that you give your rule a greater specificity than the existing rule in order to override it.
For example, if the rule is this:
hr {
/* rules */
}
Then you would need to do something like this:
html hr {
/* your rules */
}
Scores are calculated by these basic rules:
elements, like div are worth one point
classes, like .comment are worth 10 points
ids, like #user123 are worth 100 points
The total score for the selector is the sum of all of its parts, so div.class is worth 11 (10 for the .class and 1 for div
(It's actually a bit more complicated than this - see this article for details - but this explanation works as a general rule)
Edit:
I just saw your comment about not knowing the defaults.
According to Firebug, an hr appears to look like this:
hr {
height: 0;
width: 100%;
border: 1px solid #808080;
margin: 8px 0;
}
You can use the tools provided in other browsers to see if they use a different set of styles, then decide for yourself which ones would be the best ones to use.
Try YUI 2 Base CSS, seems to be doing what you want. Or even YUI 3 Base CSS
There is a possibility to "restore" default styles only for a certain context
Update
Just checked - Base CSS does not include styles for hr element
The default stylesheet for HTML documents, without any overrides, is defined by the W3C. You can find the full default stylesheet here: http://www.w3.org/TR/CSS2/sample.html
Alternatively, you could use Firebug in Firefox (or any similar tool) to view the styles of an <hr /> element on a test page without any styles applied.
Sure, you need to give your styles a bigger weight; add an id to your < hr/>, or do this in CSS:
html body hr { ... your styles ... }
No. You either have to not apply the styles in the first place, or override every broken style with explicit values.
You can also give your styles more weight with the !important property. If the original is like this:
.someClass { color: red }
You can override it with this:
.someClass { color: green !important}
I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source.
So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.
Thanks
You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.
My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:
.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on
If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.
thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:
* {
padding: 0;
margin: 0;
}
div {
padding: 50px;
}
#content *{
padding: 0;
margin: 0;
}
now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).