CleanBlue

The "CleanBlue" WikiSkin 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 Fonts. 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. See the attachments of this page for a zip file containing the CleanBlue fonts (if you want to use them locally), as well as the original SVG file of the JSPWiki logo used by the skin.

The current version of the skin is .

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

Screenshots#

CleanBlue/JSPWiki_CleanBlue.png

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):

"extrabold" style (font-weight 700):

"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"#

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


See WikiSkin