+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Browser-specific CSS files in Themes

Browser-specific CSS files in Themes

12 posts, 1 answered
  1. IanP
    IanP avatar
    29 posts
    Registered:
    01 Nov 2009
    01 Jul 2011
    Link to this post
    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
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    04 Jul 2011
    Link to this post
    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
    Answered
  3. IanP
    IanP avatar
    29 posts
    Registered:
    01 Nov 2009
    04 Jul 2011
    Link to this post
    Simple as that? Doh... really appreciate the clarification! :)
  4. Justin
    Justin avatar
    13 posts
    Registered:
    31 Aug 2011
    08 Sep 2011
    Link to this post
    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
  5. Ideawire
    Ideawire avatar
    2 posts
    Registered:
    27 Jul 2010
    09 Sep 2011
    Link to this post
    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 http://webgeeking.com/post/10000396786/sitefinity-4-themes-ie-hacks


  6. Antoine
    Antoine avatar
    45 posts
    Registered:
    13 Jul 2012
    02 Mar 2012
    Link to this post
    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?
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    02 Mar 2012
    Link to this post
    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.
  8. Antoine
    Antoine avatar
    45 posts
    Registered:
    13 Jul 2012
    02 Mar 2012
    Link to this post
    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.
  9. Antoine
    Antoine avatar
    45 posts
    Registered:
    13 Jul 2012
    03 Mar 2012
    Link to this post
    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?
  10. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    06 Mar 2012
    Link to this post
    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
  11. Christian
    Christian avatar
    1 posts
    Registered:
    05 Aug 2010
    27 Mar 2012
    Link to this post

    >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?

  12. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    30 Mar 2012
    Link to this post
    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
12 posts, 1 answered