DNN Style Guide using HTML tags

This is a standard paragraph. You can use it by either coding <p>, or by making sure that the style is "Normal" in the text editor.

This paragraph explains how to make text "Bold". It can be bolded in two easy ways - First, you can just highlight the text you would like to make bold, and click the "B" in the text editor. Secondly, you can wrap what you would like to bold inside the <strong> tag. This is a bolded sentance using that strong tag mentioned earlier.

This paragraph explains how to make text "Emphasized", or commonly known as "Italicized". It can be emphasized in two easy ways - First, you can just highlight the text you would like to emphasize, and click the "I" (similar to Italics) in the text editor. Secondly, you can wrap what you would like to bold inside the <em> tag. This is an emphasized sentance using that em tag mentioned earlier.

Headings

There are two parts of this section - HTML headings, and DNN-specific headings. The HTML headings are described below -

This is an h1 heading. <h1>

It is used usually as a site's title/logo, but as you can see, is the largest and most dominant.

This is an h2 heading. <h2>

It is usually used for content-pane headings.

This is an h3 heading. <h3>

I like to use this for separating sections in a web page.

This is an h4 heading. <h4>

It can be used as a pull-quote, or some other smaller, yet dominant, text on the page.

This is an h5 heading. <h5>

I don't use these much.

This is an h6 heading. <h6>

I would use it sparingly.

DNN Specific Headings

The second part of this section, the DNN-specific headings, can be found below. We use three levels (Head, SubHead, SubSubHead) so the user has plenty of options to choose from.

Head

Head is used by DNN to be a section header.

SubHead

SubHead is used to show a subhead. It is text that is smaller than a Head, but still not quite as small as a paragraph.

SubSubHead

SubSubHead is just really funny. I don't know if I've ever used it.

Links

A website is made up of many links to referring pages. They can be used in many ways, but essentially, they all boil down to the <a href="..."> tag. To make a link, just use that tag before the text you would like to serve as your link text, then close it with </a>. For example, This is a link to the top of this page.

This is an example of a SkinObject link. It is used in various parts of the skin, including the Register and Login links.

This is an example of a CommandButton link. It is used mostly in the admin-side of DNN, for links that do certain commands.

Lists

In this section, we'll explain how to utilize all different kinds of lists in your site. A list is made up of many levels, and refer the models below to help.

Below is an example of an ordered list (to use it, wrap the entire list in <ol> and wrap each list item in <li>.

Steps in making a DNN skin.
1. Client interview.
2. Design a prototype.
3. Develop the body of .ascx files.
4. Style the skin accordingly, using CSS.
5. Enhance it with some Javascript.
6. Package it up and send it to the Client

Below is an example of an unordered list (to use it, wrap the entire list in <ul> and wrap each list item in <li>.

Things to do today:
• Finish Engage Skin.
• Complete Kitchen Sink.
• Walk the dog.
• Water the plants.
• Go to class.
• My duty for carpool.

Below is an example of a definition list (to use it, wrap the entire list in <dl> and wrap each item to define under that in <dt>, but then the text that defines that item in <dd>.

Definition List Example

The definition list has a detail section <dd> that can be used for description of the Definition Title <dt>.

Definition List Example

The definition list has a detail section <dd> that can be used for description of the Definition Title <dt>.

Tables

Tables are great for tabular data. Most tables consist of at least four parts: a table <table>, a table head <th>, a table row <tr>, and a table detail <td>

Other DotNuke Developer Styles

DotNetNuke comes with several pre-loaded styles that you can use for anything, but paragraphs in particular. To use any of the styles below, add the class name (Normal, NormalRed, etc...) to the element you'd like to apply it to. They are defined below:

Normal

Normal is... well, the normal style. What you see with <p> is styled with this selector. Fairly self-explanatory.

NormalRed

NormalRed is used primarily for error messages.

NormalBold

NormalBold can be used in many different cases. Like explained above, you can utilize this class by either highlighting the text you would like to bold in the editor and pressing the B button, or you can apply this class to the text you would like to bold.

NormalDisabled

NormalDisabled is generally used by DNN's administrative side to disable certain links. I think, anyways... not 100% sure here, boys.

NormalTextBox

NormalTextBox is for inputs, much like you would see on a form.

SkinObject

SkinObject is the general class for Search, Date, Breadcrumbs, Login, Register, Copyright, Terms, and Privacy links.

CommandButton

CommandButton's are buttons that give commands. ha!