[{TableOfContents}] \\

[http://www.jspwiki.org/wiki/JSPWikiStyles]

In addition to the simple styles represented by the ~WikiMarkup, JSPWiki also allows you to put in your own styles, which are defined in the jspwiki.css file. These may vary from site to site, and it is up to the site administrator to define a style.

!!! CSS styles
Following styles are supported by the standard jspwiki.css file:

* %~%small -- Smaller then normal font, like %%small this %%
* %~%sub -- Subscript, like a%%sub ij %%= a%%sub ji%%
* %~%sup -- Superscript, like 2%%sup 3 %%= 8
* %~%strike -- Strike through text, like %%strike this text is hardly readable %%
* %~%ltr -- left-to-right text formatting
* %~%rtl -- right-to-left text formatting
* %~%commentbox -- comment box floating at the right margin
%%commentbox
Here is a comment-box
%%

!! Special block markers:
%%information
Use %~%information ... %~% for informational messages
/%
%%warning
Use %~%warning ... %~% for warning blocks
/%
%%error
Use %~%error ... %~% for error blocks
/%
%%quote
Use %~%quote ... %~% to quote a block of text
/%
%%center
Use %~%center ... %~% to center your text
/%

!!! Dynamic styles
Dynamic styles provided more advanced styling for your pages, powered by a combination of ~JavaScript and CSS. 
They can add substantial visual experience to your wikipages, though the structure of your pages 
and wiki markup remain unchanged. Actually, the pages are still fully accessible on browsers with JavaScript turned off. 

Most of these styles are only available for v2.5.xx onwards.

* %~%collapse -- Turn ordinary lists into collapsible trees. See [Collapsible List]
* %~%collapsebox -- Creates a collapsible box which slides in/out vertically. See [Collapsible Box]
* %~%category -- Generates pop up with pages referenced by the category page. See [Category Style] 
* %~%tip -- Generates a transparent fly-over tip with additional info. See [Tip Style]
* %~%graphbar -- Add horizontal or vertical graph bars to your wikipages. See [GraphBars]

* %~%sortable -- Turn ordinary wiki tables into sortable tables. See [Sortable Tables] 
* %~%table-filter -- Turn ordinary wiki tables into Excel-like filtered tables. See [Filtered Tables] 
* %~%zebra-table -- Add alternate row colors to your tables. See [Zebra Table Style]
* %~%columns -- Format text in multi-column news-paper format. See [Multi Columns Style]

* %~%tabbedSection, %~%tab -- Create pages with tabular sections. See [Tabbed Sections] 
* %~%tabbedAccordion -- Generates a tabbed section, with smooth transition effects based on accordion. See [Accordion Style]
* %~%accordion -- Generates vertical accordion. See [Accordion Style]

* %~%prettify -- Add code-coloring to a preformatted block of text. See [Prettify Sourcecode]
* %~%slimbox -- Generates a fancy picture viewer for all enclosed links, similar to the attachment viewer. See [Slimbox]
* %~%reflection -- Generates a reflection at the bottom of the image. See [Reflection Style|Reflection Style] 

!! Examples

! %~%collapse

%%collapse
* The pome fruits:
** Apples
*** Apple
*** Chokeberry
** Pear
*** European 
*** Asian
* The stone fruits, drupes of genus Prunus:
** Apricot
** Cherry
** Chokecherry
** Plum
** Peach
/%

! %~%collapsebox

%%collapsebox
__Lorem Ipsum__ 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
/%

! %~%category
Clicking the ''category'' %%category [JSPWikiStyles] /% reveals all pages linking to [JSPWikiStyles]

! %~%tip
Hover your mouse over the %%tip-LoremIpsum  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula.\\[{Image src='poppy.jpg' width='108' height='108' }] /% tip to see the nice tip.

! %~%graphbar

Simplest for of GraphBars:
%%graphBars
* %%gBar 20 %% Apples
* %%gBar 40 %% Oranges
* %%gBar 60 %% Pairs
%%

See [GraphBars] for more examples.

! %~%sortable
%%sortable
|| Title || Author || Published   || Edition || Some IP@        || Expenses
| book1  |  zappy  |  25 Feb 2005 |  5       |  100.100.100.100 |  €500
| book2  |  happy  |  25 Jan 2005 |  19      |  256.100.100.100 |  €1500
| book3  |  pappy  |  23 Mar 2005 |  06      |  10.100.100.100  |  €50
| book4  |  dappy  |  21 Apr 2005 |  199     |  1.100.100.100   |  €0.500
| book5  |  rappy  |  25 Jul 2005 |  017     |  1.100.25.100    |  €5500
| book5  |  rappy  |  23 Jan 2006 |  017     |  1.100.25.100    |  €5500
/%

! %~%table-filter
%%table-filter
|| Title || Author || Published   || Edition || Some IP@        || Expenses
| book1  |  zappy  |  25 Feb 2005 |  5       |  100.100.100.100 |  €500
| book2  |  happy  |  25 Jan 2005 |  19      |  256.100.100.100 |  €1500
| book3  |  pappy  |  23 Mar 2005 |  06      |  10.100.100.100  |  €50
| book4  |  dappy  |  21 Apr 2005 |  199     |  1.100.100.100   |  €0.500
| book5  |  rappy  |  25 Jul 2005 |  017     |  1.100.25.100    |  €5500
/%

! %~%zebra-table
%%zebra-ffe0e0-ffff80
|| column-head1 || column-head2 
| cell-data | cell data 
| cell-data | cell data 
| cell-data | cell data 
| cell-data | cell data 
/% 

! %~%columns
%%columns
__Lorem Ipsum__
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus odio. Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. 
----
__Nullam Sodales__
Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. /%

! %~%tabbedSection, %~%tab 
%%tabbedSection
%%tab-LoremIpsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus odio. Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. Cras aliquet nibh sit amet tortor. Nam nunc.
/%

%%tab-NullamSodales
Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. /%

%%tab-Cras
Cras aliquet nibh sit amet tortor. Nam nunc.

[poppy.jpg]
/%
/%

! %~%tabbedAccordion
%%tabbedAccordion

%%tab-LoremIpsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus odio. Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. Cras aliquet nibh sit amet tortor. Nam nunc.
/%

%%tab-NullamSodales
Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. /%

%%tab-Cras
Cras aliquet nibh sit amet tortor. Nam nunc.

[poppy.jpg]
/%
/%

! %~%accordion
%%accordion

%%tab-LoremIpsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus odio. Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. Cras aliquet nibh sit amet tortor. Nam nunc.
/%

%%tab-NullamSodales
Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. /%

%%tab-Cras
Cras aliquet nibh sit amet tortor. Nam nunc.

[poppy.jpg]
/%
/%

! %~%prettify
%%prettify
{{{
/**
 * the fibonacci series implemented as an Iterable.
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;

  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }
}}} /%


! %~%slimbox

%%slimbox
[poppy.jpg]
%%

! %~%reflection

%%reflection
[poppy.jpg]
%%