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

Forums / Developing with Sitefinity / Use Bundled CSS in custom Theme

Use Bundled CSS in custom Theme

5 posts, 0 answered
  1. Geert-Jan
    Geert-Jan avatar
    3 posts
    Registered:
    14 Jan 2016
    29 Jan
    Link to this post

    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

  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    29 Jan in reply to Geert-Jan
    Link to this post

    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.

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

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

    Best,
    Daniel

  3. Geert-Jan
    Geert-Jan avatar
    3 posts
    Registered:
    14 Jan 2016
    01 Feb in reply to Daniel Plomp
    Link to this post

    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: http://www.sitefinity.com/developer-network/knowledge-base/details/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

  4. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    02 Feb in reply to Geert-Jan
    Link to this post

    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

  5. Geert-Jan
    Geert-Jan avatar
    3 posts
    Registered:
    14 Jan 2016
    04 Feb in reply to Daniel Plomp
    Link to this post

    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.

5 posts, 0 answered