Test styles[ Currently in: Sunshine ]

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  |  

'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.

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:

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

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]'

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

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

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

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

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

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!!

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

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

The discussion looks like this:

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 <b>: default, monospace, serif, sans-serif
and again with <small>: 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 "<font size='-2"> (and probably not "<font size='small">") as these are absolute sizes wrt the browser-default (and zoom), but are not affected by CSS. (The '<small>' 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.