Wiki: WIKI.STYLING

CSS styles
Special block markers:
Dynamic styles
Examples
%%collapse
%%category
%%tip
%%sortable
%%table-filter
%%zebra-table
%%columns
%%prettify

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 this
%%sub -- Subscript, like aij = aji
%%sup -- Superscript, like 23 = 8
%%strike -- Strike through text, like 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

Here is a comment-box

Special block markers:#

Use %%information ... %% for informational messages

Use %%warning ... %% for warning blocks

Use %%error ... %% for error blocks

Use %%quote ... %% to quote a block of text

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 JSPWiki:Collapsible List
%%category -- Generates pop up with pages referenced by the category page. See JSPWiki:Category Style
%%tip -- Generates a transparent fly-over tip with additional info. See JSPWiki:Tip Style
%%graphbar -- Add horizontal or vertical graph bars to your wikipages. See JSPWiki:GraphBars
%%sortable -- Turn ordinary wiki tables into sortable tables. See JSPWiki:Sortable Tables
%%table-filter -- Turn ordinary wiki tables into Excel-like filtered tables. See JSPWiki:Filtered Tables
%%zebra-table -- Add alternate row colors to your tables. See JSPWiki:Zebra Table Style
%%columns -- Format text in multi-column news-paper format. See JSPWiki:Multi Columns Style
%%prettify -- Add code-coloring to a preformatted block of text. See JSPWiki:Prettify Sourcecode

Examples#

%%collapse#

The pomme fruits:
- Apples
  - Apple
  - Chokeberry
- Pear
  - European
  - Asian
The stone fruits, drupes of genus Prunus:
- Apricot
- Cherry
- Chokecherry
- Plum
- Peach

%%category#

Clicking the category JSPWiki:JSPWikiStyles

reveals all pages linking to JSPWiki:JSPWikiStyles

%%tip#

Hover your mouse over the Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Donec dictum velit eget risus.
Fusce ligula.
tip to see the nice tip.

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

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#

column-head1	column-head2
cell-data	cell data
cell-data	cell data
cell-data	cell data
cell-data	cell data

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

%%prettify#

  IF p2k_pmgen.k_trace_level >= '8' THEN
     IF k_person_code IS NULL THEN
            p2k_ppgen.sperl(v_module_name,0,
            'Warning: You selected Exception Level '||p2k_pmgen.k_trace_level||
            ' for all employees.');
            p2k_ppgen.sperl(v_module_name,0,
            'Due to volume of trace messages, the Exception Level is internally reset to 1.');
            p2k_ppgen.sperl(v_module_name,0,
            'If you want Exception Level '||p2k_pmgen.k_trace_level||', please enter employee to be traced');
            p2k_pmgen.k_trace_level := '1';
            k_exception_level := '1';
     END IF; -- k_person_code IS NULL THEN
  END IF; -- p2k_pmgen.k_trace_level > '8'

Table of Contents