HTML & DNN Elements Style Guide

Headings

All HTML headings,

through
are available.

(Heading 1). This is the primary heading and there should only be one of these per page

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

(Heading 2). A sub heading which is not as important as the first, but is quite imporant overall

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

(Heading 3). A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

(Heading 4). A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

(Heading 5). A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

(Heading 6). This heading plays a relatively small role, if you use it at all

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

DNN Specific Headings

DNN-specific headings can be found below. There are three levels (Head, SubHead, SubSubHead) used across DotNetNuke.

Head

Head is used by DNN to be a section header. Generally we match this style to all

(Heading 2) across the site.

SubHead

SubHead is used to show a subhead. Generally we match this style to all

(Heading 3) across the site.

SubSubHead

SubSubHead is just really funny. This is a rarely used element. Generally we match this style to all

(Heading 4) across the site, just in case.

Body copy

A small paragraph to emphasis and show important bits. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

rendered as bold text

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

rendered as italicized text

Heads up! Feel free to use and in HTML5. is meant to highlight words or phrases without conveying additional importance while is mostly for voice, technical terms, etc.

Blockquote

Wrap

around any HTML as the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

There is also another quote style by adding the class "quote" to just about any HTML for your quote. The example below applies to a html blockquote, but it can be used on paragraphs, headers, etc. The style will match the element, but add large grey quotations at the top left and right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

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

Button Primary

Button Secondary

Button Tertiary

Button

Button Info

Button Success

Button Warning

Button Danger

Button Inverse

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  • ...

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. ...

Definition

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
...
...

Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any

.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
...
...

Since we are using Bootstrap there are many more style options available, for example having alternating stripes. add the base class .table and .table-striped to any

.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
...
...

Bootstrap

Our skin is built with Bootstrap, and takes advantage of a lot, if not all of it's features. With that said, there are some overrides that we may have made or some conflicts. If you want to explore more or experiment with using Bootstrap, check it out at GetBootstrap.com