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

Forums / Designing with Sitefinity / IE Stylesheets in Themes

IE Stylesheets in Themes

12 posts, 0 answered
  1. Joe
    Joe avatar
    40 posts
    Registered:
    11 Sep 2007
    13 Nov 2007
    Link to this post
    I was wondering if there is a way to place a style sheet into a theme and only have it be read if the browser is IE or a specific version of IE, as with the <!--[if IE]> tag.
     

  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    14 Nov 2007
    Link to this post
    Hi Joseph,

    Unfortunately, there is no easy way to add css files via conditional comments because of the ASP.NET technology that Sitefinity uses.

    Anyway, there is a workaround: you can add the style sheets in the head tag of your master page directly and add the conditional comment there as well. For example:

    <link href="App_Themes/Orange%20with%20left%20sidebar/Menu/styles.css" type="text/css" rel="stylesheet" />
    <link href="App_Themes/Orange%20with%20left%20sidebar/orange_left.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href=" App_Themes /ie.css" media="all" /><![endif]-->

     
    After that, you should not set a theme for the particular master page because the style sheets of the theme you have set will be appended at the end of the head tag and styles added by conditional comments most likely will be overridden.

    Another approach that I can suggest is to use css hacks. You can place these hacks in a separate file and add that file in the particular theme or add the hacks in the main css file. Please bear in mind that style sheets are added alphabetically.

    And finally, this article might be useful: http://adam.kahtava.com/journal/7e992478-da0f-4ce4-bb43-3a0b58f6f3ad.aspx .

    All the best,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Joe
    Joe avatar
    40 posts
    Registered:
    11 Sep 2007
    27 Nov 2007
    Link to this post
    Just in case anyone is interested. I ended up taking the approach that is in this article.

    http://www.positioniseverything.net/articles/cc-plus.html

    Also here is a cool control that I used to add flash dynamically by theme.

    http://www.flash-control.net/
  4. Erik
    Erik avatar
    34 posts
    Registered:
    06 Dec 2007
    24 Mar 2008
    Link to this post
    If you're targeting IE7 the * hack will no longer work.  To get around this you can actually precede your css properties that you want only IE7 to understand with a period (.).  For example if I have noticed that IE7  adds a little bit of extra padding around a div (which it frequently does) compared to Firefox, I would write the following rule to compensate:

    div { padding: 5px; .padding:3px; }

    If you notice, the second padding declaration has a period directly in front of it.  This is a hack that works pretty well for any IE7-specific quirks.  The only downside to this is that your CSS won't validate, but sometimes you have to sacrifice some things for appearance.  I searched forever on the Internet to find this one.  You can reference this page for more info:

    http://www.danielbergey.com/weblog/2007/07/03/targeting-ie7-with-css-rules/

    Erik
  5. Milkman Dan
    Milkman Dan avatar
    14 posts
    Registered:
    11 Mar 2008
    15 Apr 2008
    Link to this post
    Katia wrote:
    After that, you should not set a theme for the particular master page because the style sheets of the theme you have set will be appended at the end of the head tag and styles added by conditional comments most likely will be overridden.

    Which is a h u g e problem. I've noticed this with other telerik controls. For some reason, the good folks at telerik seem to believe that all of those stylesheets in our Themes belong in every page.

    The order of placement and resulting inheritance of stylesheets are important enough, then there's the ones we UI people like to bring in conditionally. If they all belonged on the page, I would have put all my selectors in one stylesheet.

    Normally, I can place my conditional stylesheets in a subfolder of the Theme being applied, then they aren't appended automatically; so it's most certainly not due to .NET - this is a telerik issue.

    Why is this so? it causes numerous problems for those of us who are trying to separate style from structure and use the .NET Themes.
  6. Mike
    Mike avatar
    208 posts
    Registered:
    10 Dec 2007
    24 Sep 2008
    Link to this post
    I completely agree with Milkman Dan on this.  If it were an ASP.NET issue, SharePoint would have the problem as well.

    CSS hacks are bad.  One should use alternative CSS stylesheets.

    One simple solution that Telerik could implement to solve this is the same technique that SharePoint uses; the themes are applied through an ASP.NET control, just like everything else that makes it onto a page.

    You even can have an "Additional Page Head" delegate.  You can inject whatever you need in the <head> section, AFTER the default stuff is inserted. 

    Instead of simply adding all the theme styles at the end of the head, Sitefinity should have used a control in the head, so that we can determine what order things happen.

    This is how it should be done.  Notice how not only can you apply custom CSS, but you can also supply custom javascript (to override core.js functions).  A content placeholder allows you to inject whatever content you want, and the control delegate even allows you to instance controls in the head:

     <SharePoint:CssLink runat="server"/>
     <SharePoint:Theme runat="server"/>
     <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
     <SharePoint:CustomJSUrl runat="server"/>
     <SharePoint:SoapDiscoveryLink runat="server"/>
     <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
     <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
     <!-- Our custom CSS -->
     <link rel="stylesheet" type="text/css" href="/styles/theme.css" >
     <link rel="stylesheet" type="text/css" href="/styles/main.css" >
     <!--[if IE 5]><link rel="stylesheet" href="/styles/iepngfix.css" /><![endif]-->
     <!--[if IE 5.5]><link rel="stylesheet" href="/styles/iepngfix.css" /><![endif]-->
     <!--[if IE 6]><link rel="stylesheet" href="/styles/iepngfix.css" /><![endif]-->

    How about it fellows?  This should be a high-priority item for the next release.

    Mike

  7. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    26 Sep 2008
    Link to this post
    Hello Mike,

    The concept of themes in Sitefinity is that all files in a theme should be applied even if they are in subfolders.
    Anyway, there are two ways to apply additional CSS or javascript in Sitefinity.
    • The first way is to add a head tag for a certain page or template. This option is available in the Properties tab of a page, in the More options section. The additional tags are appended at the end of the head tag after the tags added by the theme or in the masterpage. This feature makes it possible to override some rules or definition of a certain page only.
    • The second option is to add CSS or javascript declaration by a user control or template. This means that every time the control is added to a page the relevant CSS or javascript files will be applied to the page as well. Below is a sample code that you can use in a control.

    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>

    <sf:CssFileLink ID="CssFileLink1" FileName="~/CSS/Additional.css" Media="screen" runat="server" />
    <
    sf:JsFileLink ID="JsFileLink1" FileName="~/scripts/javascript.js" runat="server" />

    Anyway, we will consider your suggestion for next releases.


    Greetings,
    Katia
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Mike
    Mike avatar
    208 posts
    Registered:
    10 Dec 2007
    26 Sep 2008
    Link to this post

    Thanks for your reply Katia,

    I guess the problem with your first suggestion is that it's a stylesheet for a specific page, and what I want is a stylesheet for a specific browser, which is common when you're trying to work out CSS issues.

    After I posted this, I discovered your second suggestion (thanks SelArom!), but the trouble with filtering by browser still exists--I can inject a CSS tag, but not the conditional comments around it that make this technique work. 

    Basically, the feature I'd like to see is for the Sitefinity theme stylesheet links to be injected into the head using a control, rather than just appending them as child controls to the head.  This also eliminates the need for a runat="server" in the head tag (assuming you do the same for the title and other things that Sitefinity modifies).

    The primary benefit for us is that we can control the order of stylesheets, as well as provide our own page head controls. 

    Thanks for listening!

    Mike Sharp

  9. Tony Archer
    Tony Archer avatar
    4 posts
    Registered:
    11 Feb 2005
    09 Oct 2008
    Link to this post
    I had the same issue.  The problem is that the IE tags have to be at the END of my CSS files.  However, by leaving the CSS in the master page Sitefinity adds its CSS to the END of the header, therefore leaving my optional CSS above the others.

    So, what we did was add the !important qualifier to the end of the ie CSS tags which moved their execution to the end for all intents and purporses.

    Is it the best way?  Not sure.  But it works.
  10. marco pessina
    marco pessina avatar
    16 posts
    Registered:
    02 Nov 2009
    05 Aug 2010
    Link to this post
    Hi,
    I solved with some code in the masterpage load:
    Public Sub WriteConditionalCSS(ByRef m_page As Page, ByRef m_request As HttpRequest)
        Dim header As Web.UI.HtmlControls.HtmlHead
        header = TryCast(m_page.Header, Web.UI.HtmlControls.HtmlHead)
        If header IsNot Nothing Then
            Dim link As New HtmlLink
            link.Attributes.Add("rel", "stylesheet")
            link.Attributes.Add("type", "text/css")
            link.Attributes.Add("media", "screen")
     
            'add rights css path
            Select Case m_request.Browser.Type
                Case "IE6", "InternetExplorer6"
                    link.Attributes.Add("href", "~/App_Themes/WCrossBrowser/css/ie6fix.css")
                    header.Controls.Add(link)
                Case "IE7", "InternetExplorer7"
                    link.Attributes.Add("href", "~/App_Themes/WCrossBrowser/css/ie7fix.css")
                    header.Controls.Add(link)
                Case "IE8", "InternetExplorer8"
                    link.Attributes.Add("href", "~/App_Themes/WCrossBrowser/css/ie8fix.css")
                    header.Controls.Add(link)
                Case Else
                    Exit Sub
            End Select
     
        End If
    End Sub

    As you can see, I used a separate theme (WCrossBrowser in the code), cause all css files in App_Theme/MyTheme folder was loaded at runtime.

    Bye.
  11. Armysniper
    Armysniper avatar
    126 posts
    Registered:
    03 Mar 2005
    09 Aug 2010
    Link to this post
    I am trying a similar thing where I want to change the header image based on where in the country the user is (Role Defined) Problem is that when I used Page.Header.Controls.Add in the Master page it inserts it first and then it processes the themes folder which contains the base image to display (when region is not concerned). How can I insert the link at the END of the process. I tried using AddAt(Page.Header.Controls.Count, stylesheet); but this did not work.
  12. Armysniper
    Armysniper avatar
    126 posts
    Registered:
    03 Mar 2005
    09 Aug 2010
    Link to this post
    I figured out how to get it to work...you add it to the Page_Load event. The Page_Load event is after the Theme process engine is done working. I added the same AddAt code above and it worked.
Register for webinar
12 posts, 0 answered