Pattern Skin Elements

Some intro text.

Text.

Heading 1

text

Heading 2

text

Heading 3

text

Heading 4

text

Heading 5

text

Heading 6

text

A very very very very very very very very very very very very very very very very very very very very very very very very long header

Regular text lorem ipsum dolor sit amet, test link adipiscing elit. Bold text nullam dignissim convallis est. Italic text quisque aliquam. Donec faucibus. Bold italic nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

paragraphs:

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

List Types

Definition List

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!
Safe for kids
You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

TML markup unordered list

  • level 1
    • level 2
      • level 3
  • level 1

TML markup ordered list

  1. level 1
    1. level 2
      1. level 3
  2. level 1
  3. level 1
  4. level 1
  5. level 1
  6. level 1
  7. level 1
  8. level 1
  9. level 1
  10. level 1
  11. level 1
  12. level 1
  13. level 1
  14. level 1

TML markup numbered lists

  1. item 1
  2. item 2
  3. item 3

  1. item 1
  2. item 2
  3. item 3

  1. item 1
  2. item 2
  3. item 3

TML markup definition list

Sushi
Japan
Dim Sum
S.F.

TML mixed lists

  1. level 1
    • level 2
      • level 3
  2. level 1
    1. level 2
      1. level 3

H1 header with link

Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

H2 header with link

Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

H2 header with link

Empty line before Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

H3 header with link

Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

H4 header with link

Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

H5 header with link
Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

H6 header with link
Intro text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

link

h1 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

h2 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

h3 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

h4 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

h5 header in a block
Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

h6 header in a block
Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

Text sizes

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Small text. Small text. Small text. Small text. Small text. Small text. Small text. Small text. Small text.

Text colors

Grayed out text.

Alert text.

Blockquote

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

Rules




text

header

text
text

Table

Numbers Texts
456 uvw
123 xyz
789 rst

and text below the table

NumbersSorted ascending Texts
123 xyz
456 uvw
789 rst
def rst
kqo rst

Code texts

Inline code

lasdkj asldjas ldja sld adasdsadasdas aldjasldksaldkjas adslinkaidas.

verbatim

verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 
<a href='#'>link</a>

pre

verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 
link

Lists

Bullet list:
  • Item A
  • Item B a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text
    • Item B.1
    • Item B.2
  • Item C

Numbered list:
  1. Item 1
  2. Item 2 a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text
    1. Item 2.1
    2. Item 2.2
  3. Item 3

Comment

 

Links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. System.WebHome Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum DoesNotExist Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Header

h2 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
Available help:
  • Help: Please see System.FileAttachment for more information about attaching files.
  • Bug: Internet Explorer 4.0 or earlier: If you get an "Internal Server Error" message when you upload a file, you need to try again. It should work the second time.

h2 header

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 

Header

h2 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
Available help:
  • Help: Please see System.FileAttachment for more information about attaching files.
  • Bug: Internet Explorer 4.0 or earlier: If you get an "Internal Server Error" message when you upload a file, you need to try again. It should work the second time.

h2 header

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 

Header

h2 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
Available help:
  • Help: Please see System.FileAttachment for more information about attaching files.
  • Bug: Internet Explorer 4.0 or earlier: If you get an "Internal Server Error" message when you upload a file, you need to try again. It should work the second time.

h2 header

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 

Header

h2 header in a block

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
Available help:
  • Help: Please see System.FileAttachment for more information about attaching files.
  • Bug: Internet Explorer 4.0 or earlier: If you get an "Internal Server Error" message when you upload a file, you need to try again. It should work the second time.

h2 header

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 

Buttons

Test same height

link

input type="submit"

disabled: or

or disabled: or

or disabled:

disabled:

disabled:

disabled:

links

foswikiButton disabled: foswikiButtonDisabled or foswikiButton foswikiButtonDisabled

foswikiSubmit or foswikiButton foswikiSubmit disabled: foswikiSubmitDisabled or foswikiSubmit foswikiButtonDisabled

foswikiButtonCancel or foswikiButton foswikiButtonCancel disabled: foswikiButtonCancel foswikiButtonDisabled

foswikiButtonSmall or foswikiButton foswikiButtonSmall disabled: foswikiButtonSmall foswikiButtonDisabled

foswikiButtonMini or foswikiButton foswikiButtonMini disabled: foswikiButtonMini foswikiButtonDisabled

foswikiButtonLarge or foswikiButton foswikiButtonLarge disabled: foswikiButtonLarge foswikiButtonDisabled

buttons

disabled: or

or disabled: or

or disabled:

or disabled:

or disabled:

or disabled:

Input fields

.foswikiInputField

Readonly

Disabled

JQuery buttons

