Plone User Interface elements test page

This page lists the common user interface elements that exist in Plone, and shows you how they are rendered. It also tests a couple of common Internet Explorer rendering bugs, so you can see if your changes have triggered any bad behaviour on this front.

Typography

Headings

Headline h1

Headline documentFirstHeading

Headline h2

Headline h3

Headline h4

Headline h5
Headline h6

Paragraf line p

Body copies

Paragraph, strong, em, abbr, a links, documentDescription, address

Normal document body text, strong text, emphasised text, abbr. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo. Vestibulum vitae urna et mi volutpat luctus. Nulla auctor, lacus ut consectetuer sagittis, erat odio vulputate sapien, eu placerat diam mauris id turpis. Aenean quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rutrum. Sed mattis turpis sit amet ipsum viverra pharetra. Nunc facilisis, augue non dapibus gravida, risus quam vulputate quam, non venenatis dui massa in leo. Maecenas scelerisque dapibus libero. Suspendisse potenti. example Normal internal site link inside a paragraph, example External link to plone.org, example Secure (HTTPS) link to plone.org, example Mailto link, example FTP link, example NNTP (news) link, example WebCal link, example RSS feed link, example IRC link.

Discreet paragraph

The document description
by admin — last modified May 21, 2010 10:02 AM — History

DocumentByLine is not used anymore on the content Moved to plonebar

Plone Fundation
PO Box 344
Fortville IN 46040, USA
P: (123) 456-7890 plone.mail@example.com

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

Someone famous in Source Title

Lists

Ul, Ol, Dl DL is deprecated in Plone as a builder element

  • Unordered list element 1
    • Unordered list subelement 1
  • Unordered list element 2
  • Unordered list element 3
  1. Ordered list element 1
    1. Ordered list subelement 1
  2. Ordered list element 2
  3. Ordered list element 3
    4. Definition list term
    Definition List description, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo.
    Another Definition List description, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo.


Code

Inline Kbd, Code

Kbd, Code

kbd code 
Example document code inside pre

Block Pre

Pre with code in it

Example document code inside pre


Tables

Plone tables styles

Table

Table Another heading (sortable, click to sort) Fixed column (not sortable)
Odd table item Item 1 Another item
Even table item Item 2 Yet another item
Odd table item Item 3 And one more item

Table .listing

.Listing Another heading (sortable, click to sort) Fixed column (not sortable)
Odd table item Item 1 Another item
Even table item Item 2 Yet another item
Odd table item Item 3 And one more item

Table .vertical

.vertical.listing Odd table item
Another heading Even table item


Forms

Basic

Fieldset legend
(Required)
This is the help for this form field. And links are also possible.
(Required)
This field is just here to demonstrate an error message.
This is the error message.

Example block-level help text here.

Checks and radios

Fieldset legend
(Required)
This is a checkbox field.
(Required)
This checkbox field is just here to demonstrate an error message.
This is the error message.
(Required)
This is a checkbox field.
(Required)
This checkbox field is just here to demonstrate an error message.
This is the error message.
(Required)
This is a checkbox field.



(Required)
This checkbox field is just here to demonstrate an error message.
This is the error message.



Buttons

Fieldset legend

Groups

Replaces Plone4 input+submit group



Alerts

Standard alerts

Non defined You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.
Info You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.
Warning You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.
Error You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.

Deprecated alerts

Alerts in DL not anymore Changed

Warning
The portalMessage 'warning' class, can also contain links - used to give the user temporary status messages.


Listing bar

Plone pages listings

Need to be changed in structure a correct markup Must be changed

Appears on search page

in portlets

Portlet header
  • Item one
  • Item two
Portlet footer
If a portlet has only one item:
Portlet header
There might be a login form here.


Portlet footer

in listings

Table with form elements

 Title   Stuff 
Title with class noborder
Title with class noborder

Collapsible form

Select All/None

Return items of a specific type.




Action menu

Action menu title
Menu content

Collapsible section

Collapsable section title
Collapsible section content

The Internet Explorer "Peekaboo" bug

Also known as the "disappearing text" bug. Full explanation of this bug can be found on the page dedicated to this at positioniseverything.net.

Widgets


 Float 

 test link 
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link