WikiStylesPlus

Summary: Lots of useful Wikistyles (rollovers, code blocks, notes, warnings, outlines)
Version: 2007-05-23
Prerequisites: pmwiki-2.1.0
Status:
Maintainer: Pm
Categories: Markup PHP72
Users: +8 -1 (View / Edit)

Questions answered by this recipe

  • Can I display "rollover" images in pages?
  • How can I display a code block?
  • Is there a special markup for notes, warnings, or important information?
  • Can I cause text to be displayed as all uppercase or lowercase?
  • Can I get "outline" numbering on lists (i.e., I-A-1-i-a numbering)?

Description

The wsplus.zipΔ recipe provides a lot of additional WikiStyles for editing and displaying markup text, including support for rollover images, colored text, a variety of box formats, and more. To use the recipe, simply unpack it into the directory containing your pmwiki installation. The wsplus.php file should go into the cookbook directory, the other files should go into pub/wsplus/. Then, in a local customization file, add the line

include_once('cookbook/wsplus.php');

The remainder of this page describes the styles available with PmWiki when WikiStylesPlus is installed.

Basic boxes and frames

The frame style places its contents into a box/frame.

This text has been placed into a frame by using the >>frame<< markup. Any markup is allowed inside the frame, which continues until another >>...<< markup is encountered.

Mauris placerat. Duis auctor suscipit neque. Ut semper. Sed gravida. Suspendisse feugiat pharetra magna. Suspendisse congue tellus in eros. Nulla eleifend mollis ligula. Integer bibendum.

The lrindent style indents both the left and right margins. When combined with frame, it produces an indented box:

This box was created using the >>frame lrindent<< markup. Note that the left and right sides are indented.

Ut leo lectus, feugiat in, auctor molestie, posuere ut, leo. Nunc faucibus interdum risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris elementum venenatis elit. Duis pretium convallis quam. In feugiat dui nec nisi. Etiam rhoncus neque non enim.

Sidenotes and Postit notes

>>sidenote<<
This is a sidenote produced using the >>sidenote<< markup.
>><<

This is a sidenote produced using the >>sidenote<< markup.

The sidenote style allows small notes to be floated to the right side of the page, with any surrounding text wrapped to the left. The default definition for sidenote is actually a shortcut for frame rfloat.

>>postit<<
%notetitle% Postit note%%

Suspendisse nisl tellus, tincidunt ac, adipiscing in, tincidunt non, urna. Praesent lectus. Nulla ultrices metus in mauris.
>><<

Postit note

Suspendisse nisl tellus, tincidunt ac, adipiscing in, tincidunt non, urna. Praesent lectus. Nulla ultrices metus in mauris.

The postit style is the same as the sidenote style, except it appears with a yellowish background. Within sidenote, postit, and other styles one can use the notetitle style to place a title within the note.


Standard callouts

The tip, important, and warning styles can be used to produce standard callouts:


>>tip<<
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam congue mollis nibh. Phasellus eget orci. Nullam nunc. Quisque consectetuer lacinia lorem. Cras consectetuer urna sit amet nunc. Nunc venenatis malesuada dui. Maecenas ligula dolor, porta quis, nonummy id, egestas quis, felis.
>><<

>>important<<
Aenean eu risus vel est placerat molestie. Duis condimentum arcu. Fusce vel dui. Sed interdum tempor elit. In pretium. In justo tellus, porta viverra, luctus vel, pulvinar vel, metus. Vivamus hendrerit nunc non elit. Duis nisi. Vestibulum placerat pharetra magna.
>><<

>>warning<<
Etiam consectetuer, justo sit amet tincidunt dictum, massa purus laoreet nisl, quis elementum metus nulla non elit. Aenean enim.
>><<

>>warning bgcolor=#333333 color=white border='3px solid red'<<
Ut ante. Aenean interdum magna ac elit. Integer metus massa, porta in, dapibus a, vulputate in, est. Etiam lobortis. Phasellus nonummy. Phasellus posuere mollis diam.
>><<

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam congue mollis nibh. Phasellus eget orci. Nullam nunc. Quisque consectetuer lacinia lorem. Cras consectetuer urna sit amet nunc. Nunc venenatis malesuada dui. Maecenas ligula dolor, porta quis, nonummy id, egestas quis, felis.

Aenean eu risus vel est placerat molestie. Duis condimentum arcu. Fusce vel dui. Sed interdum tempor elit. In pretium. In justo tellus, porta viverra, luctus vel, pulvinar vel, metus. Vivamus hendrerit nunc non elit. Duis nisi. Vestibulum placerat pharetra magna.

Etiam consectetuer, justo sit amet tincidunt dictum, massa purus laoreet nisl, quis elementum metus nulla non elit. Aenean enim.

Ut ante. Aenean interdum magna ac elit. Integer metus massa, porta in, dapibus a, vulputate in, est. Etiam lobortis. Phasellus nonummy. Phasellus posuere mollis diam.

Rollovers

