• View
• Edit
• History
• Print
• Backlinks

WikiStyles

Wiki style basics

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

The most basic use of wiki styles is to change text attributes such as color, background color, and font. PmWiki defines several wikistyles 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=...% wikistyle. (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 wikistyle:

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

See Wiki Style Colors for more color help.

Scopes

Wikistyles can also specify a scope; with no scope, the style is applied to any text that follows up to the next wikistyle specification or the end of the paragraph, whichever comes first. Including a scope changes the specification to apply to the

• whole paragraph (%p ...%),
• an entire list (%list ...%),
• an item within a list (%item ...%), or
• any block (%block ...%).

Those scopes are predefined shortcuts for the "apply=" attribute, which is discussed below.

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

The >>style<< block can be used to apply a wikistyle 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 text
* lists
-> indented items
>><<

    preformatted text

The (:div style:) works in almost the same way as >>style<<, but the style information is encapsulated in a style="" attribute

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

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

    preformatted text

Wiki styles can also be applied to tables and table directives

||class="green"
style="font-style:italic; border:1px
solid blue; background-color:#ffffcc"
||Everything after the above line is
styled with green italic text, ||
|| ||
||This includes ||
||    preformatted text ||
||* lists ||
||-> indented items ||

(:table class="green"
style="font-style:italic; 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

Wikistyle attributes

The style attributes recognized within a wikistyle specification are:

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

Applying wikistyles to block

Normally a wikistyle applies to a span of (inline) text, but the apply= attribute allows a style to be applied to something else. The predefined apply= values are:

The starred items also have wikistyle shortcuts already defined, 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 wikistyle shortcuts also make use of apply, thus %right% is a shortcut for %text-align=right apply=block%.

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

here is some text in
a paragraph and if
we try to %apply=p color=blue% change
the color of the paragraph in the
middle
it won't work because the style comes
after the paragraph has already been
started.

However, this %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!

Enabling Styles

Styles not listed above can be enabled by a PmWiki 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.

Custom style shortcuts

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

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

%box% [@
$ echo "Hello world"
Hello World
$ exit
@]

%box font-weight=bold color=green% [@
$ echo "I said, HELLO"
@]

$ echo "Hello world"
Hello World
$ exit

$ echo "I said, HELLO"

Predefined style shortcuts

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

Examples

Wiki Style Examples contains a number of examples of ways to use wikistyles in pages.

Known Issues

• Percents in style definitions (like: %block width=50% %) require the use of "pct" instead of "%".

See Also

• Custom Wiki Styles Predefined PmWiki styles & adding custom wiki styles
• Block markup This page covers all the block markup character combinations
• List Styles Styles for use in wiki lists

(:div style="font-style:italic":)
I want italic text here
(:divend:)

>>font-style:italic<<
I want italic text again, and you got
it!
>><<

(:div style="border:2px solid black":)
I want a black border around here
(:divend:)

>>border:'2px solid blue'<<
I wish I had a blue border around here.
>><<

(:div class="frame green"
style="font-size:smaller":)
This text should be small, green, and
surrounded by a frame
(:divend:)

(:div class="blue rframe" style="font-size:smaller":)
This text should be small, blue, and surrounded by a right floated frame
(:divend:)

(:div class="blue rfloat frame" style="font-size:smaller":)
This text should be small, blue, and surrounded by a right floated frame
(:divend:)

%define=bclass bgcolor=#ddddff
border="1px dotted green"%

(:table:)
(:cellnr bclass:) test one
(:cellnr class="bclass":) test two
(:cellnr:)%bclass% test three
(:cellnr:)
>>bclass<<
test four
>><<
(:cellnr:)
(:div class="bclass":)
test five
(:divend:)
(:tableend:)

%define=zclass block bgcolor=#ddddff
border="1px dotted green"%

(:table:)
(:cellnr zclass:) test one
(:cellnr class="zclass":) test two
(:cellnr:)%zclass% test three
(:cellnr:)
>>zclass<<
test four
>><<
(:cellnr:)
(:div class="zclass":)
test five
(:divend:)
(:tableend:)

(:div class='lfloat' font-size='smaller' color='blue' bgcolor='#eee'
clear='left' :)
{*$Name}
(:divend:)

(:div style="font-size:'smaller'; color:'blue'; background-color:'#eee';
float:left; clear:'left';" :)
{*$Name}
(:divend:)

%define=mytrail div font-size='smaller' background-color='#eee'
float='right' clear='right' %
(:div:)
%mytrail%{*$Name}
(:divend:)

(:div mytrail:)
{*$Name}
(:divend:)