Browser-specific CSS files in Themes - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Browser-specific CSS files in Themes

  • 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]-->

    Thanks,

    Ian
  • 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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 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);
           
            
        

    Fix also posted at webgeeking.com/.../sitefinity-4-themes-ie-hacks


  • 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

    I considered the HTML tab approach but didn't think there was a way to include the script file in the <head> section of the page.  The CSS could be embedded right there.

    I'll look into the script widget.

    Perhaps implementing a custom widget and adding the script in the PageLoad method is the best way to go.
  • 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.

    The CSS script widget does not have an option for adding only for specific browsers.

    Any other thoughts on how I can get my browser specific CSS files added after the CSS files from Global if I don't have a Master page?
  • Hi Antoine,

    I already responded in your support ticket. In short, you can:
    1. Use the ResourceLinks control to load different css, depending on the browser;
    2. Declare your browser specific styles in a css widget on the template;
    3. Simply take advantage of the LoadOrder.xml by putting your conditional styles in the css files of your theme.

    Greetings,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • >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;

    2) Add your styles directly to your template with a css widget, using conditional statements:
    <!--[if IE 6]>
    //declare your styles here
    <![endif]-->
    <!--[if IE 7]>
    //declare your styles here
    <![endif]-->
    ...

    3) Here's some more information about the LoadOrder.xml.

    Kind Regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items