Site home
AccessibilityAbout / FAQ
Member's loungeContact/FeedbackOther REBOL links
Membership:
member name

password

Remember?

Not a member? Please join
19-Apr 19:08 UTC
[0.027] 10.533k
RSS
REBOL.org
  • Home
  • Script library
  • AltME Archive
  • Mailing list
  • Articles Index
  • Site search
 

CSS preview -- shows most major styles

Site section: main

See as: [script library] [mailing list archive] [altme groups archive]

Alert

class="alert"
This is an alert

You normally only see an alert if:
a) you are not logged on, and attempt a URL that requires you to be so; or
b) there is a general status message active (normally only on the home page)

Menu styles

class="main-menu"
Other menu divs are nested in this one
class="menu-p1" -- used for top and bottom of most menus
class="menu-p2" -- used for 2nd color in menus
class="menu-p3" -- used for 3rd color in menus
class="menu-item-off" -- used for grayed-out (unavailable) menu options

Help pages styles

class="toc" -- Table of Contents used in many of the Help pages
class="tl2" -- used for h2 headings in the toc
class="tl3" -- used for h3 headings in the toc
class="tl4" -- used for h4 headings in the toc

The Table of contents, by default, is floated to the right.
The heading entries in the TOC are usually also on-page links. That is not shown in the example here.
There is no tl1 for h1 headings in the Table of Contents, because there aren't any.
For an example of a Help page table of contents, see this page.

Table settings

class="lsh" -- Library style header. Mainly used for table headings
class="lskey1" -- key field in stripey-shade 1 class="lsdata1" -- data field in stripey-shade 1 class="lsdata1 ca" -- data field center-aligned class="lsdata1 ra" -- data field right-aligned
class="lskey2" -- key field in stripey-shade 2 class="lsdata2" -- data field in stripey-shade 2 class="lsdata2 ca" -- data field center-aligned class="lsdata2 ra" -- data field right-aligned
etc etc etc etc
etc etc etc etc

Links styles

This is a basic link -- a bit on the small size
link with class="fsl" -- full-sized link
link with class="fel" -- emphasised link
link with class="fsl fel" -- both of the above

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

(we don't use h5 or h6) This is a plain <p> paragraph...If you are looking at the standard Library CSS, you should see some left and right padding, plus some leading (line-heigth) to help space out the text a little.

Other styles

Class="new" -- we use this to draw attention to new things.
Class="warning" -- We use this to highlight problems (usually error messages) in forms
Class="notice" -- we use this to highlight actions taken, usually as a result of processing a form
<pre> -- standard pre tag, used for viewing scripts and displaying Mailing List messages</pre>

class="section-bar" -- Section heading -- eg "REBOL.org Mailing List Archive"

class="reb-over" -- "It's a messaging" language. Banner/overview message

class="breadcrumbs-trail" -- If you are logged on, and have breadcrumbs enabled, this is their style

These words are randomly colored. They'll be different colors each time you refresh the page.

  • This
  • is
  • a
  • list
    • This
    • is a
    • nested list

Styles for footnootes

Notes
  • The Footnote section appears only if we have some status information to display
  • It is contained in a <div class="footnote">
  • The "Notes" heading line is <div class="lsh ca">
  • Individual notes cycle between <div class="lsdata1"> and <div class="lsdata2">
  • to see a real footnote, click find-packages