The rollover style identifies something that is to be invisible until the mouse hovers over it. This is commonly used to create "rollover" effects. For example, move the mouse over the "PmWiki" image below to see the rollover effect.

%rollover% Attach:pmwiki-rollover.gif
Attach:pmwiki-plain.gif

Rounded boxes

On browsers that support it, the round style produces a box with rounded corners. (Browsers that do not support rounding of corners display the box with square corners.) As with other styles, the round style can also be combined with frame and lrindent:

>>lrindent round<<
This text appears in a rounded box.
>><<

>>lrindent round frame<<
This text appears in a rounded box with a frame.
>><<

>>lrindent round frame bgcolor=#fffc01 border='3px solid red'<<
And a framed rounded box of a different color.
>><<

This text appears in a rounded box.

This text appears in a rounded box with a frame.

And a framed rounded box of a different color.

Text styles

The WikiStylesPlus recipe includes the following text styles:

WikiStyleMeaningMarkupResult
uppercaseconvert to uppercase%uppercase% Apple pie Apple pie
lowercaseconvert to lowercase%lowercase% Apple pie Apple pie
capitalizeuppercase each word%capitalize% Apple pie Apple pie
small-capsdisplay small caps%small-caps% Apple pie Apple pie
smallersmaller text%smaller% Apple pie Apple pie
largerlarger text%larger% Apple pie Apple pie
underlineunderlined text%underline% Apple pie Apple pie
boldboldface text%bold% Apple pie Apple pie
italicitalic text%italic% Apple pie Apple pie
justifyjustified text%justify% Apple pie(full justification)
  • Note that the %justify% style was added to the core in PmWiki Version 2.2.27 (2011-06-19).

Text colors

Here's a full list of color shortcuts after WikiStylesPlus is loaded:

ColorResultRGB value
%black% Black#000000
%white% White#ffffff
%red% Red 
%yellow% Yellow 
%blue% Blue 
%gray% Gray 
%silver% Silver 
%maroon% Maroon 
%green% Green 
%navy% Navy 
%purple% Purple 
%darkgreen% Dark green#006600
%bluegrass% Bluegrass#009999
%teal% Teal#33ffcc
%darkpurple% Dark purple#660066
%periwinkle% Periwinkle#6600cc
%darkgrey% Dark grey#666666
%mistgreen% Mist green#669966
%slategrey% Slate grey#669999
%lightpurple% Light purple#9966cc
%lightgrey% Light gray#999999
%lightblue% Light blue#99ccff
%springgreen% Spring green#99ff33
%magenta% Magenta#cc33cc
%grey% Grey#cccccc
%lightgreen% Light green#ccffcc
%pink% Pink#ff3399
%lightred% Light red#ff6666
%orange% Orange#ff9900
%lightorange% Light orange#ff9966
%gold% Gold#ffbb66

Outline lists

Placing an %outline% wikistyle on a numbered list causes it to be displayed using outline numbering.

# %outline% Plants
## Vegetables
### Spinach
### Broccoli
## Fruit
### Apple
#### Red Delicious
#### Macintosh
#### Golden
#### Green
#### Washington
### Orange
#### Navel
#### Valencia
## Tubers
# Animals
## Dogs
## Cats
  1. Plants
    1. Vegetables
      1. Spinach
      2. Broccoli
    2. Fruit
      1. Apple
        1. Red Delicious
        2. Macintosh
        3. Golden
        4. Green
        5. Washington
      2. Orange
        1. Navel
        2. Valencia
    3. Tubers
  2. Animals
    1. Dogs
    2. Cats

Notes

In order for the %rollover% style to work on most browsers, the skin's template file must include a <!DOCTYPE...> declaration.

For the images or backgrounds in the callouts to print, you may have to select an option in your print dialog that says something like "Print background".

Release Notes

  • 2006-11-24: Initial release (Pm)

Comments

Rollovers and Rounded-Boxes isn't shown in Opera, but Opera supports all standards... flox November 30, 2006, at 04:13 PM

Rounded boxes don't work in IE (even with IE7) ... Thierry, December 5, 2006

Links in boxes don't work. See

for example. Olaf, Sep. 4th 2007

Worked for me. JZW jzw?

Add more color keywords to use for text and for background colors

Download wikicolorsplus.phpΔ and install in config.php with

include_once("$FarmD/cookbook/wikicolorsplus.php");

or add the code below to your local config.php file (or wsplus.php). See all colors here: MoreWikiStyleColors - HansB

This defines color keywords and relies on the browser to render the color values (all modern browsers do). You can use the color keywords for text colors as wiki styles, and use as background color with bgcolor=keyword or use bg-colorname like

  • %goldenrod% text in goldenrod
  • %bg-goldenrod% background goldenrod
  • %bgcolor=goldenrod% background goldenrod

These color keywords are case-insensitive!

