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

Forums / Designing & Styling / Using my own column layouts in a custom layout template

Using my own column layouts in a custom layout template

13 posts, 0 answered
  1. Josh Anderson
    Josh Anderson avatar
    48 posts
    Registered:
    15 Dec 2005
    30 Dec 2013
    Link to this post
    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?
  2. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    02 Jan 2014
    Link to this post
    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.

    Regards,
    Vassil Vassilev
    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
  3. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    03 Jan 2014 in reply to Josh Anderson
    Link to this post
    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.
  4. Josh Anderson
    Josh Anderson avatar
    48 posts
    Registered:
    15 Dec 2005
    03 Jan 2014 in reply to Jochem Bökkers
    Link to this post
    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.

    Josh
  5. Josh Anderson
    Josh Anderson avatar
    48 posts
    Registered:
    15 Dec 2005
    03 Jan 2014 in reply to Josh Anderson
    Link to this post
    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.
  6. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    03 Jan 2014 in reply to Josh Anderson
    Link to this post
    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.
  7. Martin
    Martin avatar
    4 posts
    Registered:
    02 Jul 2012
    12 Feb 2014
    Link to this post
    Hi,
    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.
  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    12 Feb 2014 in reply to Martin
    Link to this post
    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.

    Jochem 
  9. Martin
    Martin avatar
    4 posts
    Registered:
    02 Jul 2012
    19 Feb 2014 in reply to Jochem Bökkers
    Link to this post
    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?
  10. Aniko Erlinger
    Aniko Erlinger avatar
    2 posts
    Registered:
    02 Jan 2010
    28 Sep 2014 in reply to Martin
    Link to this post

    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.

  11. Chris
    Chris avatar
    11 posts
    Registered:
    10 Mar 2011
    07 Oct 2014
    Link to this post

    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 () {
                $(this).val('');
            });
     
     
            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 = "";
                }
            }
        }
     
    });

    Thanks,

    Chris

  12. JF
    JF avatar
    2 posts
    Registered:
    05 Feb 2015
    05 Feb 2015
    Link to this post

    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">
            </div>
        </div>
     
    </div>

  13. JF
    JF avatar
    2 posts
    Registered:
    05 Feb 2015
    05 Feb 2015 in reply to JF
    Link to this post
    Nevermind, wrong path.
13 posts, 0 answered