DotNetNuke Core CSS Styles

With my developers, I am feel like I am always explaining which classes should be used for each situation and when I had a consulting client ask me about how to make your custom modules pick up the same styles that skin developers have to style anyways to make the core controls follow design rules I realized it’s because there’s no guide anywhere on which classes to use in the right situation.

First – a note. Make sure that you use the casing displayed in this document. The casing is important if you ever decide to use XHTML since IE is case sensitive with higher levels of HTML compliance.

Normal: This style should be used for general text throughout your site and controls. If you use tables, datagrids, gridviews or datalists, you should add this class to the class attribute of the table, otherwise it picks up another funky style even if you have the table wrapped in a span or div with Normal applied to it.

SubHead: This style should be used as section heads or paragraph titles and label titles on forms.

Head: This is the equivalent of an H1 tag.

CommandButton: this style is used for links and linkbuttons.

Styling the DotNetNuke Label: The DNN label control does not support supplying the class for the general label text. Therefore, if you want to use set a style for the text in the label, you’ll need to supply it in the containing HTML element.

Bringing It All Together

<%@ Register Src=”~/controls/labelcontrol.ascx” TagName=”labelcontrol” TagPrefix=”dnn” %>

<table id=”tblForm” cellspacing=”0″ cellpadding=”0″ class=”Normal”>

<tr>

<td class=”SubHead”>
<dnn:labelcontrol ID=”lblEmailAddress” runat=”server” HelpText=”Enter Your Email” Text=”Email Address” />
</td>

<td>
<asp:TextBox ID=”txtEmailAddress” runat=”server”></asp:TextBox>
</td>

</tr>

<tr>

<td>
<asp:Label ID=”lblEmailMe” runat=”server” CssClass=”SubHead”>Send Me Spam</asp:Label>
</td>

<td>
<asp:CheckBox ID=”chkEmailMe” runat=”server”></asp:CheckBox>
</td>

</tr>

<tr>

<td colspan=”2″> <asp:LinkButton runat=”server” ID=”lnkAction” CssClass=”SubHead”>Click Me</asp:LinkButton> </td>

</tr>

</table>

Arrow Consulting & Design is a consulting firm based in West Palm Beach, Florida specializing in DotNetNuke, ASP.NET, SQL and WPF Development with a portfolio filled with local, national, government and global enterprise clients.

Case Studies: Click Here
Main Corporate Site: www.ArrowDesigns.com
DotNetNuke Community Site: www.ArrowNuke.com
Consulting Inquiries: Click Here
Skin Design/Conversion: Click Here
DotNetNuke Portfolio: Click Here

Advertisements

~ by dotnetnukeconsulting on August 8, 2008.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: