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.
  • %%lead -- Larger lead text
  • %%small -- Smaller than the normal font, like this small text and now normal again.
  • %%sub -- Subscript, like aij = aji (look ma', no impact on the line-height)
  • %%sup -- Superscript, like 23 = 8
  • %%strike -- Strikethrough text is hardly readable
  • %%ltr -- left-to-right text formatting
  • %%rtl -- right-to-left text formatting
  • %%quote -- Quoted text
  • %%text-left -- left aligned text
  • %%text-right -- right aligned text
  • %%text-center, %%center -- centered text
  • %%text-justify, %%justify -- justified text
  • %%text-<context> -- show text in various super colors
  • %%text-lowercase -- Lowercase text
  • %%text-uppercase -- Uppercase text
  • %%text-capitalize -- Capitalized text
  • %%text-smallcaps -- Small-caps text
  • %%badge -- highlight numbers like this 24
  • %%icon-<icon-type> -- insert icons in your page like and more.
  • %%under-construction -- under-construction banner
  • %%hidden -- hide some page content

Various effects#

  • %%border -- add a border (use in combination with other styles, like %%columns.border )
  • %%hover -- add a hover effect (use in combination with other styles, like %%columns.hover )
  • %%raised -- add a raised effect (shadow)
  • %%size-20, ... %%size-90 -- set width of a block of text on 20%, 30%, .. up to 90%.
  • %%indent-1, %%indent-2, %%indent-3 -- left-indent with same space as a list-item
  • %%h1, %%h2, %%h3 -- use the style of the titles, without showing them in the table of contents
  • %%pull-right -- align a block of text to the right margin; combine with a %%size-nn style to set specific width. (eg. )
  • %%scrollable -- puts a maximum height to the pre-formatted blocks; excessive content is scrollable.
  • %%scrollable-image -- shows images in their original size. ( by default, images are resized to fit the screen size ) You can scroll the image if needed.
  • you can style a wiki-link to look like a button: [Press here|Haddock Styles|class='btn btn-primary'] becomes Press here

Contextual styles#

  • %%text-<context> -- show text in various super colors
  • %%label-<context> -- default primary info success warning danger
  • Inline contextual boxes like this: This is just some sample. Don’t even bother reading it; you will just waste your time.
  • Contextual sections:





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


  • %%list-unstyled -- remove the default list-style and left margin on list items (immediate children only).
  • %%list-nostyle -- remove the default list-style but keep the left margin on list items (immediate children only).
  • %%list-hover -- list with hover effect on the list-items
  • %%list-group -- a list items a shown with borders

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.

  • %%add-css -- Inject css styles into a page. See Add CSS Style
  • %%category -- Display a list of pages referencing the category page. See Category Style
  • %%collapse -- Turn ordinary lists into Collapsible List.
  • %%collapsebox -- Create a Collapsible Box which slides in/out vertically.
  • %%columns -- Format text in Multi Columns Style news-paper format.
  • %%commentbox -- Add a floating Comment Box at the right margin
  • %%dropcaps -- Using a large letter to mark the start of a paragraph
  • %%flip and %%flop -- Add front/back flip animation. See Flip Style
  • %%graphbar -- Add horizontal or vertical GraphBars to your wikipages. Now with additional colors and styles, including animated bar stripes.
  • %%prettify -- Add code-coloring to a preformatted block of text. See Prettify Sourcecode
  • %%reflection -- Generates a reflection at the bottom of the image. See Reflection Style
  • %%reveal, %%invisibles -- reveal hidden characters such as tabs and line breaks in preformatted blocks
  • %%tip -- Generates a semi-transparent Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula.
    popup. See Tip Style

Table styles:#

  • %%table-sort, %%sortable -- Turn ordinary wiki tables into Sortable Tables.
  • %%table-filter -- Turn ordinary wiki tables into Filtered Tables
  • %%table-condensed -- to make tables more compact by cutting cell padding in half
  • %%table-fit -- fit horizontal space to the content of the table cells
  • %%table-bordered -- add borders on all sides of the table and cells
  • %%table-striped, %%zebra-table -- add zebra-striping to any table row within the body. See also Zebra Table Style
  • %%table-hover -- to enable a hover state on table rows within the body

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

Tabbed Sections:#

  • %%tab, %%tabbedSection -- Create pages with tabular sections.
  • %%pills -- Similar to %%tabs but with different look & feel. See Tabbed Sections
  • %%accordion -- Generates a vertical Accordion, with smooth transition effects. The section titles are shown at the top.
  • %%tabbedAccordion, %%pillsAccordion -- Generates a tabbed section, with smooth Accordion transition effects. The section titles are shown at the top.
  • %%leftAccordion, %%rightAccordion -- Generates a Accordion, with pills at the left or right hand side.

Media Viewers:#

  • %%viewer-- Embed a Viewer into your page for displaying images, video, other wiki-pages or external sites.
  • %%maps <address> /% -- Show the address on Google Maps
  • %%slimbox, %%lightbox -- Add popup Slimbox viewer for displaying images, video, other wiki-pages and external sites.
  • %%carousel-- Add a Carousel viewer, automatically cycling through of a set of images, video's, wiki-pages or external sites.