Column Layouts - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Column Layouts

  • Column Layouts
  • 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.

  • 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:
    www.sitefinity.com/.../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)