This plugin lets you add CSS style attributes to your pages.
See
StylePluginDetails for the detailed description and actual examples.
Plugin settings are stored as preferences variables. To reference
a plugin setting write
%<plugin>_<setting>%, i.e.
%EMPTYPLUGIN_SHORTDESCRIPTION%
- Security
- One line description, is shown in the TextFormattingRules topic:
- Set SHORTDESCRIPTION = A TWiki notation for adding css style class references with span and div tags
- Debug plugin: (See output in
data/debug.txt)
- Disable styles for non-rendering skins
- site styles
- Set SITESTYLES = .minilink { font-size:smaller; } .webref { font-size:larger; font-weight:bold; } .author, .BAuthor {font-weight:bold; font-style:normal;} .booktitle, .BTitle {font-style:normal; text-decoration:none;font-weight:bold;} .publisher, .BPublisher { font-style:italic; } .note {color:green; font-style:italic; } .note:before {display:inline; content: "Note: "; } .new {font-weight:bold; color:red; } .deprecated {text-decoration:line-through; color:gray; } .comment {font-style:italic; background-color: #CCFFCC; } .ebook {width:6in; text-align:justify;} .super {vertical-align:super; font-size:smaller;} .sub {vertical-align:sub; font-size:smaller;} .article { padding-left:10px;padding-right:10px; width:6in; text-align:justify; } .pullquote { border-left:1px;border-right:1px;border-color:black;border-style:solid; border-top:0px;border-bottom:0px; padding-left:10px;padding-right:10px; margin-left:10px; font-style:italic; } .sidebar { background-color:white; border-width:2px; margin-left:4px; border-color:black;border-style:solid; padding:3px; padding-right:5px; position:relative;float:right; width:230px; font-size:smaller;} .leftsidebar { background-color:white; border-width:2px; margin-right:4px; border-color:black;border-style:solid; padding:3px; padding-right:5px; position:relative;float:left; width:260px; font-size:smaller;} .question {font-weight:bold; } .answer {font-style:italic; } abbr, acronym, .help { border-bottom: 1px dotted #333; cursor: help; } DT {font-weight:bold;text-decoration:underline;margin-left:10px; } .intro {font-weight:bold;font-style:italic;margin-left:30px;} TH {text-align: center; font-weight: bold; background-color:#eeeeee; vertical-align: top; } TD {vertical-align: top; } TABLE { border-width: 1; } .hide {position:absolute; width:1px;visibility:hidden; height:1px;} .TOC { border-width:2px; border-color:black;border-style:outset; -moz-border-radius: 5px 5px 5px 5px;} .TOC:before {content:"Table of Contents";font-weight:bold;} .submitButton {-moz-border-radius: 10px 10px 10px 10px;} .widget {-moz-border-radius: 10px 10px 10px 10px; } .slidetitle {font-size:x-large; font-weight: bold; color:white;} .slidetext, .slidetext LI {font-size:large; font-weight:bold; } .slidecopyright {font-size: smaller; } .slideindex {font-size:smaller;} .blogrollfolder {font-weight: bold;} .blogrollitem {font-size:smaller;}
Why is this useful? Well, there are times when you want a consistent look and feel for certain types of items. For example, if you have a list or table, you might want certain fields to have a certain appearance. At
DaleBookList I have a list of books and authors, with some publishers. Here's what a typical entry looks like :
- Programming Ruby by Andrew Hunt and David Thomas, Addison-Wesley, 2001
If the plugin is installed, and you have defined the style classes for 'booktitle', 'author', and 'publisher', the list item looks good. If you have the plugin installed, but don't have the style classes defined, then the list item looks, well, normal. If you don't have the plugin installed then you see all the parentheses and style names.
More generally, the style plugin lets you get away from the "let's make this bold and that italic" kind of formatting. Instead you can focus on semantic labelling of content and let the css stylesheet take care of the presentation.
Use "\n---[.yourstylename ... \n---]"
This will produce
<div class=yourstylename> ... </div>
Use "((yourstylename)(a chunk o' text))
This will produce
<span class=yourstylename> a chunk o' text</span>
Use ".yourstylename\nyour text"
This will produce
<p class=yourstylename> your text
Use '\n---"( your quoted material \n---")
This will produce
<blockquote>your quoted material</blockquote>
For example:
((acronym)(CSS)(Cascading Style Sheet))
This will produce
<acronym title="Cascading Style Sheet">CSS</acronym>
((bookcover)(0070382034))
Produces :
- Copy SylePlugin.pm to twiki/lib/TWiki/Plugins
Related Topics: TWikiPreferences,
TWikiPlugins,
DefaultPlugin
--
DaleBrayden - 26 Dec 2002
Books RSS
