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)