<telerik:RadEditor ToolbarMode="Default"
ID="editor1" runat="server" EnableEmbeddedBaseStylesheet="true">
</telerik:RadEditor>
The editor's using Default skin. When I made changes to Editor.Default.CSS file they didn't reflect on my page, but when I type the following I can see the changes:
<link href="Skins/Default/Editor.Default.css" rel="stylesheet" type="text/css" />
<link href="Skins/Default/Window.Default.css" rel="stylesheet" type="text/css" />
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadEditor ToolbarMode="Default"
ID="editor1" Skin="Default" runat="server" EnableEmbeddedSkins="true">
</telerik:RadEditor>
Do I have to create a custom Skin file for the changes to reflect? I don't want to because the editor has been used in many files and now linking new custom CSS file in each and every .aspx file will be such a pain. I just want this to be added in the Skin:
body
{
background-image:none;
background-color:White;
}
What this does is that it makes the background color of the content area white. Earlier the content area of the Editor was inheriting background-image property of the Master Page's body tag. Another funny issue is that the Font styles too are inheriting Master Page's properties only, like Heading 2 in the Editor's drop down list has got a background color when I want it to be simple.
So is making custom skin CSS file the only solution? How do I get the changes to reflect through the Default CSS file only? I don't want to create a custom class. Why didn't the changes reflect?
If you do not want the editor to inherit the CSS from the main page, you should tell it which CSS classes are to be loaded in the content area (iframe). See the external CSS help article and probably the CSS dropdown article as well. Finally, there is a separate page for content area CSS troubleshooting - content area appearance problems
Make sure your body background-color is not overwritten in the Window.Default.css. Always the last entry in a CSS file or a subsequent file takes precedence over the one before. Try going for background-color:white !important;.
Adding !important after any CSS rule will make it just that and override any precedence.
As for why the changes didn't reflect: Check which styles the Telerik control is actually using. Check the Source of the page and check the references CSS files whether they have your added properties - maybe there are some other CSS files creeping around in some cache?
Your tool of choice to check the styles for a specific element might be the Internet Explorer (if you're using IE) Developer Toolbar - just hit F12 and select the Telerik Editor with the little arrow and you will see all associated styles and where they came from.
One solution that worked for me was to set these properties on the editor:
ContentAreaMode="Div"
CssClass="wysiwygeditor"
then in CSS you can override what you need
.wysiwygeditor { background-color: white; background-image: none; }
It would be nice if Telerik would expose a property to set a class on the body element when using ContentAreaMode=Iframe instead of Div, both CKeditor and TinyMCE support a property like that and it makes it possible to easily remove the unwanted body styles while still supporting most of the page CSS in the editor.
You can edit an xml config file (in my case it is named ConfigDefault.xml).
In the <configuration/> node you can add something like the following to load the css of your choice to apply to the content (html document) that is loaded within the iframe:
<configuration>
<property name="CssFiles">one.css,two.css</property>
...more items
</configuration>
So if you need one.css for your regular site css, then two.css can perform the override to remove the background image / change the background colour.
Related
I have a Rails 3.2 app. I use a partial _invoice_pdf.html.erb to display an invoice. The same partial is used to create an invoice pdf. I'm using wicked pdf and it does not include the CSS when creating the pdf. That's ok - it looks fine.
But, I would like to turn off the CSS when I display the partial on the screen.
Is there a command to not include the css on a particular view (partial)?
Thanks for the help!
You can do this with just HTML and CSS, but with the caveat that the CSS technique is not supported on IE and some mobile browsers. You could get full browser support by changing the CSS to override every individual property being applied to your invoice.
CSS
#your_invoice {
all: initial;
* {
all: unset;
}
}
HTML
<div id="your_invoice">
<%= render "_invoice_pdf.html.erb"%>
</div>
Generally css isn't included in partials, but in the layout or view file that includes the partial. in which case simply either don't include the css in the particular view if appropriate or conditionally exclude it in the layout. Something along the lines of:
<%= stylesheet_link_tag 'application' unless #flag_set_in_controller %>
You could utilize a custom layout and CSS file for this aspect of your application. However, that seems less than ideal or workable based on your comment to Camden's answer (the partial does not need the CSS but the 'outer' elements do).
Otherwise, I think you are looking at conditionally removing the CSS with JavaScript placed in an appropriate block in your partial.
You can remove an external CSS file altogether with a snippet of JS like this:
$('link').remove(); // would remove all <link> elements
$('link').not('.myCSSToKeep').remove(); // would remove all <link> elements except for one with class='myCSSToKeep'
Should that not be possible for your application, I believe you're down to manually changing styles via their class with jQuery or similar.
$('.myClass').css('color', #fff); // and so on
If the styles for the PDF could be collected/used from their own CSS file, the first approach should work fairly well ... assuming I'm understanding the requirements correctly :)!
I am using Telerik Reporting with an MVC 3 site. I followed this tutorial to set up my report viewer page and have the CSS conflict issue mentioned at the end of the tutorial. They recommend just removing the rules from Site.css so their styles will apply properly.
I don't really like that solution. I want to be free to use the Site.css styles on all my non Telerik report pages and still have Telerik work properly. Is there a way (css or javascript) to remove the offending rules from my stylesheet on the report page only?
Put a class on the body of your report page
<body class="report">
And then in your style sheet:
.report .someelement {
// The styles that fix the problem, e.g.
position: static;
}
When I don't use inner page style, dotless style* works perfectly. But, when I use inner page style(nothing else changed), inner page style works but dotless style doesn't work anymore. Is this a bug, or is there a solution?
*What I mean with "dotless style" is the style of .less file referenced by page.
Inner page style:
<style type="text/css">
.detailRow {
border: 1px solid burlywood;
}
</style>
Dotless file reference:
<link href="#Url.Content("~/_Stil/Ortak/TableFormat.less")" rel="stylesheet" type="text/css" />
Since the css in the referenced dotless file is working fine without the on page styling and then after adding the style tag it stops to work I have to make a few assumptions..
Since you say that only one of them can work at the same time I assume that they are overriding each other.
Like if you have the exact same css class in your less file and then add a style tag on your page you might override the css class in the file (depending on the markup in the file ofc). This might give the illusion that the css class in the less file have stopped working.
I suggest that you scope the css class in the less file with an id or something like that to give it more specificity and see what happens. Else you should show some content from the less file and some HTML markup of the page.
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.
I am using ASP.NET MVC 2 & C#.
I want to include/embed an html page (raw text & styling; no forms) in one of my views as is without my own css styling (read: The site.css styles for the ASP.NET MVC 2 application itself) affecting it. I can access the page statically and open it in a new window and it retains it's styling; however, if I do:
<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
<!--#include virtual="~\Static\Instructions.htm" -->
</asp:Content>
The styling from the html & the site.css in the web application seem to get merged.
I've added the following ignore route entries as well:
routes.IgnoreRoute("{resource}.html/{*pathInfo}");
I also tried making a partial view control with the raw html in it and rendering that here. That gives the exact same results as this.
Thoughts?
When you include a file with the code above, it's like appending the entire data into the original file, as if there was no include at all. Doing it this way, you will inherit all relative JavaScript and CSS that is on the parent file.
The only way you can solve this is by creating a wrapper around your main content and setting all the CSS elements to affect that wrapper only. Aside from that, the only other option is setting a CSS style for your appended file with specific IDs or clean up your current CSS to be more specific.
One final method, if you have CSS affecting the included file (I assume from your OP, you have CSS styling inside the file itself), you can set !important to them so that they overwrite any other CSS classes affecting them.
You could add a wrapper <div id="embed"> around your embedded content and then use #embed in your site.css to override the styles you don't want applied.
p {
color: red;
}
#embed p {
color: blue;
}
I can only suggest to do so as Pat and lighthazard said.
There's no routing problem.
Try to change your perspective to the rendered html code.
If you have a page, and there's an area, that should be in other (none) styles. then you must mark this area either by a css class, if there are many areas, or if this is the only one per page an css id.
By the way, not to style ist not possible in html. At least the browser stylesheets will define the output.
Here's en interesting Question, i hope this will help.
CSS Reset, default styles for common elements