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#






Background colors#

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




















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


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


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