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

Forums / Designing & Styling / Column Layouts

Column Layouts

2 posts, 0 answered
  1. Martin
    Martin avatar
    4 posts
    Registered:
    02 Jul 2012
    13 Feb 2014
    Link to this post
    Hi,
    I'm looking for some help with the custom layout classes.
    Can someone explain what the role of the following classes?
    sf_cols
    sf_colsOut
    sf_colsIn

    Are they specifically used for SF backend dashboard layouts?
    Can they be removed from the frontend website?

    I'm concerned about the amount of extra non-semantic html mark up that SF creates, and would like to know if there is a way to remove or limit this.

    Ideally i would like to streamline at custom layout from this

    <div class="sf_cols row">
      <div class="sf_colsOut sf_2cols_1_50 six columns" style="">
        <div id="contentPlaceholder_T2BF46686027_Col00" class="sf_colsIn sf_2cols_1in_50">
          <div class="sfContentBlock">
            <p>Left Content Block</p>
          </div>
        </div>
      </div>
      <div class="sf_colsOut sf_2cols_2_50 six columns" style="">
        <div id="contentPlaceholder_T2BF46686027_Col01" class="sf_colsIn sf_2cols_2in_50">
          <div class="sfContentBlock">
            <p>Right Content Block</p>
          </div>            
        </div>
      </div>
    </div>

    To something like this.

    <div class="sf_cols row">
      <div class="sf_colsOut sf_2cols_1_50 six columns">
        <p>Left Content Block</p>
      </div>
      <div class="sf_colsOut sf_2cols_2_50 six columns">
        <p>Right Content Block</p>
      </div>
    </div>

    Any help would be grateful.

  2. Matt
    Matt avatar
    1 posts
    Registered:
    11 Dec 2014
    15 Dec 2014 in reply to Martin
    Link to this post
    The extra markup is indeed annoying, but a custom layout is the best approach on cleaning it up. The documentation how to do this can be found here:
    http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/custom-layout-widgets

    In your example for the extra markup, you'll want this in the custom layout: 

    <div runat="server" class="sf_cols  row">
        <div runat="server" class="sf_colsOut sf_2cols_1_50 six columns">
            <div runat="server" class="sf_colsIn"></div>
        </div>
        <div runat="server" class="sf_colsOut sf_2cols_2_50 six columns">
            <div runat="server" class="sf_colsIn"></div>
        </div>
    </div>

    And this what each one does:
    sf_cols - This allows you to click the edit button and allows you to add a class to the wrapper

    sf_colsOut - This allows the ability to adjust column width/spacing in the admin as well as add classes to each column.

    sf_colsIn (required) - This is where content can go. (ie: Drag and Drop Widget)
2 posts, 0 answered