version=pmwiki-2.2.35 ordered=1 urlencoded=1
author=Petko
charset=UTF-8
csum=indent width=50pct
name=PmWiki.WikiStyleExamples
rev=183
targets=PmWiki.WikiStyles,Cookbook.WikiStylesPlus,PmWiki.WikiStyleColors,Cookbook.OutlineLists
text=(:Summary: Styling text for colour and other attributes:)%0aSee also [[Cookbook:WikiStylesPlus | Wiki Styles Plus]] and [[(PmWiki:)Wiki style colors]].%0a%0aPmWiki uses [[WikiStyles]] for styling text with color and other attributes.  PmWiki 2.0 introduced the ability to control the styling further and to even place styles on blocks.%0a%0aA  style is specified within a pair of %25-signs and styles the text that follows, as in:%0a%0a(:markup class=horiz:)%0aThis text is %25color=red%25 red, %25color=blue%25 blue, %25%25 and normal (black).%0a(:markupend:)%0a%0aThere are a wide number of available style properties, borrowed primarily from HTML and CSS.  In addition, an author can define a style "shortcut" by using the [@define=@] property.  For example, to define a style of [@%25red%25@], one can use:%0a%0a(:markup class=horiz:)%0a%25define=mystyle color=red%25%0aHere is some %25mystyle%25 red text created using a style shortcut.%0a(:markupend:)%0a%0aShortcuts can be combined with other styles, including other shortcuts:%0a%0a(:markup class=horiz:)%0a%25define=lovelyred color=red%25%0a%25define=likegrapefruit bgcolor=yellow%25%0a%0a%25red%25 This text is red, %25red bgcolor=#ccc%25 red on a grey background, and %25lovelyred likegrapefruit%25 red on a yellow background.  %0a(:markupend:)%0a%0aSo far, this is all basically the same as what was available in PmWiki 1.0.  PmWiki 2.0 includes the capability to style blocks, by using the [@apply=@] style property.  Specifying [@apply=block@] in a `WikiStyle will cause that style to be applied to the entire block, instead of just the text that follows:%0a%0a(:markup:)%0aThis entire block %25apply=block bgcolor=yellow%25 has a yellow background, even though the `WikiStyle appears in the middle of the line.  %25bgcolor=pink%25 Other inline (non-block) WikiStyles can appear in the middle of the line,%25%25 as before.%0a(:markupend:)%0a%0aThis means it's now possible to do right-aligned and centered text:%0a%0a(:markup:)%0a%25block text-align=right%25 The text of this paragraph is right-aligned. %0a%0a%25block text-align=center%25 The text of this paragraph is centered.  %0a(:markupend:)%0a%0a%0aIn fact, PmWiki predefines [@%25right%25@] and [@%25center%25@] style shortcuts so that you can do this more simply:%0a%0a(:markup class=horiz:)%0a%25right%25 This is right-aligned.%0a%0a%25center%25 This is centered.%0a(:markupend:)%0a%0aAuthors can define their own custom styles:%0a%0a(:markup:)%0a%25define=Pm block bgcolor=#fdf%25%0a%25define=goofy center bgcolor=#dfd border='3px dotted green'%25%0a%25define=rediguana right bgcolor=#ffffcc border='1px dotted red' padding=5px%25%0a%25define=strike text-decoration=line-through%25%0a%0a%25Pm%25 Any text that is on a light purple background is a comment from "Pm".%0a%0a%25goofy%25 Here's some text from Goofy.%0a%0a%25rediguana%25 bla bla by rediguana!%0a%0a%25goofy%25Hello, I am %25strike%25upset%25%25 %25strike%25disheartened%25%25 happy to meet you.%0a(:markupend:)%0a%0aStyles can be applied to almost any kind of block:%0a%0a(:markup class=horiz:)%0a* %25block bgcolor=yellow%25 Here is a list item%0a* Here's another list item%0a%0a* Here's more of a list%0a%0a# A new list%0a(:markupend:)%0a%0aIn particular, this means that outlines are now possible using the predefined [@%25ROMAN%25@], [@%25roman%25@], [@%25ALPHA%25@], and [@%25alpha%25@] list-block styles.  The style has to be specified on the first item in the list (and we may develop an alternate syntax for this sort of ordered list):%0a%0a(:markup class=horiz:)%0a# %25ROMAN%25 Top level%0a## %25ALPHA%25 second-level%0a## second-level%0a## second-level%0a### third-level%0a### third-level%0a## second-level%0a### third-level%0a#### %25alpha%25 fourth-level%0a##### %25roman%25 fifth-level%0a##### fifth-level%0a#### fourth-level%0a# top-level%0a# top-level%0a(:markupend:)%0a%0a[[Wiki styles]] can be combined with CSS stylesheets to do this automatically -- see [[Cookbook:OutlineLists]].%0a%0a%0a!! Q & A%0a%0a!!! How do I get a block of preformatted text?%0a%0aUse something similar to this (assuming you want markup within the block to be interpreted as wiki markup and URIs to be recognized).%0a%0a(:markup:)%0a>>white-space=pre%3c%3c%0aThis block of text is ''preformatted'', see all   the   white-space%0aand   linebreaks%0aare preserved. Links such as [[wiki styles]] etc still work.%0a>>%3c%3c%0a(:markupend:)%0a%0a!!! How do I get a block of preformatted text with a colored background and a border?%0a%0aUse something similar to this (note that wiki markup etc is not recognized within the block):%0a%0a(:markup:)%0a%25block bgcolor=#f0f9ff border='1px solid gray' padding=5px%25[@%0aip access-list extended example-acl%0aremark ** This is an example acl **%0adeny ip any host 10.0.0.1%0apermit ip any any%0a@]%0a(:markupend:)%0a%0a!!! How do I get a block of text (including wiki markup) with a colored background and a border?%0a(:markup class=horiz:)%0a>>teal background-color:silver border:'medium dotted green'%3c%3c%0aHello world%0a* bullet%0a# number%0a>>%3c%3c%0a(:markupend:)%0a%0a!!! How do I get a block of text (including wiki markup) with a border that is indented on the left and does NOT extend all the way to right?  I'm not interested in having later text to the right as would occur with lfloat...%0a%0aYou can use the @@indent width=50pct@@ wikistyle.%0a%0a(:markup class=horiz:)%0aBefore indention...%0a>>frame indent width=50pct%3c%3c%0aHello world%0a* bullet%0a# number%0a>>%3c%3c%0a... after indention!%0a(:markupend:)
time=1321721881