I was wondering if anyone knew of a way to inject CSS into the head of a website so that it is inline.
I have my CSS file bundled up and minified as below
BundleTable.Bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/stylesheet.css"
));
I then add it to my master template like below
#Styles.Render("~/bundles/css")
Which then links out to a CSS file. But what i would like to do is render it inline within the header so i can reduce my initial load times and help eliminate render blocking CSS.
Related
I have a site running Kentico 12SP MVC. For reasons, I won't get into, my Header and Footer have a z-index in the millions. Unfortunately, the z-index is so high that it blocks the pagebuilder features in Kentico. How can I add CSS/JS to detect whether I am inside the page builder and adjust the z-index accordingly?
Welcome to SO Jeremy!
Typically your styles are defined in the SCSS/LESS stylesheets in the MVC project. See the structure of this particular project. So you'll have to go back to your stylesheets in the project and make adjustments there, then publish that code change.
UPDATE
Thanks for the more clear definition of what you're looking for. To find out what is overriding your site's CSS do the following:
Go to the page in question in Xperience on the Page tab.
Right-click on the area in question and inspect that.
Determine what class is overriding the z-index. This element is nested within an i-frame and most likely has a parent/grantparent element with the class of page-builder.
In your MVC css, add an override for something like .page-builder .your-class .thats-causing .problems { z-index: 0; }
What this will do is when you're on the Page tab using page builder functionality, it will force that z-index to be lower so page builder items are displayed/work.
I am dynamically creating controls, one of which is a multiline textbox. I have seen links about how to do it when it is hard coded into my aspx page, however I can't do that since the control is dynamically generated. I would like to avoid having to modify my .css files if possible. If anyone has any ideas on how to do this, any advice would be great thanks!
In general "resize:none" (there are funs of "overflow:auto") is the solution, therefore the typical option is to include it in your .css textarea definition and use the relative class name (if needed) in your aspx code. If needed means that by adding "textarea { resize: none; ... }" to your .css files there is no need to use CssClass in your asp:TextBox.
If you insist to not change your .css files, then you have to add a new css rule by JavaScript code somewhere (i.e. header control) on the server or add a new global .css file and serve it within your html header from aspx (this is better because you avoid checking existing css rules).
If I'm writing an ASCX control, and that control has markup that requires CSS, and that CSS will only be used by the control itself, is there an elegant way (besides just sticking it in the ASCX file itself) to include the .css file with it?
Ideally, I'd have control.ascx, control.ascx.cs, control.js, and control.css all as a little "package".
It brings up one problem and one concern so far:
Problem: Since the control is in a subdirectory, I don't want to use a tag hardcoded with the knoweldge that the css is in a subfolder. I'd like to write it so that it's relative to the control code (ie: same folder) but still be found at runtime.
Concern: If I did this for ten controls, it's ten more server hits I suppose. Maybe ScriptManager or the RadScriptManager or RadStyleSheet manager will magically aggregate them, but its not a showstopper for me either way.
Any ideas on how to solve the relative-path issue?
To get the correct path of your stylesheet relative to the page, call the ResolveClientUrl method of your user control, passing it the path of the stylesheet relative to the control:
HtmlLink link = new HtmlLink();
link.Href = this.ResolveClientUrl("control.css"); // same directory as the control
link.Attributes["type"] = "text/css";
link.Attributes["rel"] = "stylesheet";
this.Page.Header.Controls.Add(link);
Although each stylesheet will result in a separate request, you can mitigate the issue by enabling content expiration for them.
In firebug under "Style" its showing the css file as follows when I hover mouse over RadEditor
"http://localhost/myWeb/WebResource.axd?d=WSPnt1ffDvgb4bj2Ii5nA4MecfZdsnZ0wvgLy3HVcihYTy2nMTq7iIu8RlAb7ZMF61e07jisMUNhQZabIxK2kyuxNpeCFqhE3cgnDSm1-Pc1&t=634237829795625000"
In telerik:RadEditor tag ..I haven't specified any property such as Skin=Skin1 or whatever..so its using some default skin...In the Skins folder..there's this folder named "Default" that's got images and css files...Is "Default" what it's using ??? now when I change something in the Default skin's CSS file...changes do not reflect on my page...so how do I find out which css its using ??can't figure out nothing from a path like that
[edit]
For this Editor mainly 3 css files are being used namely Editor.Default.css,Window.Default.css and ToolBar.Default.css..now when I view page source , I can't find refernce to any of these 3 css files...Also in firebug , under "Styles" where that weird css path is shown, its displaying CSS classes like .reToolbar , etc...now ALL the Skins' CSS files have got this CSS class ".reToolbar" ..so how to find out which CSS file's class is this particular ".reToolbar class" ??
You can identify the skin used by RadEditor by finding its tag, e.g.:
The link tag rendered contains the URL of the WebResource (e.g. the skin css, that is embedded in the Telerik.Web.UI assembly). To make RadEditor use your skin you should set its EnableEmbeddedSkins property to false and then include a tag with the URL to your CSS file.
There is some more information in the Telerik Online Documentation.
Cheers
I'm trying to inject some CSS that accompanies some other HTML into a C# managed WebBrowser control. I am trying to do this via the underlying MSHTML (DomDocument property) control, as this code is serving as a prototype of sorts for a full IE8 BHO.
The problem is, while I can inject HTML (via mydomdocument.body.insertAdjacentHTML) and Javascript (via mydomdocument.parentWindow.execScript), it is flat-out rejecting my CSS code.
If I compare the string containing the HTML I want to insert with the destination page source after injection, the MSHTML's source will literally contain everything except for the <style> element and its underlying source.
The CSS passes W3C validation for CSS 2.1. It doesn't do anything too tricky, with the exception that some background-image properties have the image directly embedded into the CSS (e.g. background-image: url("data:image/png;base64 ...), and commenting out those lines doesn't change the result.
More strangely (and I am not sure if this is relevant), was that I was having no problems with this last week. I came back to it this week and, after switching around some of the code that handles the to-be-injected HTML before actual injection, it no longer worked. Naturally I thought that one of my changes might somehow be the problem, but after commenting all that logic out and feeding it a straight string the HTML is still appearing unformatted.
At the moment I'm injecting into the <body> tag, though I've attempted to inject into <head> and that's met with similar results.
Thanks in advance for your help!
tom
Ended up solving this myself:
mshtml.HTMLDocument test = (mshtml.HTMLDocument)webBrowser1.Document.DomDocument;
//inject CSS
if (test.styleSheets.length < 31) { // createStyleSheet throws "Invalid Argument if >31 stylesheets on page
mshtml.IHTMLStyleSheet css = (mshtml.IHTMLStyleSheet)test.createStyleSheet("", 0);
css.cssText = myDataClass.returnInjectionCSS(); // String containing CSS to inject into the page
// CSS should now affect page
} else {
System.Console.WriteLine("Could not inject CSS due to styleSheets.length > 31");
return;
}
What I didn't realize is that createStyleSheet creates a pointer that is still 'live' in the document's DOM... therefore you don't need to append your created stylesheet back to its parent. I ended up figuring this out by studying dynamic CSS code for Javascript as the implementations are pretty much identical.