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

Forums / General Discussions / Embedded css

Embedded css

14 posts, 1 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    26 Jan 2011
    Link to this post
    Hi,

    I realise that Sitefinity embeds css and javascript into the frontend of the website. I dont really use any of the Telerik controls on my frontend, but im sure disabling the css/jscript will cause issues. Apart from the extra page load i.e. downloading these files, im not too concerned, however what does bother me is that the embedded css is overwriting all of my css. Again, I could write !important next to every css rule, but that is such bad practice and has a really negative impact on the browser that I really dont want to have to do it - thats a step back towards 2005.

    So, I'm trying to find out, at what point is the embedded css loaded? And where in the head does it try and put it...what I'm getting at is, is it possible to dynamically load my css file AFTER the embedded css file has been loaded - that way my css rules will naturally override?

    Any ideas anyone? I think this would be a very good compromise.

    Thanks
    higgsy
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    27 Jan 2011
    Link to this post
    Hi higgsy,

    This is a bug and it is logged in our system under # 104403. It is due to be fixed for one of the next internal builds releases (most probably next week). The correct order of CSS files loading is:
    1. Rad Controls CSS files
    2. Theme CSS files
    3. CSS files linked to the page via CSS widget
    Until then you can use !important (which I agree is not good practice) or more specific CSS rules.

    All the best,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    27 Jan 2011
    Link to this post
    Hi Katia,

    Thanks for your reply.

    Could you just clarify the following:

    1) Once the bug is fixed, will it be possible to completely disable the embedded css / jscript? Or perhaps completely disable it on the frontend (providing the website doesnt use any RadControls of course)

    2) You have indicated the order in which css files should load, but what about css files that are just in the <head> of our master pages, where does this feature in your list? If the embedded css / javascript can't be completely disabled, i think its quite essential that the embedded files are embedded at the beginning of the <head> section, i.e. before our own site css files are loaded. Does that make sense?

    Essentuially the desired output is:

    <head>

    <link href="/Telerik.Web.UI.WebResource.axd?compress=1&amp;_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3ad271177c%3adff30785" type="text/css" rel="stylesheet" />
    <link href="/mystyles.css" type="text/css" rel="stylesheet" />

    </head>

    Thanks
    higgsy

  4. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    27 Jan 2011
    Link to this post
    Hi Katia,

    I have this issue as well. However my concern is that you say it will be available in the next internal release yet we've been clearly told that from now on internal releases are for development/internal use only and not to be used on production sites (as they aren't backwards compatible therefore future upgrades could break). Does this mean that we have to wait until the Q1 version for this fix or are there any other possible work arounds?

    Regards,
    Phill
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    27 Jan 2011
    Link to this post
    Hi higgsy,

    If you do not have Rad Controls on a public ( frontend) page,there should not be loaded css or js files on this page. However, if you are logged in to the administration, CSS and Javascripts files of Rad Window will be loaded because we use it for widget/content editing.

    CSS which is declared in the master page should be loaded first. So the order of loading is:
    1. CSS linked/declared in master page
    2. CSS of Rad Controls (loaded only if there is at least one Rad Control on the page)
    3. CSS of the theme applied to the page
    4. CSS linked via CSS widget

    Sitefinity 4 Service Pack 1 is due in the week of February 21. Until then I recommend that you use more specific CSS rules to deal with uncorrect file loading order.

    Greetings,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    27 Jan 2011
    Link to this post
    Hi Katia,

    I have absolutely no radcontrols on my frontend, however the CSS and JScript is still loaded. And I am not logged into the backend CMS. Is this a bug?

    I do not completely understand your response. You are indicating that the radcontrols are loaded after the css files we load in our master pages, therefore, the RadControls css will always override ours. Let me give you an example:

    I have a usercontrol, as simple as this:

    <%@ Language="C#" %>
    <h2><asp:Literal runat="server" /></h2>

    When that is rendered on my frontend page, the H2 is overwitten by a styling coming from:

    /Telerik.Web.UI.WebResource.axd?compress=1&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3ad271177c%3adff30785

    There is this naughty little piece of global css in there:

    If therefore the css I load in my master page has a definition for a h2, it is going to be overwritten by the css in the embedded resource.

    So Im not sure I understand what you are saying the bug is, and what you are suggesting is going to be fixed. There seems to be to be at least two bugs:

    1) I have no radcontrols on my frontend page whatsoever, not even the radscriptmanager, and the css and jscript is being loaded.
    2) Forget point 1 for a moment, on the backend I realise you probably need to make sure that the embedded styles/script are the last thing to be loaded because they are used for the CMS interface, but not on the frontend.

    Could you please clarify.

    Thanks
    higgsy


  7. Vincent
    Vincent avatar
    41 posts
    Registered:
    21 Sep 2007
    27 Jan 2011
    Link to this post
    Higgsy,

    I have had a similar problem with css not rendering the way I wanted.
    I used Firebug to understand what happened and found that some embedded sitefinity style was overriding my css.
    For instance :
    .sfContentBlock h2 {
    ...
    }

    was overrided by
  8. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    28 Jan 2011
    Link to this post
    Higgsy,

    What I understood from your last response is that you link your CSS in the masterpage directly and you do not use Sitefinity administration to set a theme for your site. However, there is a default public theme which is applied to all website pages (Basic). The CSS rule set you have quoted below is from the Reset.css of the Basic theme. These are not Rad Control's CSS files.

    The behaviour you are experiencing at the moment is the expected one — files link in a master page are to be loaded first after that files from site theme are to loaded which in your case is Basic theme.

    In order to turn off the applying of Basic theme to public pages globally :
    1. Go to Administration > Settings & configurations > Settings > Advanced
    2. Click Appearance from the treeview on the left
    3. Delete Basic from DefaultFrontendTheme field
    4. Click "Save changes"

    I hope this answers your question.

     

    Greetings,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  9. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    28 Jan 2011
    Link to this post
    Katia,

    No, I don't really use themes - I've not found a need for them.

    Your answer was spot on, I now don't have any Sitefinity CSS overridding my own. For clarity purposes, can you just list the order which the css is currently being loaded in i.e. bug #104403 - this would be very useful just incase anyone else comes across it.

    Thanks for your help.
    higgsy
  10. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    28 Jan 2011
    Link to this post
    Hi higgsy,

    I am very glad Basic theme CSS files are no longer being loaded to your site.

    The order which CSS files are being loaded in at the moment is:
    1. files linked in Master page
    2. files linked via CSS widget
    3. files from public theme
    4. Rad Controls CSS files (loaded only if there is Rad Control on the page) 

    The right order is:

    1. CSS linked/declared in master page
    2. CSS of Rad Controls (loaded only if there is at least one Rad Control on the page)
    3. CSS of the theme applied to the page
    4. CSS linked via CSS widget

    Let us know if you need further help.


    Greetings,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Matthew
    Matthew avatar
    33 posts
    Registered:
    15 Dec 2008
    17 Feb 2011
    Link to this post
    Has this been fixed yet? This is my first taste of Front end development in SI4 and this CSS thing is killing me. You have pretty much every standard ID in there already styled (header,main,content,footer).

    thanks,
    Matt  
  12. Matthew
    Matthew avatar
    33 posts
    Registered:
    15 Dec 2008
    17 Feb 2011
    Link to this post
    Never mind, in my frustration I scrolled right by the answer.
  13. John Tolar
    John Tolar avatar
    87 posts
    Registered:
    07 May 2003
    08 Aug 2011
    Link to this post
    Has this bug popped up again in 4.1.1574 (or better known as 4.1 SP3).

    I just upgraded a SP1 project to SP3 and it broke the Themes...

    Here is the latest version of the css load order.

    <html>
     
    <head id="Head1">
    <title>
     
        Core Competencies
     
    </title>
     
    <link href="App_Themes/HighlandFrontend/global/format.css" type="text/css" rel="stylesheet" />
    <link href="App_Themes/HighlandFrontend/global/style.css" type="text/css" rel="stylesheet" />
    <meta name="Generator" content="Sitefinity 4.1.1574.0 SE" /><link href="/Telerik.Web.UI.WebResource.axd?compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2011.1.413.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen%3a71598907-ed61-48cf-848a-7bcbb14d6dd6%3aed2942d4%3a36964293%3a8cee9284" type="text/css" rel="stylesheet" />
    </head>
     
    <body>
  14. John Tolar
    John Tolar avatar
    87 posts
    Registered:
    07 May 2003
    08 Aug 2011
    Link to this post
    Nevermind... I see that they are finally using the guidelines in the documentation and you need to put themes in the App_Data\Sitefinity\WebsiteTemplates folder.
14 posts, 1 answered