Use Bundled CSS in custom Theme

Posted by Community Admin on 04-Aug-2018 15:30

Use Bundled CSS in custom Theme

All Replies

Posted by Community Admin on 29-Jan-2016 00:00


I have a Sitefinity project where the CSS for the site is bundled and included in the Master page of the project.

Because of this, it's loaded first and some CSS properties are overwritten by the "Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css".

I want to prevent this by adding the CSS to a custom Theme, so it will be loaded after the Sitefinity LayoutBasics. But as far as I have seen it isn't possible to add bundled CSS to the theme, but I would really like to have the Bundle options and have it load after the Sitefinity LayoutBasics.css.

Can anyone please let me know if this is possible?


Kind regards,

Geert-Jan Smulders

Posted by Community Admin on 29-Jan-2016 00:00

Hi Geert-Jan,

Do you really need the Basic Theme on your template(s)? Otherwise you can switch off the theme for the template in the Sitefinity backend.

Otherwise just render your bundle before your headgin closing tag. Should be doable by inserting it through code or just in the markup of your template.

   <asp:PlaceHolder runat="server">
      <%: Styles.Render("~/Assets/Styles/donations") %>

If you use Feather templates it is should be even easier to accomplish.


Posted by Community Admin on 01-Feb-2016 00:00

Hi Daniel,
Thank you for your reply.

I have set the theme of the page template to "-- no theme --", but the LayoutsBasics.css is still being loaded.

If that was not the case, I could add the bundles style to your Master page as you described by using a placeholder, but now it won't render correctly.


I have followed the steps described here:

However, this page also indicates that it will still inject CSS: "however there will still be a little amount that we keep injecting in order to keep page content rendering properly"

When I open the site with the developer tools, and comment the LayoutBasics CSS, the site displays correctly.

Do you know if it's possible to update the settings so no standard-CSS will be loaded?

I have no experience with Feather yet, so I will look into it.


Kind regards,


Posted by Community Admin on 02-Feb-2016 00:00

I don't think it is possible to completely disable all styles that are rendered.

If you want complete control over your markup, you should really consider switching to Feather. Downside is that not all the built-in controls are ported to Feather yet.


Posted by Community Admin on 04-Feb-2016 00:00

Hi Daniel,

I know that it isn't possible to completely disable all the styles. This has been discussed in multiple threads on this forum and it's clear that it needs to stay less the site breaks.


When adding a bundle to the Master page, it will be included in the headers before the LayoutsBasics.css is loaded so this will overwrite the custom styling.

What I want is to load the LayoutsBasics.css first and my bundles after that.


Unfortunately I can't use Feather because the site is not completely MVC (yet).


I now have a workaround where I add a handler to the PreRenderComplete event of the Master Page where I find the LayoutsBasics.css link and insert it before the bundle.



protected void OnPrerenderComplete(object source, EventArgs e)

    //First place holder
    Control firstPlaceHolder = Page.Header.Controls.Cast<Control>().FirstOrDefault(c => c is PlaceHolder);

    if (firstPlaceHolder == null)

    int firstPlaceHolderIndex = Page.Header.Controls.IndexOf(firstPlaceHolder);

    // Find the Telerik HtmlLink
    Control ctrl =
                c =>
                    c is HtmlLink && ((HtmlLink) c).Href.ToLower().StartsWith("/telerik.web.ui.webresource.axd"));

    if (ctrl == null)

    // If found remove it and add it on top
    Page.Header.Controls.AddAt(firstPlaceHolderIndex, ctrl);


(how can I add this as a code block? Is there any reference for markup in forum posts?)


It's not very pretty, but it works.

This thread is closed