Haddock Styles
The predefined CSS styles are stored in the file haddock.css and may vary from site to site.

See JSPWikiStyles for the default styles of JSPWiki; or Haddock Styles for the Haddock Template with many styles inherited from BOOTSTRAP.

Next to the basic styles of the wiki markup, you can use Use the %%style../% markup.
These are actually css classes defined in jspwiki.css
:

%%strike Some text here /% becomes Some text here.

You can use the . operator to combine multiple styles:

%%btn.btn-info.btn-xs Button /% becomes Button

You can also insert almost any CSS style in a wiki page, like so:

%%(letter-spacing:3px;) Hi there! /% becomes Hi there!

And even add or I.e. overwriting predefined styles such as .header , .footer, etc. styles with the %%add-css style.

%%add-css .mark {background:yellow;}/% %%mark Yellow!/% becomes .mark {background:yellow;} Yellow!
To apply certain style to the whole page, you can use This is actually a wiki page variable page-styles .
[{SET page-styles="prettify table-condensed-fit"}]

See these styles in action on the Haddock Styles Test page.


Static styles#

The Haddock Template ships with many static styles, many of which are inherited from BOOTSTRAP.

Various effects#

Contextual styles#

%%default

%%information

%%success

%%warning

%%error

Background colors#

Many solid background colors are available in the Haddock Template. They all start with the prefix bg- :

%%bg-primary

%%bg-info

%%bg-success

%%bg-warning

%%bg-danger
%%bg-white

%%bg-silver

%%bg-gray

%%bg-black
%%bg-aqua

%%bg-blue

%%bg-navy

%%bg-teal

%%bg-green

%%bg-olive

%%bg-lime
%%bg-yellow

%%bg-orange

%%bg-red

%%bg-fuchsia

%%bg-purple

%%bg-maroon

See what else you can do with Background Styles. (eg background images, background gradients, etc.)

Images#

Image Styles allow you to add special effects, transformations, animation, frames, captions etc. to photographs and images.

  • %%light
  • %%dark
  • %%invert
  • %%grayscale
  • %%blur
  • %%caption
  • %%caption-arrow
  • %%caption-overlay

  • %%rounded
  • %%circle
  • %%raised (3d effect)
  • %%fliph
  • %%flipv
  • %%fliphv
  • %%magnify
  • %%kenburns (animated)

  • %%blend, %%blend2
  • %%sepia
  • %%brightness
  • %%saturate-2, %%saturate-8
  • %%contrast-2, %%contrast-10
  • %%hue-rotate-1, %%hue-rotate-2, %%hue-rotate-3

Lists#

Dynamic styles#

Dynamic styles are styles powered by a combination of JavaScript and CSS. They add dynamic behaviour or animation to parts of your wiki pages.

Dynamic styles are built on the idea of progressive enhancement: if javascript is turned off, the wiki page is still accessible and readable.

Table styles:#

You can combine these styles e.g. %%table-condensed-bordered or %%table-condensed.table-bordered

Tabbed Sections:#

Media Viewers:#

viewer#

slimbox#