version=pmwiki-2.2.74 ordered=1 urlencoded=1
author=Petko
charset=UTF-8
csum=clear already exists
name=PmWiki.WikiStyles
post= Save
rev=210
targets=PmWiki.WikiStyles,PmWiki.WikiWord,PmWiki.WikiStyleColors,PmWiki.Tables,PmWiki.TableDirectives,PmWiki.GroupHeaders,PmWiki.WikiAdministrator,PmWiki.LocalCustomizations,PmWiki.CustomWikiStyles,Cookbook.OutlineLists,PmWiki.WikiStyleExamples,PmWiki.TextFormattingRules,PmWiki.ListStyles,Cookbook.WikiStylesPlus
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*[[#Scope|Scope]]%0a*[[#blocks|In tables and directives]]%0a*[[#Attributes|Attributes]]%0a*[[#Styles|Enabling Styles]]%0a*[[#Shortcuts|Custom style shortcuts]]%0a*[[#predefined|Predefined Style Shortcuts]]%0a*[[#WikiStyleApply|Defining scope for other HTML elements]]%0a*[[#Examples|Examples]]%0a*[[#KnownIssues|Known Issues]]%0a*[[#SeeAlso|See Also]]%0a(:divend:)%0a(:Audience: authors (basic, advanced) :)%0a%0a[[#Basics]]%0a!! WikiStyle basics%0a%0aWikiStyles allow authors to modify the color and other styling attributes of the contents of a page.  %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[[#Attributes]]%0a!! WikiStyle attributes%0a%0aThe style attributes recognized within a WikiStyle specification are:%0a(:table:)%0a(:cellnr colspan=2:)%25center%25------------ CSS -------------%25%25%0a(:cell:)%25center%25--HTML--%25%25%0a(:cellnr:)%0a bgcolor%0a background-color%0a border'^[[#al|1]]^'%0a color%0a background-color%0a border%0a display%0a float%0a clear%0a font-size%0a font-family%0a font-weight%0a font-style%0a(:cell:)%0a height[[#fn|*]]%0a list-style%0a margin'^[[#al|1]]^'%0a padding'^[[#al|1]]^'%0a text-align%0a text-decoration%0a white-space%0a width[[#fn|*]] %0a(:cell:)%0a accesskey %0a align%0a class%0a hspace %0a id %0a target %0a rel %0a vspace %0a value%0a(:cellnr rowspan=3:)%0a Special: define, apply%0a(:tableend:)%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** [[#fn]] 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## [[#al]] margin, padding, and border can be suffixed by -left, -right, -top, and -bottom%0a%0a!! WikiStyles versus CSS styles%0aWikiStyles, as written in the wiki page, are not exactly CSS styles or CSS classes. WikiStyles allow authors to use both pre-defined by the administrator CSS classes, and to define new combinations of styles, without any need to edit/update local CSS files on the server.%0a%0aNote that PmWiki allows advanced authors to use of @@ class= @@ and @@ style= @@ in tables and division blocks, but these are raw HTML attributes, and not WikiStyles, knowledge of CSS is required to use them.%0a%0a!! Text color and font%0aThe most basic use of WikiStyles 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(:markup class=horiz:)%0aThis sentence contains %25bgcolor=green yellow%25 yellow text on a green background.%0a(:markupend:)%0a%0aSee [[(PmWiki:)WikiStyle Colors]] for more color help.%0a%0a!! Text justification%0aWikiStyles 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[[#Scope]]%0a!! Scope%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||class='tabtable' cellpadding=3 cellspacing=0 style="border:1px dotted blue;" rules=rows %0a||!apply attribute      ||!shortcut   ||!style applies to... ||%0a||[@%25apply=img ...%25@]   ||-           ||all images that ''follow'' until another style applied||%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%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 after the first line of the paragraph.%0a(:markupend:)%0a%0a(:markup class=horiz:)%0aHowever, this %25apply=p 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%0a[[#blocks]]%0a!! Larger blocks%0a%0aThe '''[@>>WikiStyle%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 %25red%25text%25%25%0a* lists%0a-> indented items%0a>>%3c%3c%0a(:markupend:)%0a%0aNote, the '''[@(:div style="..." class="...":)@]''' directive does not work the same way as [@>>WikiStyle%3c%3c@], it can only contain the regular HTML style and class attributes.%0a%0a%0a[[#styleclass]]%0a!! HTML "class" and "style" attributes for tables and divisions%0aWikiStyles are only the commands between [@%25...%25@] percent signs.%0a%0a[[PmWiki/Tables]], [[PmWiki/table directives]] and [=(:div:)=] division blocks allow advanced authors to incorporate the HTML/CSS attributes @@ class= @@ and @@ style=@@. %25red%25 Note that these attributes are not WikiStyles%25%25, knowledge of CSS is required to use them.%0a%0a(:markup class=horiz:)%0a(:table style="font-style:italic; color:green; 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%0aNote, the '''[@(:div style="..." class="...":)@]''' directive does not work the same way as [@>>style%3c%3c@], as mentioned above, it can only contain the HTML style and class attributes.%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 WikiStyles]]).%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%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 following line to the local/config.php file:%0a%0a->[@$WikiStyleCSS[] = 'line-height';@]%0a%0a%0a%0a[[#WikiStyleApply]]%0a!! Defining scope for other HTML elements%0aYou can add additional HTML elements to [@$WikiStyleApply@] to apply WikiStyles to other HTML elements. For example to allow styling on table rows, or anchor tags.%0a%0aTo apply styling to anchor tags, place in config.php:%0a->[@%0a$WikiStyleApply['link'] = 'a';%0a@]%0a%0aThen, you can apply a class or style to an anchor link:%0a(:markup class=horiz:) %0a%25apply=link red%25[[PmWiki.WikiStyles | test link]]%0a(:markupend:)%0a%0aOr, to apply an ID attribute to a table row TR, place in config.php:%0a->[@%0a$WikiStyleApply['row'] = 'tr';%0a@]%0a%0aThen, in an advanced table, you can have:%0a->[@%0a(:cellnr:) %25apply=row id=myid bgcolor=pink%25 cell content%0a@]%0a%0aAnd also in a simple table:%0a->[@%0a|| border=1%0a|| %25apply=row id=myrowid%25 1 || 2 || 3 || 4 ||%0a@]%0a%0aNote, the [=%25apply=row...%25=] WikiStyle should be on the same line as [@(:cellnr:)@].%0a%0a%0a[[#Examples]]%0a!! Examples%0a%0a[[WikiStyle 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". PmWiki will convert the "pct" into "%25" so that it becomes valid CSS.%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 WikiStyles]] {PmWiki/CustomWikiStyles$:Summary}%0a* [[PmWiki:List Styles]]        {PmWiki/ListStyles$:Summary}%0a* [[Cookbook:WikiStylesPlus | WikiStylesPlus]] {Cookbook.WikiStylesPlus$:Summary}
time=1427653912
