+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Empowering end-users using custom Sitefinity Layouts

by Gabe Sumner

Prior to Sitefinity 4, when I needed 3-columns on a page, I had several bad options available:

  1. Inject a table using the Rich Text editor. 
  2. Toggle into HTML mode and type raw HTML.
  3. Create a brand new template for this narrow scenario.

However, using Sitefinity 4’s layout editor I can quickly complete this task by dragging & dropping a 3-column layout onto my page.

Sitefinity 3-column layout

No HTML knowledge is needed and anyone can make use of this feature..  However, this gets even better;  these layouts are fully extensible and custom layouts bring a whole new opportunity for non-technical content authors to produce sophisticated results.

Custom Sitefinity Layouts in action

Consider the following page element:

Sample quote

To a seasoned HTML & CSS veteran, this isn’t overly complex.  But non-technical content authors won’t understand how to reproduce this effect in Sitefinity.  This is the type of custom styling that can be wrapped in a custom Sitefinity Layout:

Custom layout in Sitefinity

Custom layout in action in Sitefinity

Final result and customization of the custom Sitefinity layout

This is extremely simple to utilize within Sitefinity.  Content authors are fully empowered to create rich results, while still adhering to best practices.

How to create custom Sitefinity Layouts

The best part of this is how easy it is to create these layouts.  For the scenario shown above I created a single ASP.NET User Control (ASCX file):

image

Then I added a single additional CSS class to the code sample shown on the documentation.

image

The CSS styling that creates this effect is attached to the “note” class.  This styling was added to my Sitefinity Theme.

Lastly, I added this widget to Sitefinity Layout Toolbox:

image

The ControlType and CssClass (shown above) was copied & pasted from the existing 100% layout that already exists in Sitefinity.   For more details, see our official documentation for this topic.

Conclusion

The core purpose of a CMS is to serve as an abstraction for the underlying technologies and to enable people who know nothing about web technologies, to create web content.  Sitefinity Layouts represent another tool for empowering your content editors to do more.

4 comments

Leave a comment
  1. Dan Sorensen Aug 24, 2011
    I love this feature! Timely post for me too.

    Note: There is a typo in the URL for 'official documentation for this topic'. Please fix so I can look up more.
  2. Dan Sorensen Aug 24, 2011
    I love this feature! Timely post for me too.

    Note: There is a typo in the URL for 'official documentation for this topic'. Please fix so I can look up more.
  3. Gabe Sumner Aug 24, 2011
    Sorry Dan.  The link is now fixed.
  4. Dan Sep 19, 2011
    Is it possible to add a drop down attribute to go along with this customized shared content?

    For example, what if I'd like to provide 3 different styles of this quote boxes to my editors. (Classy, comic, default) That could be done by changing the 'note' class in your example to classyNote, comicNote, or note. If we had a dropdown to select one of three styles, the control editor logic could swap out the appropriate CSS style in the template.

    Is that possible with Sitefinity?

    Leave a comment