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:

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

Images#

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

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.