Column Layouts

Posted by Community Admin on 05-Aug-2018 11:39

Column Layouts

All Replies

Posted by Community Admin on 13-Feb-2014 00:00

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.

Posted by Community Admin on 15-Dec-2014 00:00

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)

This thread is closed