I have a div- workarea, where, I want to load contents of body of a template. I could load the content, but how to load css of the template. If I tried to load it, it overrides the default css of the page into which I'm loading the template's body content. I don't want to use iframes in my project.
Thanks in advance
Another alternative is to create a reset stylesheet just for that div container. Put aa id selector on the container div in which you load content and use that ID as a prefix for styles you use in the template.
<div id="template_content"></div>
and css as
#template_content h2 {....}
#template_content p {...}
If you cannot do this than your only option is iframe.
Your only simple option here is to use an <iframe>, styles cascade down, that's just how they work and were intended to work, if you want a section of the page with drastically different styling that also doesn't inherit, an <iframe> is the perfect tool do this.
Many people think frames are bad, that that's a different thing from iframes, no matter which side of the line you're on <iframe> elements are perfectly legitimate to use here. Why try to solve the problem in a very round-about way when the perfect tool for the job is laying there ready to use?
For example this is how almost every rich-text-editor works in a page, via an <iframe>, for many reasons but to keep the styling separate is one of them :)
Give Some id to that div like WorkArea. Now in css file, write your styles and from. Do not attach anything to any divs of the body from css, using body as parent class
might be hard but give the display or preview area important dominance...
like...
#template_content {
background: green !important;
}
then when you load in another style sheet, #template_content's background cannot be changed unless you have !important defined on the stylesheet you are loading in.
Related
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
I was looking for a (simple) WYSIWYG Editor jQuery Plugin that's compatible with Bootstrap 3. I've seen a lot WYSIWYG Editors jQuery Plugin that were compatible with the previous Bootstrap, but my website uses Bootstrap 3, so each time I implemented such a jQuery Plugin, my Bootstrap 3 would ruin the buttons and mess the whole editor up.
So now I'm asking whether there is an option to enable the Bootstrap 2 stylesheet only for one div and its contents.
I assume a iframe could work, but then, I need the WYSIWYG Editor's contents (which are in the iframe then), along with text inputs on the 'non-iframe'.
One way you might be able to solve this would scope your css for that div. This is what I have implemented with a content management system that I have created.
Let say for example you give the WYSIWYG Div an ID of HTMLEditable.
you could target that div with your css and all the css within that div.
#HTMLEditable .WYSIWYG{
....css goes here
}
#HTMLEditable p{
....css goes here
}
The above css will only apply to that div.
Then its just a case of finding the correct css that you need in that div.
Note you may need to override/reset the css for that div to stop your bootstrap3 applying to it.
Here is an example of a reset css. (You will need to scope this as well to make sure you don't reset all your css).
EDIT: use LESS
To make this easier you can use LESS which is what bootstrap uses.
#HTMLEditable {
//import the modal css
#import "bootstrap.css";
}
you will need to make a file 'HTMLEditable.less'. Then Add the code to similar to the above.
The less will them compile the above into css and will scope everything in the css to #HTMLEditable
Check out the LESS site and look ate the nesting. This is what you are after. This site will also show you how to compile it.
You need to put the class or id of this div before all css rules. You can do it like this if you need a css file and not less.
#HTMLEditable{
paste in all of your css
}
than copy all of this paste it here: http://less2css.org/ in the less area and it will generate the right css for you.
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
Sorry if this is obvious but I just don't know what more to do.
I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.
CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.
How can I fix this without having to apply individually each element's css with jQuery .css() calls?
Thank you
Note: I know this may be over-duplicated, but I still haven't found the right solution.
Edit: Ajax-loaded content is inside an iframe
Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.
Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)