$SVGColors = array (
'aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black',
'blanchedalmond','blue','blueviolet','brown','burlywood','cadetblue','chartreuse','chocolate',
'coral','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkcyan','darkgoldenrod',
'darkgrey','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred',
'darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink','deepskyblue',
'dimgray','dodgerblue','firebrick','floralwhite','forestgreen','fuchsia','gainsboro','ghostwhite',
'gold','goldenrod','gray','green','greenyellow','honeydew','hotpink','indianred',
'indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue',
'lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink','lightsalmon','lightseagreen',
'lightskyblue','lightslategray','lightsteelblue','lightyellow','lime','limegreen','linen','magenta',
'maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen',
'mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy',
'oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen',
'paleturquoise','palevioletred','papayawhip','peachbuff','peru','pink','plum','powderblue',
'purple','red','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen',
'seashell','sienna','silver','skyblue','slateblue','slategray','snow','springgreen',
'steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat',
'white','whitesmoke','yellow','yellowgreen'
);
foreach($SVGColors as $c) {
   $WikiStyle[$c]['color'] = $c;
   $WikiStyle['bg-'.$c]['background-color'] = $c;
}

I would like to have an outline where each highest-level heading is annotated with post-its. Unfortunately, it seems that post-its break the flow of the outline environment, so that numbering restarts from 1 (with the outline environment off) after the post-it.

See Also

Contributors

Sandbox

The WikiStylesPlus recipe is enabled on this page, so feel free to experiment below.

BEFORE Bla blabla blabla blabla blabla blabla bla bla bla Bla blabla blabla blabla blabla blabla bla bla bla Bla blabla blabla blabla blabla blabla bla bla bla Bla blabla blabla blabla blabla blabla bla bla bla

This is a sidenote produced using the >>sidenote<< markup.

AFTER bla blabla blabla blabla blabla blabla blabla bla bla blabla blabla blabla blabla blabla blabla bla bla blabla blabla blabla blabla blabla blabla bla Bla blabla blabla blabla blabla blabla bla bla bla Bla blabla blabla blabla blabla blabla bla bla bla

>>postit<<
%notetitle% Test

Only a little Test of postit\\
The hovering box overlaps the postit-note.
>><<
>>rollover warning bgcolor=#333333 color=white uppercase vspace width=50pct<<
I said, DON'T hover the mouse over this BOX!  :-)
>>tip width=50pct<<
Don't hover the mouse over this box.
>><<

Test

Only a little Test of postit
The hovering box overlaps the postit-note.

I said, DON'T hover the mouse over this BOX! :-)

Don't hover the mouse over this box.

link test

%rollover%[[PmWiki|Attach:pmwiki-120.gif]]
[[PmWiki|Attach:pmwiki-50.gif]]

no link

%rollover%Attach:pmwiki-120.gif
Attach:pmwiki-50.gif

justify

  • Note that the %justify% style was added to the core in PmWiki Version 2.2.27 (2011-06-19).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Numbered lists

Tweaking list element style
%define=mytip item class=tip padding-top=1em padding-bottom=1em list-style=none%
%define=mywarning item class=warning padding-top=1em padding-bottom=1em list-style=none%
# Connect to the server[@
ssh servername -u user
@]
** %mytip% You can also use @@ssh user@servername@@
# List all files[@
ls -al
@]
** %mywarning% Seems to work...
# This should read "3".
  1. Connect to the server
    ssh servername -u user
    
    • You can also use ssh user@servername
  2. List all files
    ls -al
    
    • Seems to work...
  3. This should read "3".

The "%define=mytip item class=tip padding-top=1em padding-bottom=1em%" may be defined in a config file, see WikiStyles. --Petko March 12, 2007, at 09:30 AM

Using indented paragraph
# Item 1

--> %tip% This is a tip

# Item 2

--> %block important% This is important

# Item 3

--> %warning% This is a warning

  1. Item 1
    This is a tip
  2. Item 2
    This is important
  3. Item 3
    This is a warning

wikistylesplus-type color in background. lightpurple is a class, not a color
%lightpurple%Test test test%%
%bgcolor=lightpurple%Test test test%%
%background-color=lightpurple%Test test test%%
%define=bglightpurple block bgcolor=#9966cc color=blue%
%bglightpurple%Test test test%%

(:table width=70% align=center cellpadding=20px bgcolor=white border=1px:)
(:cellnr:)%lightpurple%Test test test%%
(:cell background-color=lightpurple:)Test test test
(:cell:)%style="background-color:lightpurple"%Test test test%%
(:cellnr style="background-color=lightpurple":)Test test test
(:cell bgcolor=lightpurple:)Test test test
(:cell background-color:lightpurple:)Test test test
(:cellnr:)%bglightpurple%Test test test
(:cell class=bglightpurple:)Test test test
(:cell bglightpurple:)Test test test
(:tableend:)

Test test test Test test test Test test test Test test test

Test test test Test test test Test test test
Test test test Test test test Test test test
Test test test Test test test Test test test

Comments

See discussion at WikiStylesPlus-Talk

User notes +8 -1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.