Wiki Styles Plus
Version: 2007–05–23
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 WikiStylesPlus 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. 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
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 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<< 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=#ffffdd<< 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) |
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.
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
See Also
Contributors
Sandbox
The WikiStylesPlus recipe is enabled on this page, so feel free to experiment below.
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
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 |
|