Browser-specific CSS files in Themes
We followed the advice detailed in this part of the Sitefinity documentation about structuring our Themes folder. Our main CSS files are in the Global folder, however we have IE6 and IE7 specific CSS files which we've put, as described, in:
App_Themes/MyTheme/CSS/
Can someone elaborate on the comment in the documentation's screenshot that says: "Other CSS files that you will be able to include manually".
What is the official Sitefinity way to use these files? For example, what do I use to get the path?
<!--[if IE 6]> What goes here to reference the CSS in App_Themes/MyTheme/CSS/ ? <![endif]-->Hi Ianp,
You can use the standart way to include your browser-specific CSS in your master page as you have described:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="App_Themes/MyTheme/CSS/ie6.css" />
<![endif]-->
Regards,
Jordan
the Telerik team
Simple as that? Doh... really appreciate the clarification! :)
Hi Jordan/Telerik,
Is there any way to force browser specifc styles to be loaded *after* the css from the /Global/ folder? The addition of the Global in 4.x is nice, but it's useless if my browser dependant files load before the global styles - I'm still having to hard-code references to stylesheets in every .master page
Thanks,
Justin
I had the same problem of my IE specific files coming before my Global
CSS. I was able to fix this by determining the browser type &
calling
the CSS within the Page_Load Event. Posted below in C#.
protected void Page_Load(object sender, EventArgs e) //Requests the Browser Type String browser = “”; browser = HttpContext.Current.Request.Browser.Type ; //pulls the first 2 characters of the browser type. So instead of IE7 or Firefox6 it will display IE or Fi respectively string browserType = browser.Substring(0,2); if (browserType == “IE”) HtmlLink css = new HtmlLink(); css.Href = “/css/ie.css”; css.Attributes[“rel”] = “stylesheet”; css.Attributes[“type”] = “text/css”; css.Attributes[“media”] = “all”; Page.Header.Controls.Add(css); In the case where Sitefinity Page Templates are used exclusively, there is no Master Page and therefore no Page_Load event that works for all pages in the website. Is there an alternative method for adding CSS files to all pages?
Currently I am adding the files in the ProcessRequiredControls method of a custom PageRouteHandler. However, the browser specific files being added are added before our theme CSS files. Is there another method or another handler that I could extend that would allow for the browser specific CSS files after all others?
Hey Antoine,
It's 8:15am here and I'm still low on caffeine but... why not take the blond approach?
Grab a content block and on the html tab add the
<!--[if IE 6]>
? or use the script widget and add the server side code the old fashion way?
Jochem.
Hi Jochem
So I tried creating a custom widget that adds the script in it's Page Load method. It adds it, but it is doing so before the files from the Global folder are added.
Hi Antoine,
I already responded in your support ticket. In short, you can:
>Use the ResourceLinks control to load different css, depending on the browser;
>Declare your browser specific styles in a css widget on the template;
>Simply take advantage of the LoadOrder.xml by putting your conditional styles in the css files of your theme.
How can you do this? I didn't see any option to put browser condition for these controls. Can you show me an example?
Hello Christian,
1. Here's an example on how to use the resourceLinks control to load browser-specific CSS. We actually create a custom control:
in the template of your control
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %><sf:ResourceLinks id="resourceLinks" runat="server" UseEmbeddedThemes="false" > <sf:ResourceFile Name="~/layout.css" Static="True" /></sf:ResourceLinks>In the code-behind of your control you can declare something similar to this:
HtmlLink link = new HtmlLink();link.Attributes.Add("rel", "stylesheet");link.Attributes.Add("type", "text/css");link.Attributes.Add("media", "screen");var myLink = resourceLinks.Links.Where(l => l.Name == "~/layout.css").SingleOrDefault();switch (Request.Browser.Type) case "IE6": case "InternetExplorer6": myLink.Name ="~/layout1.css"; break; case "IE7": case "InternetExplorer7": myLink.Name ="~/layout2.css"; break; case "IE8": case "InternetExplorer8": myLink.Name ="~/layout3.css"; break;<!--[if IE 6]>//declare your styles here<![endif]--><!--[if IE 7]>//declare your styles here<![endif]-->...