Stopping Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css from rendering - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Stopping Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css from rendering

  • Stopping Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css from rendering
  • 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.

    All the best,
    Svetoslav Petsov
    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
  • 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
    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
  • 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.

  • 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.

  • 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
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  • 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.

  • @Ivan 

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

    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.

  • 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
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  • 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?