Using my own column layouts in a custom layout template - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Using my own column layouts in a custom layout template

  • Using my own column layouts in a custom layout template
  • We're doing a site redesign on Sitefinity 6.3, and we're utilizing a third-party responsive HTML5 design that we're trying to implement in Sitefinity. I'd like to be able to set up the site's layouts as custom layout widgets so I don't have to have a master page based template for every page layout we have in mind. The problem is that Sitefinity seems to require it's built-in classes to define column sizes. This defeats the purpose of the custom layout...I want to control that entirely, without Sitefinity overriding percentage widths and padding. Is this possible?
  • Hello Josh,

    There is a way to change the built-in classes of the columns using the Layout editor in Sitefinity. Please take a look at the following article from Sitefinity`s documentation. Additionally you can keep the classes as they are and add additional for your responsive design. For example if you have used a 2 columns layout widget on the page/template you can go and write leftColResponsive and rightColResponsive respectively with a comma next to the original classes.

    Vassil Vassilev
    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
  • Hey Josh,

    In addition to Vassil's drag-n-drop approach, you can also 'pre-build' layout controls, which are basically nothing more than .ascx files with some html div-ness. 

    If you look here for instance you'll see a layoutcontrol which uses both the Sitefinity classes and the Bootstrap classes to create a 2 column 50% layout. The things that essentially 'trigger' a placeholder region are the sf_cols, sf_colsOut and sf_colsIn classes.

    You're free to remove the ones like sf_2cols....  because these are the ones who add the styling.

    If you're still bitten by some styles happening because of the default layout controls, take a look at this file lines 26-46 are all the css declarations you need to override/revert/handle the Sitefinity layout styling.
  • It looks like the default sitefinity layout styles are still overriding mine. I did try to use the bootstrap CSS you linked to, as this design is bootstrap-based, but the default margin settings at 0 are what break the auto margin right and left I have to center the column container.

    I don't suppose there's a way to prevent sitefinity from sending its styles at all, is there? I really don't want to have to put !important all over my CSS, and even if I did that would likely break purposeful inheritance somewhere.

  • I was overthinking this...I got it to work simply by wrapping my entire layout in the sf_cols div. That allowed the bootstrap styles to work just fine.
  • As soon as you turn on responsive it gets send down the line I believe, so no easy way there.

    Two ways around it, create your own bootstrap layout controls (copy those from github and remove the sf_2cols classes I've kept in for compatibility). Or simply use something like #PublicWrapper .sf_2cols_ ... to redefine your classes and avoiding the use of !important.
  • 05f14d1e-37c1-6deb-a958-ff0000446526_sf-column-problem.png
    Sorry to hi-jack the post (let me now if I should create a new post), but i'm having a similar issue.
    I'm trying to use a third party grid system (Gumby), and i'm having some success with creating custom layout widgets. The columns widths are displayed correctly when I drag and drop the layout onto the page. (First row in image)
    Once I try edit the layout to add a class (class can't be added within the template), the widths change and breaks the display.
  • Hey Martin,

    You should be able to go to the 'Classes' tab on the right and add/remove your extra classes there.
    If you start dragging the width or enter in the percentage numbers, the styling will be inlined and thus cancelling your classes.

  • Thanks Jochem, 
    Is there anyway to override the inline style settings of the layout element. Specifically the "width" attribute?
    If I choose to edit a custom layout, the width field is automatically populated.
    Can I override this or set it once with my custom layout?
  • Yes, you can override it with CSS. You just have to make sure that your CSS rule specificity is higher than the inline style's specificity (simply put: use "!important"). Make sure however that your override does not destroy layout elsewhere.

    @ Jochem: I am using SF 7.1, but I am not able to add classes to layout element columns. I enter them, but Sf does not render the classes to the applicable HTML tags. This was not an issue before. i am having trouble with this since 7.1.

  • Hello Everyone,

     Regarding the inline width styles being added to layouts:

     If you are using a responsive framework and are trying to use your framework's CSS classes in Sitefinity's layouts - you will run into the inline width problem whenever you go back to edit a layout the second time. This of course overrides the styling from the framework's CSS classes. I came up with a workaround that worked really well for my project.

    For my project, I was using ZURB Foundation. And with their framework, the CSS class "row" dictates a new row. And "columns" or "column" dictates a new column. When I was using these classes in a Sitefinity layout, I always had "row" as one of the Wrapper CSS Classes for my layout widget. The JavaScript code below needs to referenced from your master page (so it gets added to every page in your site). It attaches to the click handler of the "Done" button in the layout editor. If the layout editor detects the "row" CSS class in the wrapper tag, it clears the inline widths before executing the standard click event. This same code will work if you use other responsive frameworks, you would just modify the "row" CSS class to something else.

    // If the layout is a responsive layout, clear the width styles on the element
    $(".sfLayoutPropsContainer .sfLinkBtn.sfSave").click(function ()
        var editor = $find("LayoutEditor1");
        if (editor._layoutRoot.classList.contains("row"))
            $(".sfLayoutPropsContainer #columnList .sfTxt").each(function ()
            var columns = editor._widthEditor._outerColumns;
            var colCount = editor._widthEditor._outerColumns.length;
            for (var i = 0; i < colCount; i++)
                if (editor._widthEditor._outerColumns[i].style.width != "")
                    editor._widthEditor._outerColumns[i].style.width = "";



  • I've been trying to setup my own layout widgets but I've run into a problem. When dragging the widget over into a content area I receive the following error:

     Invalid resource name "/Sitefinity/WebsiteTemplates/Rogers/CustomLayouts/custom1.ascx" for assembly "Telerik.Sitefinity.Resources, Version=7.1.5200.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" or empty template.

     Any insight would be appreicated.

     custom1.ascx contains the following:

    <%@ Control Language="C#" %>
    <div runat="server" class="sf_cols row">
        <div runat="server" class="sf_colsOut large-12 columns">
            <div runat="server" class="sf_colsIn">

  • Nevermind, wrong path.