Content goes here: (Style=none)

Print Page

Print Test Area

This page is not normally visible by viewers of the web site. It is usually only visible by users who have the authority to edit content. It is intended to show how various styles are supported by the current skin. It is also used by the web master while developing, enhancing or fixing the skin.css file.

Other Test Pages

The following pages are not visible in the menus and are used for testing new "skins", styles and test modules. They are visible via this help page so that other developers can view them when required. These links come up in a new window or tab.

• Skins --- Test Page - 1pane  Blank Page 1paneSimple  1paneLeftNav  2pane 3 pane 2007 skin
• Modules --- Modules Test Page 
• Test Portals: Basic.AgingSafely.com

This is a H1 Heading

Since the 1500's typesetter have used blocks of "Lorem Ipsum" text to demonstrate how text wraps around pictures, quotes, and tables inserted into the flow of text. The remainder of this page will continue with that tradition. So when you see English text, usually bolded, near a picture, quote or table you should assume that it is describing what that operation. (Style=Normal)  When you see (Style=xxx) as you just saw; it indicates which style was used with the adjacent text. 

The following indicate bold, italic, underlined text and crossed out text. Underlining is usually a bad form, since underlining is the traditional style for links on web pages. These styles were done using the "B", "I",  "U", and "abc" buttons on the tool bar. Subscripts₁ and Superscripts² can also be done using the "X₂" and "X²" buttons. 

Below you will see NormalBold, NormalItalic and NormalRed styles. They may use different type faces or other more advanced ways to achieve the desired style.

Pay attention to the amount of vertical space around Heading Levels, that is why they are shown between paragraphs. The vertical spacing in lists and around table picture elements are also important to understand.

H2 Heading - Usually used for subtitles or section headings

h2 class="grade"  there is also h1-4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, leo sit amet tempor consectetuer, urna elit tempor tortor, non rhoncus massa elit non elit. In sagittis. Phasellus pretium pharetra dolor. Suspendisse tincidunt facilisis nibh. Integer (Sytle=NormalBold)

H3 Heading

Vivamus fermentum. Integer eu diam vitae massa sollicitudin commodo. Sed tincidunt tempor orci. Pellentesque in justo. Donec lacinia eros vitae nulla. Fusce facilisis massa sed risus. (Style=NormalRed or red)

Sed interdum mauris ac augue. Nullam arcu. Ut ac tortor. Aliquam ac purus in metus gravida porta. Duis a neque. Vivamus et lectus in nunc vestibulum aliquam. Sed at enim (Style=NormalItalic)

An un-ordered 4 level list follows this H4 Heading

• Nullam vulputate. Maecenas placerat elit at dui. Morbi malesuada ornare metus. Duis sem. Nam tempus. Donec aliquet pulvinar mi. Vivamus mauris quam, gravida lacinia, pharetra vitae, cursus sit amet, arcu. Aliquam sed lacus in lacus pulvinar pharetra. Pellentesque mattis.
• This line is to show the normal spacing.
  • Nullam vulputate. Maecenas placerat elit at dui. Morbi malesuada ornare metus. Duis sem. Nam tempus. Donec aliquet pulvinar mi. Vivamus mauris quam, gravida lacinia, pharetra vitae, cursus sit amet, arcu. Aliquam sed lacus in lacus pulvinar pharetra. Pellentesque mattis.
    • Nullam vulputate. Maecenas placerat elit at dui. Morbi malesuada ornare metus. Duis sem. Nam tempus. Donec aliquet pulvinar mi. Vivamus mauris quam, gravida lacinia, pharetra vitae, cursus sit amet, arcu. Aliquam sed lacus in lacus pulvinar pharetra. Pellentesque mattis.
      • Nullam vulputate. Maecenas placerat elit at dui. Morbi malesuada ornare metus. Duis sem. Nam tempus. Donec aliquet pulvinar mi. Vivamus mauris quam, gravida lacinia, pharetra vitae, cursus sit amet, arcu. Aliquam sed lacus in lacus pulvinar pharetra. Pellentesque mattis.
• Nullam vulputate. Maecenas placerat elit at dui. Morbi malesuada ornare metus. Duis sem. Nam tempus. Donec aliquet pulvinar mi. Vivamus mauris quam, gravida lacinia, pharetra vitae, cursus sit amet, arcu. Aliquam sed lacus in lacus pulvinar pharetra. Pellentesque mattis.

This is the next paragraph.

The following is an ordered 4 level list - This is an H5 Heading

1. Aliquam erat volutpat. Maecenas et sem sit amet quam bibendum cursus. Nunc sit amet mauris at nunc adipiscing laoreet. Integer a lectus. Nulla ante mi, aliquam id, pellentesque ut, sodales id, erat. Duis pulvinar. Morbi scelerisque elit nec enim. Duis ante. Praesent nisl lectus, rhoncus ac, rutrum a, dapibus ut, lectus.
2. This line is to show the normal spacing.
   1. Aliquam erat volutpat. Maecenas et sem sit amet quam bibendum cursus. Nunc sit amet mauris at nunc adipiscing laoreet. Integer a lectus. Nulla ante mi, aliquam id, pellentesque ut, sodales id, erat. Duis pulvinar. Morbi scelerisque elit nec enim. Duis ante. Praesent nisl lectus, rhoncus ac, rutrum a, dapibus ut, lectus.
      1. Aliquam erat volutpat. Maecenas et sem sit amet quam bibendum cursus. Nunc sit amet mauris at nunc adipiscing laoreet. Integer a lectus. Nulla ante mi, aliquam id, pellentesque ut, sodales id, erat. Duis pulvinar. Morbi scelerisque elit nec enim. Duis ante. Praesent nisl lectus, rhoncus ac, rutrum a, dapibus ut, lectus.
         1. Aliquam erat volutpat. Maecenas et sem sit amet quam bibendum cursus. Nunc sit amet mauris at nunc adipiscing laoreet. Integer a lectus. Nulla ante mi, aliquam id, pellentesque ut, sodales id, erat. Duis pulvinar. Morbi scelerisque elit nec enim. Duis ante. Praesent nisl lectus, rhoncus ac, rutrum a, dapibus ut, lectus.
3. Aliquam erat volutpat. Maecenas et sem sit amet quam bibendum cursus. Nunc sit amet mauris at nunc adipiscing laoreet. Integer a lectus. Nulla ante mi, aliquam id, pellentesque ut, sodales id, erat. Duis pulvinar. Morbi scelerisque elit nec enim. Duis ante. Praesent nisl lectus, rhoncus ac, rutrum a, dapibus ut, lectus.

This is the next paragraph.

Links are shown below - This is an H6 Heading

This is a link to Aging Safely, Inc. to a page that is likely visited. This one is not visited.

CSS style buttons:

The following are buttons done only with an anchor with a css style.
<a href="http://foo.com" class="cssbutton">Button Text ►</a> 
1. If the button is to open in a different window add the triangle symbol to the button text
2. Select the button text, click with the "link" button.
3. Select the target by name or _blank if you want to open in a new window or tab.
4. In advanced enter the stylesheet class as "cssbutton" without quotes.

Button Text ►

rss Button Text

adm Button Text

Above is the default horizontal line

Images and Quotes

Notice that a simple "insert image" with "align left" causes the text to wrap around the image. It does not allow for a caption or for much of a border. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, leo sit amet tempor consectetuer, urna elit tempor tortor, non rhoncus massa elit non elit. In sagittis. Phasellus pretium pharetra dolor. Suspendisse tincidunt facilisis nibh. Integer in dui scelerisque lacus iaculis iaculis.

This is a QuoteLeft style.The other text will wrap around it. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, leo sit amet tempor consectetuer, urna elit tempor tortor, non rhoncus massa elit non elit. In sagittis. Phasellus pretium pharetra dolor. This is a QuoteRight style. with some additional text Suspendisse tincidunt facilisis nibh. Integer in dui scelerisque lacus iaculis iaculis. Phasellus pretium pharetra dolor. Suspendisse tincidunt facilisis nibh. Integer in dui scelerisque lacus iaculis iaculis.

This allows for more of a right and bottom border it was done using "imageleftside <span>". There are also an imagerightside class. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, leo sit amet tempor consectetuer, urna elit tempor tortor, non rhoncus massa elit non elit. In sagittis. Phasellus pretium pharetra dolor. Suspendisse tincidunt facilisis nibh. Integer in dui scelerisque lacus iaculis iaculis. Nunc eleifend, leo sit amet tempor consectetuer, urna elit tempor tortor, non rhoncus massa elit non elit. In sagittis. Phasellus pretium pharetra dolor. Suspendisse tincidunt facilisis nibh. Integer in dui scelerisque lacus iaculis iaculis. Suspendisse tincidunt facilisis nibh. Integer in dui scelerisque lacus iaculis iaculis.

The following style(s) are for tables using DataGrid

Classes DataGrid_Header, DataGrid_Item, DataGrid_AlternatingItem

Common Symbols

€ Euro, ¢ cent, £ English pound, © Copyright, ® Reg Tradmark, ™ Trademark, ¶ paragraph, ¼½¾ fractions

Smilies

Broke in DNN 4.8.0
 

New AFH

Special Tables      

The floating table on the right has an ID of "AFH-PhotoTable" and is formated in the style.css. It is used to Float and format the photos and captions of the AFH photos on each site's home page. It In this case you will notice that the <hr> below may not be below the table as there is no "clear both". The actual placement in the HTML file is to the left of the Special Tables header.

 The following are styles used by DNN

This is the "Head" class used for Module Titles
This is the "SubHead" class used by Announcement blog and others
This is "SubSubHead" class

This skin has a full width ContentPane and below it is split into splitcontentleft and splitcontentright.

The last two work well for the blog module and other modules that look like it.

This is the splitcontentright pane it is the wider of the two bottom panes.  Normally I don't use the bottom panes and nobody sees them. For Blogs and a couple other cases I use the bottom panes and nobody see the top.