New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Designed Content 1.3 - An Introduction to 2sxc

This is part 3 of my first series about beautiful content, in which I explain a basic content/template separation and the user experience with 2sxc.

What came before

In the previous sections (1.1 Introduction to Beautiful Content and 1.2 Separating Content from Beautiful Templates) we reviewed our goals, what we need to achieve it and various tools. If you have not read it, I recommend you start there.

In this section we'll look at a very simple example with 2sxc to understand the concept better and to see the UX (user experience) the end user will have.

Preparations to experience this yourself

The example in this blog is part of the default installation of 2sxc. So to try this yourself, all you have to do is install 2sxc (see demo-video) and when you insert the content module, press the large button to install the default templates (see screenshot below).

The Content-Type in this Example

The content-type is the what. It could be a person, an image, a reference, video or anything. Each content-type has its own set of fields and usually its own templates. So a Person might have Name, Surname, Phone, Photo, etc. and templates shoeing it as a Employee-profile or as a Google-Map. To really understand what we're talking about, let's assume a very trivial example called Simple Content with these 3 fields:

  1. Title (text, single-line)
  2. Content (text, wysiwyg - reduced to bullets, bold/italic, etc.)
  3. Image (a link or a DNN-file reference like "File:17")

The User Experience for the Content Editor

When the user wants to add or edit content, he will first choose what type of content he wants to add. In this case, he'll choose "Simple Content" - like this:

Now that 2sxc knows what content is to be added, it will automatically provide a layout for this - usually prefilled with demo-content. This could look as follows:

Now the user can try other layouts to satisfy his needs. The previews all load as AJAX (using  WebAPI), so it's blazingly fast. Thanks to the demo-content, it's easy to see what his content will look like. Note that the user can change layouts later on as well - so it's not really important which initial layout she chooses. Such layouts can look as follows:

Editing the Content

Most templates will have floating edit buttons, so when the mouse hovers over the content, edit-buttons will appear like this:

When the user clicks it, it will open the automatically generated edit UI. The fields will be empty (or contain a predefined default value). So the demo-data is only for the preview (otherwise the user would have to remember to remove all unwanted content).

Saving and Publishing

The user will usually then save the content, and he can optionally choose to not publish it yet (default is to publish changes).

If unpublished, then normal users will still see the previous content, while users with edit-permissions will see the modified content. The edit button will have a special sign to show that this is the unpublished version:

The Templates / Views

To finish off this simple example I want to show you the templates (also known as views) which create the designed output. These basic templates you see in these examples just use Tokens. These are simple placeholders using square brackets like [Content:Title]. This is the first template, which will place the chosen image on top:

Summing Up

That was the brief introduction to 2sxc. In the next parts, we'll look at all the specials in this simple template (like dynamic paths, thumbnailers, etc.) and how you can adapt the existing templates to your design and how to create new templates - using Token-placeholders which look like [Content:Title] and Razor-Views which look like @Content.Title.

Stay sexy,

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 600 DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out