Stopping Telerik.Sitefinity.Resources.Themes.LayoutsBasics.c

Hi,

We use the Sitefinity Layouts quite a lot but we use it with our own CSS framework which sometimes clashes with the CSS Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css

We could use "!important" in our own CSS rules but that has a knock on effect when we are doing sites with media queries.

Is there a way we can either stop from rendering  Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css or load an alternative stylesheet in it's place (in effect replace the embedded css with another)?

Thanks,

Seth

Hi Seth,

 I responded in your support ticket. Here's the answer:

The reason why some Sitefinity stylesheets are always loaded is that they are crucial for the layout to function properly. These stylesheets cannot be changed or disabled, as this would break the whole layout logic. If you need any help overriding them, you can tell me what in particular is bothering you about those styles and I can help you deal with it.

I'm facing the exact same issue. Have there been any updates regarding this particular request?

I also want to strip the website of all layout so that when I add my own CSS I can more easily predict what the CSS will do, rather than having other phantom style sheets get in the way. Any suggestions?

Hello all,

As my colleague Svetoslav mentioned, the resources provided by the Telerik.Sitefinity.Resources assembly are vital for the proper functionality of Sitefinity and disabling them will cause more problems than it fixes - this I can guarantee. You do have the freedom of applying your own css in a theme and registering it in the backend as per our documentation. 

Regards,
Ivan D. Dimitrov
Telerik

It would be okay if you all didn't load this last and allowed the user to extend the styles without using !important (which is a ridiculously bad practice).  I find it hard to believe that underlining headers and specifying the colors of hyperlinks is CRITICAL to the functioning of Sitefinity.  All anyone really needs is that you load Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css FIRST instead of LAST.

 As a compelety hacky workaround of last resort I would even settle for being able to modify Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css so I can append my css to the end of it.  As bad as that sounds it is still better than appending !important to 1000 lines of css.

The workaround we use is to create a special content section block in the master page, JUST after the form tag in the master page. We then drag the css widget into that reserved block. It will then 'inject' your css after the SF resource, which means your css wins (last in wins). Its ugly, its against html standards, it kills some of the page content editing experience (ghost reserved block that cannot be touched) but it gets the job done.

I sort of tried this with my custom css, my level of commitment to this approach wasn't great enough to load the 100k twitter bootstrap file in this manner, maybe I should try that.

I was able to overcome all of my custom stylesheet's issues by adding page region divs with id's then prefixing my css with the #idname, this gave my css a greater level of specificity than the sitefinity css w/o having to use !important.  Unfortunately that doesn't help with 3rd party css like twitter bootstrap.

Hi all,

@ Eric

CSS load order is possible inside Sitefinity. The default implementation of the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css is crucial for the proper functioning of Sitefinity's backend. If you want to load it first on your site's frontend, you need to apply your theme as per our documentation. If all your css resources are placed within the App_Themes folder as per the folder three in the documentation, the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css will load last. 

Regards,
Ivan D. Dimitrov
Telerik

I don't think you understand, in fact this:

"the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css will load last."

is the problem not the solution. 

 When creating an extensible system that you want to be flexible and used by hundreds of thousand of people without imposing tons of limitations you want to load your CSS FIRST!  By loading it first you allow your end users to build upon the foundation you created, by loading it last you end up dropping the foundation on top of my carefully crafted roof.  Until Sitefinity acknowledges this as the CORRECT way to build a product this problem is going to persist.

AFAIK Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css should only be crucial if you enable WYSIWYG editing of the front end, which is the default. If you disable that via the Admin Settings (like we do), SF should be smart enough to disable the global css inject - or give some over override. Also, if this is crucial for SF controls then maybe you should rethink the structure and implementation of SF CSS, as the function of your baked in controls should not rely on the reset of global style elements.

Hi all,

@ Erik,
I will try and be as specific as I can in this reply. If you want to load your css AFTER the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css, you need to apply them to your theme and register the theme as per the documentation. If you want to load your css BEFORE ​ the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css you can place your template and styles anywhere on the Site's root or reference them as a resource from a separate assembly. Here is a video of this behavior. You can see I use the same asd.css file in both cases. When it is in the theme's Global folder it loads AFTER  the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css and when it is referenced from the site's root it loads BEFORE Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css.

@ Leon,

This is incorrect. the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css loads on any backend page in Sitefinity. You can verify this by expanding your browser's console and notice the Telerik.Web.UI.WebResource.axd css resource, which is a combined script that includes it. These rules are needed for the build in Sitefinity modules( News, Forums, Events, etc) and without them their Create, List and Edit views will not work. They rely on our styles. This thread's original topic was concerned with eliminating this resource, which is not possible. Provided you wish to override it, you can do so freely on the front end and there are multiple resources online on how to apply css and override css in Sitefinity.

Regards,
Ivan D. Dimitrov
Telerik

I've been working with this product for only 3 days and am continually baffled by these decisions. I ended up in this thread when I wanted to find out how to not load your stylesheets. What if I have a conditional html comment for older version of IE? I need that to load last, and don't like that I'm probably forced to put it within the body. How will I do that with my theme? Why are you forcing us to use themes? I thought this was supposed to be flexible for developers? 

@Ivan 

[quote]This is incorrect. the Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css loads on any backend page in Sitefinity.[/quote]

I think we are all talking about the frontend here, at least I know that I am. I get that the backend might rely on this, but I still think the frontend should have an option to disable this - for many, many reasons that should be considered in modern web sites, such as the example mentioned previously by Ryan. Injecting magic markup and css has fallen out of favour, as witnessed by the rise in popularity of MVC frameworks and the like which allow you to work closer to the html 'metal'.

Thanks for the screencast though, it is actually the first clear explanation I have seen on how to get your css in after SF css.

In addition to the problems with overriding the CSS when it is added where it is, it is also against best practice for CSS to be the final thing in the head.  In general, all CSS should come before any JavaScript code for better performance (older browsers + mobile still block on JS downloads in many cases).  There should be a user control for the CSS to be positioned where the end developers want it to go, and by default it should be above the JS includes.

I'm also having trouble with this Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css

I have mostly MVC pages, but I've created one that is Hybrid mode. The MVC pages work great without Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css, but the Hybrid mode template loads in this Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css file into the Frontend

This breaks my site styles.

How can I stop this from loading into the front end? This has absolutely no useful purpose what-so-ever on the front end of the website. I don't even allow inline-editing on the front end.

I'm using Sitefinity 8.1, I've registered a theme in the backend and the cssLoadOrder.xml is working correctly, since my custom CSS shows up. HOWEVER, Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css is STILL loaded after all of my custom CSS! I've even added bootstrap.min.css to my themes folder to try to get it to load after Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css, but nope.

I ended up using JQuery to remove the resource link from the DOM entirely.

Drag a Javascript widget into your master page template and copy/paste the following:

When I "view page source" the resource link is still called, but the CSS isn't used. Not sure how that works, but I'm glad I won't be forced to write bad CSS to overwrite everything!