Wiki Style? basics

Wiki Styles allow authors to modify the color and other styling attributes of the contents of a page.
A Wiki Style? is written using percent-signs, as in %red% or %bgcolor=lightblue%.

Wiki Styles versus CSS styles

Wiki Styles, as written in the wiki page, are not exactly CSS styles or CSS classes. Wiki Styles allow authors to use both pre-defined by the administrator CSS classes, and to define new combinations of styles, without any need to edit/update local CSS files on the server.

Note that Pm Wiki allows advanced authors to use of class= and style= in tables and division blocks, but these are raw HTML attributes, and not Wiki Styles, knowledge of CSS is required to use them.

Text color and font

The most basic use of Wiki Styles is to change text attributes such as color, background color, and font.
Pm Wiki defines several Wiki Styles for changing the text color to %black%, %white%, %red%, %yellow%, %blue%, %gray%, %silver%, %maroon%, %green%, %navy%, and %purple%.

The basket contains %red% apples, %blue%
blueberries, %purple% eggplant, %green%
limes, %% and more.

For colors other than the predefined colors, use the %color=...% Wiki Style?. (Note: RGB colors (#rrggbb) should always be specified with lowercase letters to avoid WikiWord conflicts.)

I'd like to have some %color=#ff7f00%
tangerines%%,  too!

To change the background color, use %bgcolor=...% as a Wiki Style?:

This sentence contains %bgcolor=green
yellow% yellow text on a green
background.

See WikiStyle Colors for more color help.

Text justification

Wiki Styles are used to control the text justification

%center% This text is centered. 

%right% Right justified.

and to create floating text:

%rfloat% This text floats to the right

%rframe% floats to the right with a
frame

Lorem ipsum dolor sit amet, consectetuer
sadipscing elitr

Scopes

Wiki Styles can also specify a scope; with no scope, the style is applied to any text that follows up to the next Wiki Style? specification or the end of the paragraph, whichever comes first. The apply= attribute and its shortcuts allow to change the scope as follows:

Thus, %p color=blue% is the same as %apply=p color=blue%, and %list ROMAN% is the same as %apply=list list-style=upper-roman%.

Some predefined style shortcuts also make use of apply, thus %right% is a shortcut for %text-align=right apply=block%.

Example: Apply a style to a paragraph:

%p bgcolor=#ffeeee% The WikiStyle specification at the beginning of this
line applies to the entire paragraph, even if there are %blue% other
WikiStyle specifications %% in the middle of the paragraph.

Caveat: An applied Wiki Style? will only take effect if it's on the
line that starts the thing it's supposed to modify. In other
words, a Wiki Style? in the third markup line of a paragraph
can't change the attributes of the paragraph:

after the first line of the paragraph,
we try to %apply=p color=blue% change
color.
This does't work because the style comes
after the first line of the paragraph.

However, this %apply=p color=red%
paragraph
''will'' be in red because its block
style does
occur in the first line of its text.

* Here's a list item
* %list red% Oops, too late to affect
the list!

Larger blocks

The >>WikiStyle<< block can be used to apply a Wiki Style? to a large block of items.
The style is applied until the next >><< is encountered.

>>blue font-style:italic
bgcolor=#ffffcc<<
Everything after the above line is
styled with blue italic text,

This includes
    preformatted %red%text%%
* lists
-> indented items
>><<

    preformatted text

Note, the (:div style="..." class="...":) directive does not work the same way as >>WikiStyke<<, it can only contain the regular HTML style and class attributes.

HTML "class" and "style" attributes for tables and divisions

Wiki Styles are only the commands between %...% percent signs.

Tables, table directives and (:div:) division blocks allow advanced authors to incorporate the HTML/CSS attributes class= and style=. Note that these attributes are not Wiki Styles, knowledge of CSS is required to use them.

(:table style="font-style:italic;
color:green; border:1px solid blue;
background-color:#ffffcc":)
(:cellnr:)
Everything after the above line is
styled with green italic text,

This includes
    preformatted text
* lists
-> indented items
(:tableend:)

    preformatted text

Note, the (:div style="..." class="...":) directive does not work the same way as >>style<<, as mentioned above, it can only contain the HTML style and class attributes.

Custom style shortcuts

The define= attribute can be used to assign a shorthand name to any Wiki Style? specification.\\
This shorthand name can then be reused in later Wiki Style? specifications.

%define=box block bgcolor=#ddddff
border="2px dotted blue"%

%box% [@some sort of text@]

%box font-weight=bold color=green%
[@some sort of text@]

Predefined style shortcuts

Pm Wiki defines a number of style shortcuts.

• Text colors: black, white, red, yellow, blue, gray, silver, maroon, green, navy, purple (shortcut for %color=...%)
• Justification: %center% and %right%
• Images and boxes
  • Floating left or right: %rfloat% and %lfloat%
  • Framed items: %frame%, %rframe%, and %lframe%
  • Thumbnail sizing: %thumb%
• Open link in new window: %newwin% (shortcut for %target=_blank%)
• Comments: %comment% (shortcut for %display=none%)
• Ordered lists: %decimal%, %roman%, %ROMAN%, %alpha%, %ALPHA% (see also Cookbook:OutlineLists)

Wiki Style? attributes

The style attributes recognized within a Wiki Style? specification are:

    ------------ CSS -------------          --HTML--
    color               bgcolor             class 
    background-color    margin              id
    text-align          padding             hspace
    text-decoration     border              vspace
    font-size           float               target
    font-family         list-style          rel
    font-weight         width*              accesskey
    font-style          height*             value
    display

    Special: define, apply

The attributes in the first two columns correspond to the cascading style sheet (CSS) properties of the same name. The attributes in the last column apply only to specific items:

• class= and id= assign a CSS class or identifier to an HTML element
• target=name opens links that follow in a browser window called "name"
• rel=name in a link identifies the relationship of a target page
• accesskey=x uses 'x' as a shortcut key for the link that follows
• value=9 sets the number of the current ordered list item

* The width and height attributes have asterisks because they are handled specially for tags. If used by themselves (i.e., without anything providing an "apply=" parameter to the Wiki Style?), then they set the 'width=' and 'height=' attributes of any tags that follow. Otherwise, they set the 'width:' and 'height:' properties of the element being styled.

Enabling Styles

Styles not listed above can be enabled by a Pm Wiki Administrator by modifying the local/config.php file.
For instance to enable the "line-height" style attribute add the line

to the local/config.php file.

Defining scope for other HTML elements

You can add additional HTML elements to $WikiStyleApply to apply Wiki Styles to other HTML elements. For example to allow styling on table rows, or anchor tags.

To apply styling to anchor tags, place in config.php:

$WikiStyleApply['link'] = 'a';

Then, you can apply a class or style to an anchor link:

%apply=link red%[[PmWiki.WikiStyles |
test link]]

Or, to apply an ID attribute to a table row TR, place in config.php:

$WikiStyleApply['row'] = 'tr';

Then, in an advanced table, you can have:

(:cellnr:) %apply=row id=myid bgcolor=pink% cell content

And also in a simple table:

|| border=1
|| %apply=row id=myrowid% 1 || 2 || 3 || 4 ||

Note, the %apply=row...% Wiki Style? should be on the same line as (:cellnr:).

Examples

WikiStyle Examples contains a number of examples of ways to use Wiki Styles in pages.

Known Issues

• Percents in style definitions (like: %block width=50% %) require the use of "pct" instead of "%".
• If you specify multiple values for an attribute, like border="2px solid blue" make sure you place the values in quotes.
• Be sure to use lowercase letters for red-green-blue hex colors, %color=#aa3333% will work, %color=#AA3333% may not.

See Also

• Custom WikiStyles Predefined Pm Wiki styles & adding custom wiki styles
• PmWiki:List Styles
• WikiStylesPlus

Login