WikiStylesPlus
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:
| WikiStyle | Meaning | Markup | Result |
| uppercase | convert to uppercase | %uppercase% Apple pie | Apple pie |
| lowercase | convert to lowercase | %lowercase% Apple pie | Apple pie |
| capitalize | uppercase each word | %capitalize% Apple pie | Apple pie |
| small-caps | display small caps | %small-caps% Apple pie | Apple pie |
| smaller | smaller text | %smaller% Apple pie | Apple pie |
| larger | larger text | %larger% Apple pie | Apple pie |
| underline | underlined text | %underline% Apple pie | Apple pie |
| bold | boldface text | %bold% Apple pie | Apple pie |
| italic | italic text | %italic% Apple pie | Apple pie |
| justify | justified 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).
- Note that the
Text colors
Here's a full list of color shortcuts after WikiStylesPlus is loaded:
| Color | Result | RGB 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 |
|
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
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).
- Note that the
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
%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". |
|
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
# Item 1 --> %tip% This is a tip # Item 2 --> %block important% This is important # Item 3 --> %warning% This is a warning |
|
%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
|
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.