Using %BUTTON{}%

  • Example:
    %BUTTON{
        "%MAKETEXT{"Submit"}%"
        click="confirm('Are your sure?')"
      }%
      %BUTTON{
        "%MAKETEXT{"Cancel"}%"
        icon="cross"
        target="%WEB%.%TOPIC%"
      }% %CLEAR%
  • Expands as:

%BUTTON{class="simple"}%
Simple button Simple button

%BUTTON{class="cyan"}%
Cyan button

%BUTTON{class="red"}%
Red button

%BUTTON{class="green"}%
Green button

OK Cancel Info Add Delete Globe

Re-created jQuery buttons

.jqButton

OK

.foswikiButton

OK

Nat Edit buttons

Form steps

.foswikiFormSteps and .foswikiFormStep

What to expect

Some explanation

Help text

Help text

.foswikiHelp

Help: Please see System.FileAttachment for more information about attaching files.

Available help:
  • Help: Please see System.FileAttachment for more information about attaching files.
  • Bug: Internet Explorer 4.0 or earlier: If you get an "Internal Server Error" message when you upload a file, you need to try again. It should work the second time.

Help

Please see System.FileAttachment for more information about attaching files.

Images

img

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

foswikiImage

.foswikiImage

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

Icons

img and .foswikiIcon

Normal text. Normal text. Normal text. Normal text. Text with smile smilies and info icons. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

Foswiki styles

Broadcast Message

.foswikiBroadcastMessage

NOTE: Edit and Attach will be disabled today between 05:00 PM and 06:00 PM PDT (00:00 to 01:00 GMT) for a scheduled Foswiki maintenance.

Notification

.foswikiNotification

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. N

text before
Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
text after

.foswikiMessage

Text before This is important text after.

Horizontal list

.foswikiHorizontalList

  1. ordered item 1
  2. ordered item 2
  3. ordered item 3

  • unordered item 1
  • unordered item 2
  • unordered item 3

  • unordered item 1
  • unordered item 2
  • unordered item 3

Tabs

Foswiki tabs

Tab 1

Regular text lorem ipsum dolor sit amet, test link adipiscing elit. Bold text nullam dignissim convallis est. Italic text quisque aliquam. Donec faucibus. Bold italic nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Tab 2

Regular text lorem ipsum dolor sit amet, test link adipiscing elit. Bold text nullam dignissim convallis est. Italic text quisque aliquam. Donec faucibus. Bold italic nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Tab 3

Regular text lorem ipsum dolor sit amet, test link adipiscing elit. Bold text nullam dignissim convallis est. Italic text quisque aliquam. Donec faucibus. Bold italic nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Foswiki tabs without tab pane

What to expect

Some explanation


jQuery tabs

Tab 1

This is in the first tab.

Help

This is in the second tab.

Simple

Tab 1

This is in the first tab.

Help

This is in the second tab.

Links

Grid

Level 2
Level 2
Level 2
Level 2
Level 2
Level 2
Level 2
Level 2

Tab 1

This is in the first tab.

Help

This is in the second tab.

Data form

Main.UserForm
Title
FirstName Arthur
LastName Clemens
OrganisationName
OrganisationURL
Profession
Country Netherlands
State
Address
Location
Telephone
VoIP
InstantMessaging (IM)
HomePage
Comment

Search results and search form

Web Search

Searched: caching

Results from Foswiki web retrieved at 00:46 (GMT)

Headlines Plugin Description This plugin displays RSS and ATOM feeds from news sites. Use it to build news portals that show headline news. Note: Syndic8.com ...
TWikiAjaxContrib TWikiAjaxContrib provides a convenience wrapper class around Yahoo's Connection Manager (AJAX). Goals are: To make it possible for plugins ...
!TWikiAjaxContrib Examples Code examples and demos for TWikiAjaxContrib. Default loading indicator Because Foswiki files are served along dynamic urls we cannot use ...
Number of topics: 3

  Advanced search | Help
TIP: to search for all topics that contain "SOAP", "WSDL", a literal "web service", but not "shampoo", write: soap wsdl "web service" -shampoo
Search where:       
(otherwise search System Web only)

Upload Form

Attach new file

Upload up to 10000 KB.

Comment

Describe the file so other people know what it is.

Properties

Images will be displayed, for other attachments a link will be created. Attachments will not be shown in topic view page.

Comment form/table

(rendered html)

Comment

 

Links

WebHome DoesNotExist

This topic: System > Skins > PatternSkin > PatternSkinElements
Topic revision: 27 Oct 2012, ProjectContributor
 
This site is powered by FoswikiCopyright © CC-BY-SA by the contributing authors. All material on this collaboration platform is copyrighted under CC-BY-SA by the contributing authors unless otherwise noted.
Ideas, requests, problems regarding Foswiki? Send feedback