The "CleanBlue" skin includes its own CSS stylesheet, which includes some custom styles (see CSS Classes below for usage instructions).

The primary font is a sans-serif named "Titillium Web", obtained via Google FontsContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png. The font-weight of normal text is 400. Bold is set to a 600 weight. If this skin is used widely on a public wiki it includes more font downloads than might be desired (see bottom of this page). This could easily be reduced for a lighter load/shorter delay.

The current version of the skin is .

  • Normal Link to Documentation (unless you have clicked on it already)
  • Link to Main (visited link)
  • Link to Nowhere
  • Link OffsiteContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png

Click on a link (but don't mouse-up) to show the 'active' link colour.

CSS Classes#

Some skins (such as this one) have CSS definitions for some custom class-based styles (using the "%%stylename ... %%" notation). For example, to create a blockquote style, use:

  %%blockquote
  Your quoted text...
  %%

"blockquote"#

This provides a way to differentiate a longer quote:

There is no lonelier man in death, except the suicide, than that man who has lived many years with a good wife and then outlived her.

If two people love each other there can be no happy end to it. — Hemingway

This uses a percentage-based left and right margin, and a max-width.

Bold and "extrabold"#

Normal bold (font-weight 600):

  • When people talk, listen completely. Most people never listen. — Hemingway

"extrabold" style (font-weight 700):

  • When people talk, listen completely. Most people never listen. — Hemingway

"light"#

This uses a font weight of 300:

The first panacea for a mismanaged nation is inflation of the currency; the second is war. Both bring a temporary prosperity; both bring a permanent ruin. But both are the refuge of political and economic opportunists. — Hemingway

"figure"#

Content unavailable! (broken link)Nerd Venn Diagram
Figure 1. The Nerd Venn Diagram

To be used around an image link, providing a border. Any text after the image is used as the image title. E.g., %%figure [{Image src='nerd-venn-diagram.jpg' alt='Nerd Venn Diagram'}] Figure 1. The Nerd Venn Diagram %%

"serif"#

This style relies on a Google Font import of "Goudy Bookletter 1911" that is normally commented out in the stylesheet. If this font is unavailable the MS font Cambria, Times New Roman or Times is used.

Always do sober what you said you'd do drunk. That will teach you to keep your mouth shut. — Hemingway

"indent"#

Just indents the text a bit without using a bullet list.

Never think that war, no matter how necessary, nor how justified, is not a crime. — Hemingway

Info/Warning/Error#

Use of the 'information', 'warning' or 'error' CSS shortcuts provides the following outputs:

Note
This is an informational message.
Warning
This is a warning message.
Error
This is an error message.

Fonts#

This wiki uses a CSS import for its fonts: Titillium Web (sans-serif) and Source Code Pro (monospace):

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300,400,400italic,600,600italic,700|Source+Code+Pro:400,600);

A minimalised version that eliminated some of the unnecessary weights and the Source Code Pro monospace font could be:

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600,600italic);

Color Gamut#

Below are the colors used in the CleanBlue skin (as of version 1.0.10). This includes the .information, .warning and .error styles (shown above).

#001C37 #8DC5F2 #DEF9EE
#0C4777 #94A2AE #E0E0FF
#1D6263 #958DFF #E0FFE0
#244739 #9ED39E #E8FCE5
#37414A #9EB1C3 #E9EDF0
#3D5A73 #A2C3DF #E9F3F5
#4A5C6A #AFDFC8 #F1F4F7
#4F3B70 #B49CDC #F2CBE1
#548FC6 #B6509D #FF2A4D
#556B1C #C5C0FF #FF7700
#6D9D8A #CCDEED #FF8080
#74105B #D0F6ED #FF9933
#77B9F7 #D3E2FF #FFC0C0
#7EA121 #D4D0FF #FFDF80
#8598A8 #D7F2B3 #FFDFC0