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. %%size-30.pull-right.bg-red )
  • %%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:
%%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#

  • %%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.

viewer#

slimbox#