Embedded css
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
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:
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&_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
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
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
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:
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 ...h1, h2, h3, h4, h5, h6 font-size:100%;font-weight:normal;.public-wrapper .sfContentBlock h2 ...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 :
I hope this answers your question.
Greetings,
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
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:
The right order is:
Let us know if you need further help.
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
Never mind, in my frustration I scrolled right by the answer.
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>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.