I am now in the situation to convert the DNN FAQs module to DNN 6. The first thing to do is to implement the new form pattern from DNN 6. I looked around in the internet to find some resources which help with that and found a video from Ian Robertson in the DNN Wiki and some blog posts but no document where everything is documented together . So I decided to put that information together in a blog post
Module wrapper
The content of your module has to be wrapped by the “dnnForm” CSS class. All the styles for dnnForm are defined in default.css
<div class="dnnForm">
<!-- form content goes inside -->
</div>
for overwriting some of the styles in module.css define a module specific class
<div class="dnnForm dnnMyModule">
<!-- form content goes inside -->
</div>
Navigation
![Formpattern - Admin Tab Navigation Admin Tab Navigation](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/admintabs.png)
The Navigation Tabs (used mostly in the settings area) are written as a simple ordered list:
<ul class="dnnAdminTabNav">
<li><a href="#ssBasicSettings">Basic Settings</a>
<li><a href="#ssAdvancedSettings">Advanced Settings</a></li>
</ul>
<div id="ssBasicSettings">
<!-- Content goes here-->
</div>
<div id="ssAdvancedSettings">
<!-- Content goes here-->
</div>
Collapsible Panels
![Formpattern - Collapsible panels Collapsible panels](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/panels.png)
If there are 3 or more groups of content, first panel should be expanded and the rest should be collapsed.
<h2 class="dnnFormSectionHead">
<a class="dnnSectionExpanded">Site Details</a>
</h2>
<fieldset>
<!--Content goes here-->
</fieldset>
![Formpattern - Form Item Form Item](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/formitem.png)
A typical form item is build of two or more components: Label, Input, Validation
<div class="dnnFormItem">
<dnn:label />
<asp:textbox class="dnnFormRequired" />
<asp:requiredfieldvalidator cssclass="dnnFormMessage dnnFormError" />
</div>
Messages
Messages follow a simple scheme:
Info
![formpattern-infomessage formpattern-infomessage](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/infomessage.png)
<div class="dnnFormMessage dnnFormInfo">
Your message
</div>
Success
![formpattern-successmessage formpattern-successmessage](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/successmessage.png)
<div class="dnnFormMessage dnnFormSuccess">
Your message
</div>
Warning
![formpattern-warningmessage formpattern-warningmessage](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/warningmessage.png)
<div class="dnnFormMessage dnnFormWarning">
Your message
</div>
Error
![formpattern-errormessage formpattern-errormessage](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/errormessage.png)
<div class="dnnFormMessage dnnFormError">
Your message
</div>
![formpattern-action formpattern-action](/Portals/0/Blog/Dnn6FormPatternHtmlConventions/Images/action.png)
Define your actions as Hyperlinks or LinkButtons in an ul-list of class “dnnActions”.
<ul class="dnnActions">
<li><asp:linkbutton id="cmdUpdate" cssclass="dnnPrimaryAction" runat="server"></asp:linkbutton></li>
<li><asp:linkbutton id="cmdCancel" cssclass="dnnSecondaryAction" runat="server"></asp:linkbutton></li>
</ul>
Update:
There is a very good new DNN UX Guide online. See this link: http://uxguide.dnngallery.com