Use Bundled CSS in custom Theme

Hi,

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

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.

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

Best,
Daniel

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: www.sitefinity.com/.../how-to-disable-the-built-in-css-styles-loaded-by-the-default-basic-theme

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,

Geert-Jan

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.

Best,
Daniel

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.

Code:

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)
   
        return;
   

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

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

    if (ctrl == null)
   
        return;
   

    // If found remove it and add it on top
    Page.Header.Controls.Remove(ctrl);
    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.