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.
Related
I'm looking at making some custom GWT widgets styled in a uniform fashion without requiring the designer to go into each widget's UI file every time they want something to appear differently. I would provide a bunch of base styles for elements in the widget and the designer comes along later and sets, in UIBinder, HTML, CSS, anything really, the style using the same selector.
For example:
I have a composite widget which I have setup to use a CSSResource. This CSS resource has a style named .myHeaderStyle which is applied to an element on the composite.
This composite is used in another GWT Widget and needs to appear slightly differently when used in the enclosing widget.
My hope here is that I can specify another style in the UIBinder definition of that UI also named .myHeaderStyle and have this style override the style specified in the composite widget's CSSResource.
However, in my attempts to make this happen even with !important included on the style properties that are to override the initial style, I'm only getting the original .myHeaderStyle set on the composite widget.
I'm trying to specifically avoid adding/changing the style in the composite every time we compile, I want it to inherit from the enclosing page effectively overriding the composite widget's original styling.
Is what I'm trying to do possible in some form with GWT+CSS?
After building complex GWT apps for 6 years, I am a big proponent of using a single CSS file for the entire app, and never using CSS resources or UIBinder definitions. Then you can set ".myWidget" style in your widget, and your designer can do:
.myHeaderStyle {
font-size: 1.4rem;
}
.myWidget .myHeaderStyle {
font-size: 1.6rem;
}
In my opinion, this is the easiest way to maintain consistency throughout the app - all styles are in one place, using inheritance, rem, and other best practices. It's much easier for designers that CSS resources scattered throughout the app.
By the way, this is also the easiest approach to implement themes (or skins), or change CSS based on the screen size without touching the code.
EDIT:
This is an example from one of my apps:
<g:HTMLPanel>
<g:Label ui:field="logo" styleName="logo">My App</g:Label>
<div class="menu" >
<div class="tab" >
<g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label>
<g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label>
<g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label>
</div>
</div>
</g:HTMLPanel>
Note that I use 'class' for div element, but styleName for a widget. I don't set style on my tab labels, because I use CSS to style all of them at once:
.tab>div {
float: right;
margin: 0 0 0 6px;
padding: 2px 6px;
width: 120px;
}
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 am working on a website management utility for a friend of mine. In the index page, I have a link to a CSS stylesheet that came with a template I've bought. I use CKEditor to edit files, but the CSS stylsheet applies many bad styles to the editor.
I am not quite familiar with CSS (that's why I bought the template...) and I want to unlink the stylesheet only from the div/tag. I don't want to unlink it from the whole page, because it uses the stylesheet.
<div style="UNLINKED"> [CKEDITOR CODE GOES HERE] </div>
I don't know if it is possible, but I need to do something with it.
Thanks!
You must override the styles, there is no way to "unlink" a specific element from the page styles.
Therefore, for example, if your stylesheet defines bold text for all paragraphs like this:
p { font-weight: bold; }
you have to override that to bring the paragraph back to normal text:
div.unlinked p { font-weight: normal; }
Assign a class to the div and create style for it- the styles defined in the class will override global styles.
div.nostyle {
margin: 0;
padding: 0;
text-decoration: none;
border: 0 none;
}
<div class="nostyle">CKEDITOR CODE</div>
It cannot unlink the stylesheet once if was linked on the beginning.
Only some circumstances can help:
put the all the <div ... </div> period into an iframe.
or override all the style elements of the div
In this case, I would advise embedding the code into an iframe element. Otherwise, there is no way to avoid the cascade without overwriting every rule affecting the content with more specific rules.
ok, so the solution may be different for every dev. if it's ckeditor, try deleting the table selectors. for me the problem was with the <td> selector. thanks for the answers...
Easy! All you have to do is delete the code at the top of the HTML! Once you do, the page automatically unlinks from the stylesheet. No need to override what was provided. :)
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/
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.