version=pmwiki-2.2.2 ordered=1 urlencoded=1
agent=Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.19) Gecko/20081216 Ubuntu/8.04 (hardy) Firefox/2.0.0.19
author=Petko
charset=ISO-8859-1
csum=fix link
host=81.65.14.164
name=PmWiki.WikiStyles
post= Save
rev=180
targets=PmWiki.WikiStyles,PmWiki.WikiWord,PmWiki.Tables,PmWiki.TableDirectives,PmWiki.GroupHeaders,PmWiki.WikiAdministrator,PmWiki.LocalCustomizations,PmWiki.CustomWikiStyles,PmWiki.WikiStyleExamples,PmWiki.TextFormattingRules
text=(:Summary: Modifying the style of page contents:)%0a(:div class='rfloat frame' style='clear:right; font-size:small;':)%0a'''Contents'''%0a*[[#Basics|Basics]]%0a*[[#Scopes|Scopes]]%0a*[[#Attributes|Attributes]]%0a*[[#Styles|Enabling Styles]]%0a*[[#Shortcuts|Custom style shortcuts]]%0a*[[#predefined|Predefined Style Shortcuts]]%0a*[[#Examples|Examples]]%0a*[[#KnownIssues|Known Issues]]%0a*[[#SeeAlso|See Also]]%0a(:divend:)%0a(:Audience: authors (basic) :)%0a%0a[[#Basics]]%0a!! Wiki style basics%0a%0a[[Wiki styles]] allow authors to modify the color and other styling attributes of a page's contents.  %0aA wikistyle is written using percent-signs, as in %25red%25[@%25red%25@]%25%25 or %25bgcolor=lightblue%25[@%25bgcolor=lightblue%25@]%25%25.%0a%0a!!! Text color and font%0aThe most basic use of wiki styles is to change text attributes such as color, background color, and font.  %0aPmWiki defines several wikistyles for changing the text color to [=%25black%25, %25white%25, %25red%25, %25yellow%25, %25blue%25, %25gray%25, %25silver%25, %25maroon%25, %25green%25, %25navy%25, and %25purple%25=].%0a%0a(:markup class=horiz:)%0aThe basket contains %25red%25 apples, %25blue%25 blueberries, %25purple%25 eggplant, %25green%25 limes, %25%25 and more.%0a(:markupend:)%0a%0aFor colors other than the predefined colors, use the [@%25color=...%25@] wikistyle.  (Note: RGB colors (#rrggbb) should always be specified with lowercase letters to avoid [[WikiWord]] conflicts.)%0a%0a(:markup class=horiz:)%0aI'd like to have some %25color=#ff7f00%25 tangerines%25%25,  too!%0a(:markupend:)%0a%0aTo change the background color, use [@%25bgcolor=...%25@] as a wikistyle:%0a%0a%0a(:markup class=horiz:)%0aThis sentence contains %25bgcolor=green yellow%25 yellow text on a green background.%0a(:markupend:)%0a%0aSee [[(PmWiki:)Wiki Style Colors]] for more color help.%0a%0a!!!Text justification%0aStyles are used to control the text justification%0a%0a(:markup class=horiz:)%0a%25center%25 This text is centered. %0a%0a%25right%25 Right justified.%0a(:markupend:)%0a%0aand to create floating text:%0a%0a(:markup class=horiz:)%0a%25rfloat%25 This text floats to the right%0a%0a%25rframe%25 floats to the right with a frame%0a%0aLorem ipsum dolor sit amet, consectetuer sadipscing elitr%0a(:markupend:)%0a%0a%0a[[#Scopes]]%0a!! Scopes%0a%0aWikistyles 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. The '''apply=''' attribute and its shortcuts allow to change the scope as follows:%0a%0a||border=1 cellpadding=3 cellspacing=0%0a||apply attribute ||shortcut ||style applies to... ||%0a||[@%25apply=img ...%25@] ||- ||any image that ''follows''||%0a||[@%25apply=p ...%25@] ||[@%25p ...%25@] ||the current paragraph||%0a||[@%25apply=pre ...%25@] ||- ||the current preformatted text||%0a||[@%25apply=list ...%25@] ||[@%25list ...%25@] ||the current list||%0a||[@%25apply=item ...%25@] ||[@%25item ...%25@] ||the current list item||%0a||[@%25apply=div ...%25@] ||- ||the current div||%0a||[@%25apply=block ...%25@] ||[@%25block ...%25@] ||to the current block, whether it's a paragraph, list, list item, heading, or division.||%0a%0athus '''[@%25p color=blue%25@]''' is the same as '''[@%25apply=p color=blue%25@]''', and '''[@%25list ROMAN%25@]''' is the same as '''[@%25apply=list list-style=upper-roman%25@]'''.%0a%0aSome [[#predefined|predefined style shortcuts]] also make use of apply, thus '''[@%25right%25@]''' is a shortcut for '''[@%25text-align=right apply=block%25@]'''.%0a%0aExample: Apply a style to a paragraph:%0a(:markup:)%0a%25p bgcolor=#ffeeee%25 The wikistyle specification at the beginning of this line applies to the entire paragraph, even if there are %25blue%25 other wikistyle specifications %25%25 in the middle of the paragraph.%0a(:markupend:)%0a%0aWiki styles can also be applied to [[PmWiki/tables]] and [[PmWiki/table directives]]:%0a(:markup class=horiz:)%0a||class="green" style="font-style:italic; border:1px solid blue; background-color:#ffffcc"%0a||Everything after the above line is styled with green italic text, ||%0a|| ||%0a||This includes ||%0a||    preformatted text ||%0a||* lists ||%0a||-> indented items ||%0a(:markupend:)%0a%0a(:markup class=horiz:)%0a(:table class="green" style="font-style:italic; border:1px solid blue; background-color:#ffffcc":)%0a(:cellnr:)%0aEverything after the above line is styled with green italic text,%0a%0aThis includes%0a    preformatted text%0a* lists%0a-> indented items%0a(:tableend:)%0a(:markupend:)%0a%0a%0aThe '''[@>>style%3c%3c@]''' block can be used to apply a wikistyle to a large block of items.  %0aThe style is applied until the next [@>>%3c%3c@] is encountered.%0a%0a(:markup class=horiz:)%0a>>blue font-style:italic bgcolor=#ffffcc%3c%3c%0aEverything after the above line is styled with blue italic text,%0a%0aThis includes%0a    preformatted text%0a* lists%0a-> indented items%0a>>%3c%3c%0a(:markupend:)%0a%0aThe '''[@(:div style:)@]''' works in ''almost'' the same way as [@>>style%3c%3c@],%0abut the style information is encapsulated in a @@style=""@@ attribute and nested div blocks are possible.%0a(:markup class=horiz:)%0a(:div class="green" style="font-style:italic; border:1px solid blue; background-color:#ffffcc":)%0aEverything after the above line is styled with green italic text,%0a%0aThis includes%0a    preformatted text%0a* lists%0a-> indented items%0a(:divend:)%0a(:markupend:)%0a%0a(:markup class=horiz:)%0a(:div1 style="font-style:italic; background-color:#ffffcc":)%0aouter style%0a(:div2 style="color:red; background-color:lightblue":)%0anested style%0a(:div2end:)%0aagain outer style%0a(:div1end:)%0a(:markupend:)%0a%0a%0a'''Caveat''': An applied wikistyle will only take effect if it's on the%0aline that starts the thing it's supposed to modify.  In other%0awords, a wikistyle in the third markup line of a paragraph%0acan't change the attributes of the paragraph:%0a%0a(:markup class=horiz:) %0aafter the first line of the paragraph,%0awe try to %25apply=p color=blue%25 change color.%0aThis does't work because the style comes%0a(:markupend:)%0a%0a(:markup class=horiz:)%0aHowever, this %25p color=red%25 paragraph%0a''will'' be in red because its block style does%0aoccur in the first line of its text.%0a(:markupend:)%0a%0a(:markup class=horiz:) %0a* Here's a list item%0a* %25list red%25 Oops, too late to affect the list!%0a(:markupend:)%0a%0a%0a[[#Attributes]]%0a!! Wikistyle attributes%0a%0aThe style attributes recognized within a wikistyle specification are:%0a%0a    ------------ CSS -------------          --HTML--%0a    color               bgcolor             class %0a    background-color    margin              id%0a    text-align          padding             hspace%0a    text-decoration     border              vspace%0a    font-size           float               target%0a    font-family         list-style          rel%0a    font-weight         width*              accesskey%0a    font-style          height*             value%0a    display%0a%0a    Special: define, apply%0a%0aThe attributes in the first two columns correspond to the ''[[cascading style sheet -> http://blooberry.com/indexdot/css/propindex/all.htm]]'' (CSS) properties of the same name.  The attributes in the last column apply only to specific items:%0a%0a* '''[@class=@]''' and '''[@id=@]''' assign a CSS class or identifier to an HTML element%0a* '''[@target=name@]''' opens links that follow in a browser window called "name"%0a* '''[@rel=name@]''' in a link identifies the relationship of a target page%0a* '''[@accesskey=x@]''' uses 'x' as a shortcut key for the link that follows%0a* '''[@value=9@]''' sets the number of the current ordered list item%0a%0a[=*=] The width and height attributes have asterisks because they are handled specially for %3cimg .../> tags.  If used by themselves (i.e., without anything providing an "apply=" parameter to the wikistyle), then they set the 'width=' and 'height=' attributes of any %3cimg ... /> tags that follow. Otherwise, they set the 'width:' and 'height:' properties of the element being styled.%0a%0a[[#Styles]]%0a!! Enabling Styles%0aStyles not listed above can be enabled by a PmWiki Administrator by modifying the local/config.php file.  %0aFor instance to enable the "line-height" style attribute add the line %0a%0a->$WikiStyleCSS[] = 'line-height';%0a%0ato the local/config.php file.%0a%0a[[#Shortcuts]]%0a!! Custom style shortcuts%0a%0aThe '''[@define=@]''' attribute can be used to assign a shorthand name to any wikistyle specification.\\  %0aThis shorthand name can then be reused in later wikistyle specifications.%0a%0a(:markup class=horiz:)%0a%25define=box block bgcolor=#ddddff border="2px dotted blue"%25%0a%0a%25box%25 [@some sort of text@]%0a%0a%25box font-weight=bold color=green%25 [@some sort of text@]%0a(:markupend:)%0a%0a-%3c '''Tip:'''  It's often a good idea to put common style definitions into [[Group Header(s)]] pages so that they can be shared among multiple pages in a group.  Or, the [[wiki administrator]] can predefine styles site-wide as a [[local customization(s)]] (see [[Custom Wiki Styles]]).%0a%0a-%3c '''Tip:''' Use custom style definitions to associate meanings with text instead of just colors.  For example, if warnings are to be displayed as green text, set [@%25define=warn green%25@] and then use [@%25warn%25@] instead of [@%25green%25@] in the document.  Then, if you later decide that warnings should be styled differently, it's much easier to change the (one) definition than many occurrences of [@%25green%25@] in the text.%0a%0a-%3c '''Tip:''' Any undefined WikiStyle is automatically treated as a request for a class, thus [@%25pre%25@] is the same as saying [@%25class=pre%25@].%0a%0a!![[#predefined]] Predefined style shortcuts%0a%0aPmWiki defines a number of style shortcuts.%0a%0a* Text colors: %25black%25black%25%25, %25white bgcolor=black%25white%25%25, %25red%25red%25%25, %25yellow%25yellow%25%25, %25blue%25blue%25%25, %25gray%25gray%25%25, %25silver%25silver%25%25, %25maroon%25maroon%25%25, %25green%25green%25%25, %25navy%25navy%25%25, %25purple%25purple%25%25  (shortcut for [@%25color=...%25@])%0a* Justification: [@%25center%25@] and [@%25right%25@]%0a* Images and boxes%0a** Floating left or right: [@%25rfloat%25@] and [@%25lfloat%25@]%0a** Framed items: [@%25frame%25@], [@%25rframe%25@], and [@%25lframe%25@]%0a** Thumbnail sizing: [@%25thumb%25@]%0a* Open link in new window: [@%25newwin%25@]  (shortcut for [@%25target=_blank%25@])%0a* Comments: [@%25comment%25@] (shortcut for [@%25display=none%25@])%0a* Ordered lists: [@%25decimal%25@], [@%25roman%25@], [@%25ROMAN%25@], [@%25alpha%25@], [@%25ALPHA%25@] (see also Cookbook:OutlineLists)%0a%0a[[#Examples]]%0a!! Examples%0a%0a[[Wiki Style Examples]] contains a number of examples of ways to use wikistyles in pages.%0a%0a[[#KnownIssues]]%0a!! Known Issues%0a* Percents in style definitions (like: [@%25block width=50%25 %25@]) require the use of "pct" instead of "%25".%0a* If you specify multiple values for an attribute, like @@border="2px solid blue"@@ make sure you place the values in quotes.%0a* Be sure to use lowercase letters for red-green-blue hex colors, [@%25color=#aa3333%25@] will work, [@%25color=#AA3333%25@] may not.%0a%0a[[#SeeAlso]]%0a!!See Also%0a* [[PmWiki/Custom Wiki Styles]] {PmWiki/CustomWikiStyles$:Summary}%0a* [[PmWiki:List Styles]]        {PmWiki/ListStyles$:Summary}%0a%0a>>faq%3c%3c [[#faq]]%0aQ: %0aA:%0a
time=1247528073