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

Forums / Developing with Sitefinity / Stopping Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css from rendering

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

18 posts, 0 answered
  1. UI Crew
    UI Crew avatar
    151 posts
    Registered:
    27 Sep 2012
    27 Feb 2012
    Link to this post
    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


  2. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    29 Feb 2012
    Link to this post
    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
  3. Nico
    Nico avatar
    4 posts
    Registered:
    05 Mar 2013
    08 Mar 2013 in reply to Svetoslav Petsov
    Link to this post

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

  4. Kurren
    Kurren avatar
    23 posts
    Registered:
    08 Jun 2013
    27 Jan 2014
    Link to this post
    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?
  5. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    28 Jan 2014
    Link to this post
    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
  6. Eric
    Eric avatar
    7 posts
    Registered:
    10 Dec 2012
    18 Mar 2014 in reply to Svetoslav Petsov
    Link to this post

    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.

  7. Leon
    Leon avatar
    4 posts
    Registered:
    10 Feb 2014
    28 Mar 2014 in reply to Eric
    Link to this post

    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.

  8. Eric
    Eric avatar
    7 posts
    Registered:
    10 Dec 2012
    28 Mar 2014 in reply to Leon
    Link to this post

    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.

  9. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    28 Mar 2014
    Link to this post
    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
     
  10. Eric
    Eric avatar
    7 posts
    Registered:
    10 Dec 2012
    28 Mar 2014 in reply to Ivan D. Dimitrov
    Link to this post

    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.

  11. Leon
    Leon avatar
    4 posts
    Registered:
    10 Feb 2014
    30 Mar 2014 in reply to Ivan D. Dimitrov
    Link to this post

    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.

  12. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    02 Apr 2014
    Link to this post
    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
     
  13. Ryan
    Ryan avatar
    16 posts
    Registered:
    22 Jan 2014
    02 Apr 2014
    Link to this post

    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? 

  14. Leon
    Leon avatar
    4 posts
    Registered:
    10 Feb 2014
    02 Apr 2014 in reply to Ivan D. Dimitrov
    Link to this post

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

  15. Mike
    Mike avatar
    10 posts
    Registered:
    19 Feb 2014
    24 Apr 2014
    Link to this post

    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.

  16. Trevor
    Trevor avatar
    35 posts
    Registered:
    28 Jan 2012
    17 Sep 2015
    Link to this post

    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.

  17. Anita
    Anita avatar
    9 posts
    Registered:
    11 May 2015
    18 Nov 2015 in reply to Ivan D. Dimitrov
    Link to this post

    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.

  18. Anita
    Anita avatar
    9 posts
    Registered:
    11 May 2015
    18 Nov 2015
    Link to this post

    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:

    $('link[href^="/Telerik.Web.UI.WebResource.axd"]').remove();

     

    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!

18 posts, 0 answered