Test styles[ Currently in: Fluffy 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:
'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'.
These are the styles of Male, Female, Either and "seeks": '.M', '.F', '.E' '.s'
Here are warning and notice messages: '.warning' .'success' '.highlight' '.romance'
Readmessage navigation colors - back, forward, greyed out:
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.
This is 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:
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'):
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:
The magnetic photo gallery looks like this: ('yes / no / undecided')
The discussion looks like this:
This is some default text in various faces:
default, monospace, serif, sans_serif
Now, to compare standard text with form text:
Now check physical sizes (under Linux, get display info from xdpyinfo | grep 'resolution\|dimensions'):
Test Viewport size. The following should be exactly 96 CSS-pixels (i.e. 1 inch) in size.