dotnetnuke.development.

Written by:
2/3/2012 9:47 AM 

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

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

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>

Form Items

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

<div class="dnnFormMessage dnnFormInfo">
   Your message
</div>

Success

<div class="dnnFormMessage dnnFormSuccess">
   Your message
</div>

Warning

<div class="dnnFormMessage dnnFormWarning">
   Your message
</div>

Error

<div class="dnnFormMessage dnnFormError">
   Your message
</div>

Buttons

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><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

Trackback Print

Tags:

Categories: modules., developing.

Location: Blogs bitboxx.dnn.blog bitboxx.dnn.articles

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel