Recent Changes - Search:
Skins /

Skin Test Page

Categories: Skins Design CSS

Test Page Directives form - recipe at Skins:TestPageDirectives

Viewing: pmwiki-responsive. Test a different skin or see additional markup examples below. This is the "quick/compact" skin test page. Test more extensive markup features on the Skin Test Assortment page.

An image in an rframe
Haley

Level 2 Heading Bold Italic Pre Mono Link

Level 3 Heading Bold Italic Pre Mono Link

  1. Numbered (ordered) List Item - There's additional markup below the Test-a-Skin links.
    1. Second level list item (nested ordered list) - Pre and Mono. Test headings.

Level 4 Heading Bold Italic Pre Mono Link

Small text · Normal text · Large text · Link with title (tooltip) · Visited Link · External link
Non-Existent link? · Attach:file.ext Δ · Large mono · Normal mono · Small mono
Strong text · Emphasized text. · Strong Emphasised text · inserted text · deleted text
Superscript and Subscript · Strong link · Emphasised link · Strong Emphasised link

Indented text - There's a large indented paragraph of text among the examples below.
Hanging text - There's a large hanging-indent paragraph of text among the examples below.

This escaped-text line is 80 characters wide so you can see how it appears here. 

## This two-line block is an indented preformatted block.
$PageLogoUrl = "$PubDirUrl/skins/pmwiki/pmwiki-32.gif";

Test PmSyntax coloring: 

(:comment Testing PmSyntax colors:)
[[(Cookbook/)PmSyntax]] test some [[Skins/feature]]s:
* item\\
  new line
(:input checkbox name=name value="{*$Value}" label="$[Accept terms]":)
!!!! Heading [[#anchor]]
Attach:image.jpg"alt text"
|| border=1
||! header || cell ||

Test a Skin

Click on the link below to show this page with the skin, or reset to the PmWiki skin.

(:template each:)  

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Paragraphs

For best results, WikiAuthors should avoid putting Level 1 (<h1>) Headings in wiki pages. Instead use Levels 2 (!! markup) through 6 (!!!!!! markup) without skipping levels. L2 to L6 without skipping levels improves a page's structure and increases accessibility and discoverability of the page's content because headings establish a page outline. This editorial note is normal paragraph text. --Hagan

Indented text - A page's outline is meaningful when the page is parsed by machines (e.g. screen readers and search-engine spiders). See this page's outline here. Conventionally <h1> headings are used only once per page as the page's main heading. Some skins—including the default PmWiki Skin—tag the page's title with an <h1> tag to improve content accessibility and discoverability.
Hanging text - The W3C explains it this way: "When looking at the content, the highest available heading level should be used to mark up the heading of the main content, as this makes it easy to discover. Ideally use an <h1> or <h2>." You can also improve accessibility and discoverability by adding page (:description:) text, adding alt-text to images, and adding link titles to links in your pages.
A left-floated image

Normal paragraph text next to a right-floated image using %rfloat% WikiStyle markup - PmWiki doesn't make any attempt to do everything that can be done in HTML. There are good reasons that people don't use web browsers to edit HTML--it's just not very effective. If you need to be writing lots of funky HTML in a web page, then PmWiki is not what you should be using to create it. What PmWiki does try to do is make it easy to link PmWiki to other "non-wiki" web documents, to embed PmWiki pages inside of complex web pages, and to allow other web documents to easily link to PmWiki.

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Miscellaneous Markup

Wide text: [@preformatted@], ->[@intented preformatted@], and leading-space preformatted This escaped-text line is 80 characters wide so you can see how it appears here.

This indented line is 80 characters wide for testing how a line that wide looks. 
 This line is also 80 characters wide.. also for testing how a wide line appears.

Some Unicode UTF-8 Symbols: ☕ ☾ ☀ ☀ ☽

This is a line of plain text with a border around it.
This is a line of preformatted text with a border around it.
This is a line of monospaced text with a border around it.

A searchbox:

In HTML 4.01, the <hr> tag is a "horizontal rule". In HTML5, the <hr> tag defines a thematic break. (Reference)

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Level 1 Heading · Bold · Italic · Pre · Mono · Link

Some text.

Level 2 Heading · Bold · Italic · Pre · Mono · Link

Some text.

Level 3 Heading · Bold · Italic · Pre · Mono · Link

Some text.

Level 4 Heading · Bold · Italic · Pre · Mono · Link

Some text.

Level 5 Heading · Bold · Italic · Pre · Mono · Link

Some text.

Level 6 Heading · Bold · Italic · Pre · Mono · Link

Some more text.

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Lists

Unordered list

  • Unordered List Item
    • Nested Unordered List Item
      • Nested even more
      • And another one
        • Fourth level
    • Second level
  • Item
  • Item

Ordered list

  1. Ordered List Item
    1. Nested Ordered List Item
      1. Nested even more
      2. And another one
        1. Fourth level
    2. Second level
  2. Item
  3. Item

Definitions / Descriptions

definition list
An HTML 4.01 list of terms, with a definition of each term.
description list
An HTML5 list of terms, with a description of each term.
PmWiki
A wiki-based system for collaborative creation and maintenance of websites.

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Tables

Simple Table - PmWiki.Tables

Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
A 1A 2A 3A 4A 5A 6A 7A 8
B 1B 2B 3B 4B 5B 6B 7B 8
C 1C 2C 3C 4C 5C 6C 7C 8

Simple Table - with the "simpletable" class

Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
A 1A 2A 3A 4A 5A 6A 7A 8
B 1B 2B 3B 4B 5B 6B 7B 8
C 1C 2C 3C 4C 5C 6C 7C 8

Advanced Table - PmWiki.TableDirectives

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
A 1 A 2 A 3 A 4 A 5 A 6 A 7 A 8
B 1 B 2 B 3 B 4 B 5 B 6 B 7 B 8
C 1 C 2 C 3 C 4 C 5 C 6 C 7 C 8

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Forms - PmWiki.Forms

Select:

Radio:

   

Checkbox:

     

Text:

Textarea:

Password:

Email:

File:

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Floats and Frames

Floats and frames are predefined wikistyle shortcuts.

Text Floats and Frames

Jump to Image Floats

Some text before an rframe... 

This is a PmWiki rframe div
with two lines of preformatted text.

...and some more text after it.

Some text before an lfloat... 

This is a PmWiki lfloat div
with two lines of preformatted text.

...and some more text after it.

Some text before a cframe... 

This is a PmWiki cframe div
with two lines of preformatted text.

...and some more text after it.

Large-image Float & Frame

Two 600px-wide images in an rframe and lfloat...

Farmer's Market Veggies
Farmer's Market Veggies

This is some text with an EighteenLetterWord that's in an area that ideally won't become too narrow to display properly.

Sunnyslope African Daisies
African Daisies

This is some text with an EighteenLetterWord that's in an area that ideally won't become too narrow to display properly.

Paragraphs · Misc. · Headings · Lists · Tables · Forms · Floats · Specific · Sandbox · Top

Skin-Specific

Skin-specific markup goes here. (This section will be empty for most skins.)

Use conditional markup like this:

This sandbox section won't appear when the page is (:include:)d.

Sandbox

Experiment below. Sandbox content may be deleted from time to time. Experiment here.