Test styles[ Currently in: Mobile Device Mode ]

This page exists to test new stylesheets in a convenient way. It contains (hopefully!) all the named elements.

These are the available styles.

Sunshine | Fluffy Mode | Claret | Stealth Mode | Jazzy Style | Chocolate Flavour | Rose pink | Aqua | Pop Style | Unix Terminal | A Random style | Secret (obscure) | Mobile Device Mode |

These are the headings h1...h6:

.h1

.h2

.h3

.h4

.h5

.h6

'body', '.leftbar', '.topbar', '.hr', 'hr.menuhr', 'menusection' are all already visible on all this page.

'.body' is the main style for the text, containing the font and default colours. It also contains horizontal rules: '.hr'.
'.topbar' is the header bar on the top of the page.
'.leftbar' is the menu bar on the left. It contains horizontal rules: 'hr.menuhr', and subdivisions: 'menusection'.

These are the styles of Male, Female, Either and "seeks": '.M', '.F', '.E' '.s'

These are the styles of links. They change when hovered over and clicked: normal links, '.link-history-on' (different colour if visited), '.leftbar' (as used in the menu), and external links (to different websites);

Here are warning and notice messages: '.warning' .'success' '.highlight' '.romance'

Readmessage navigation colors - back, forward, greyed out: <= '.readmessage-prev' '.readmessage-next' => '.readmessage-na'

Quoted text in messages: '.quoted'

Explanatory text: '.explanation.'. Also small and 'small.explanation.'

Erroneous text highlighted in the spell-checker: '.misspelled'. Misnested tags look like '<bad><nest></bad></nest>'.

Messages that people really ought to read: '.reallyreadme'

Help links (for popups) look like this. Hover over THIS to see a tooltip.

Icons (normal): (stealth/mobile/unix): [F] . [R] “ ” [M] [M+] [@] [c] [?]

Here is an hr:

Here is what an (otherwise unstyled except for an embedded table) FORM looks like: (fieldset, legend, input, select, textarea):

Here is what a table of class 'bigform' looks like (as used for the profile page settings), note there are no padding or borders:

This is a header ('table.bigform th')
This is a table cell ('table.bigform td')	Explanatory text ('table.bigform td.explanation')
Footer

Here is what a profile or message looks like (table class: '.admsg-css'):

This is the text, as typed in by the user.

Here is the correspondence. The table is of class '.admsg-css' (as above) which defines the border and background. The individual colours are defined as '.corresp-[sent,received][-heading]'

Sent on date: '.corresp-sent-heading'

The text of the message '.corresp-sent'

Received on date: '.corresp-received-heading'

The text of the message '.corresp-received'

Here is what an notice from the server looks like: (table class: '.notice'):

This is a message from the server.

Here is what the htmlhelp (technical information) tables look like: (table class: '.htmlhelp'):

What you write	Looks like
<b>bold</b>	bold

Here is what a simple table looks like: (table class: '.simple'):

Header1	Heading 2
Item 1	Item 2

Here is what the Xattr table looks like: (table class: '.xattr'):

Header1	Item1
Header2	Item 2

Here is what a boldquote table (i.e. quoted text) looks like: (table class: '.boldquote'):

Here is some text which we are referring to.
This is used to strongly emphasise a message.

Here is what the HTML editing widgets look like: ('.htmlwidget' and '.messageform .htmlwidget'):

(profile)

(message)

These are how the message of the day elements appear. It is NOT intended that they are all used together!!

The default color: '.motd'

Highlight 1 - for making something more obvious. '.motd-highlight1'

Highlight 2 - alternative to hightlight 1. '.motd-highlight2'

Highlight 3 '.motd-highlight3'

Highlight 4 -Important. '.motd-highlight4'

Highlight 5 '.motd-highlight5'

Highlight 6 - Urgent. '.motd-highlight6'

Auto-check actually uses the body of an embedded iframe. Here are the 3 possible colours reproduced using a table:

No messages are waiting '.autocheck-nomsgs'

You have 3 new messages '.autocheck-newmsgs'

You have been logged out '.autocheck-loggedout'

The magnetic photo gallery looks like this: ('yes / no / undecided')
Buttons: [] yes, [] no. Image borders:

The discussion looks like this:

Topic: this is class '.topbar'

Date: (date)

The text goes here

Reply posted by (username): this is class '.discuss-comment'

The text goes here

This is some default text in various faces: default, monospace, serif, sans_serif
and again with : default, monospace, serif, sans-serif
and again with : default, monospace, serif, sans-serif
and again with <big>: default, monospace, serif, sans-serif
and again for some specific font-faces (if present): Tahoma, Verdana, Times New Roman, Times, Arial, Terminus, Courier New
and again for some specific font-sizes (all sans-serif): default, 1em, 100%, 80%, 100%, 120%, 150%, 8px, 10px, 12px, 15px, 18px, 8pt, 10pt, 12pt, 15pt, 18pt

Now, to compare standard text with form text:

Explanation:

Browsers have default (and minimum) font sizes for the proportional and monospace fonts (these specify the font-height (rather than width), and the defaults aren't usually equal).

Font sizes are usually given as relative to the default base size, unless we force something like< body.text=10pt>. (This is usually bad form, but probably necessary, as we have no means of accepting the browser default for 'serif' while forcing our monospace to the same size)

Browser defaults are proportional text-inputs, monospace textarea. (We override, to force both to monospace, which makes forms look more consistent.).

Browser defaults are to make text-inputs (but not textareas) larger than normal, unless we override.

Firefox can also do full-page zoom, and saves the value from one visit to another.

Never use " (and probably not "") as these are absolute sizes wrt the browser-default (and zoom), but are not affected by CSS. (The '' tag is fine though).

Now check physical sizes (under Linux, get display info from xdpyinfo | grep 'resolution\|dimensions'):
All of the following have a 1px blue border, and are the families Mo(nospace), Sa(ns), Se(rif). The red fonts are 72pt (absolute), so should be 1" high if the display is calibrated correctly (regardless of stylesheet), provided that the browser zoom-level is 0. The green fonts are 720% (relative), so should be the same size, if the body default font is still 10pt.

Mo Sa Se Mo Sa Se

Note that 72pt == 1 inch by definition; the point size of a given font is measured from the tip of the highest ascender to the tail of the lowest descender. The cyan letters are 72pt and should be clearly measurable with a ruler as 1 inch high...
qyfQ!M qyfQ!M qyfQ!M

Test Viewport size. The following should be exactly 96 CSS-pixels (i.e. 1 inch) in size.

Viewport-test: 96px (1 inch?) yellow square

Input (type=text):	Input (type=password):	Input (type=radio): 1 2
Input (type=checkbox):	Select:	Input (type=file):
Input (HTML5: text with placeholder, required):	Input (HTML5: text with value, autofocus):	Input (HTML5: type=email):
Input (HTML5: type=search):	Input (HTML5: type=url):	Input (HTML5: type=number, min=5,max=15):
Note that date/time/color are not widely supported yet Input (HTML5: type=date):	Input (HTML5: type=time):	Input (HTML5: type=color):
Input (textarea): Some initial text goes here	Input (type=submit):	Input (type=image):

1234567890 1234567890 1234567890 1234567890 1234567890 1234567890	(65 chars, regular <p> text)
	(65 chars, <input type=text (size=70)>)
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890	(65 chars, in a <textarea (rows=2 cols=70)>)