TWikiStyleSheets < Codev

Work in progress - this notice will be removed when i'm ready for you all to critique it :-).

Scope

This is a specification for adding style sheets in various ways to the TWiki core. It's based on ideas presented in: PreferencesAsStyleSheets, ChangeLinkColorForTopicOrWeb

How It Works

There are four mechanisms for associating styles in TWiki:

- As preferences on TWikiPreferences, WebPreferences.
- Using a %STYLESHEET(stylesheet.css)% macro as the first text on a page (to ensure the document is rendered (by the browser) using the stylesheet.
- Attaching a .css file to a page.
- Adding attributes to hand-entered html tags in a page's content (not recommended).

Preferences are coded on a preference page per the following BNF:

styledecl: "Style" tagspec "{" attributelist "}"
tagspec: tag[":"class]
tag: <An HTML tag name>
class: <An HTML class name - see anchor (a) for example below>
attributelist: attribute*
attribute: <An HTML attribute name>":"value";"

A lot of CSS syntax left out purposely so users aren't burdened with needing to know too much :-)

I believe the regex for this is:

^Style\w([a-zA-Z0-9:]*)\w\{([a-zA-Z-]*:\w*.;\w)*\}$
        |....tag......|    |..attribute.......|

The tagname and each attribute is parenthesized to return a distinct match, including the trailing ";" (and trailing whitespace, possibly not needing to be removed) (Note that attributes can be hyphenated per HTML/CSS spec.) Merely removing the "style" and any leading whitespace makes these legal style declarations.

Examples:

Style BODY {background: #3c3c2c; color: #ffcc00;  background: fancybg.gif;}
Style a:link {color: red;}
Style a:visited {color: yellow;}
Style a:hover {color: #ffcc00;}
Style a:active {color: #ff9966}
Style div {margin-top: 0px; margin-bottom: 0px;}
Style h1 {margin: 1px; color: yellow; text-shadow: 3px 3px 5px red;}
Style h2 {margin-top: 1px; margin-bottom: 1px; font-style: bold; text-indent: .25in; color: #ffcc00;}
Style h3 {width: 60%; background: #6c6c4c; margin-bottom: 1px; font-style: italic; text-indent: .5in; color: #ffcc00;}
Style hr {color: olive;}
Style p {margin-top: 0px; margin-bottom: 0px;)
Style table {border: 1; cellspacing: 5em; cellpadding: 5em; margin-bottom: 1px; margin-top 1px;}
Style ul {margin: 3px; text-indent: .75in}

A %STYLESHEET(file.css)% macro may be added to any page, but must be the first text in the content of a page (other then a preference page?). This is a regular TWiki macro that expands to:

<head>
... other head tags ...
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Adding an attachment with a .css extension to a page should make that the stylesheet for the page where the file is included.

Style Attributes can always be added by a user to any HTML tags they enter, but this should be discouraged (programatically?) since it hard codes the style into the document. Perhaps this might be useful at times though (as in using <font color="red"> to color text).

What Needs To Be Done

- Remove all style attributs from templates.
- Add css file generator (to wikistore.pm?)
- Create default style sheet(s)

-- DavidLeBlanc - 27 Mar 2001

Now that i'm out of work again (thanks Osama frown ), and i've got a 100% working Twiki at last, i'm going to reactivate this project using the 12/01/2001 release.

-- DavidLeBlanc - 20 Dec 2001

WebForm
TopicClassification	FeatureUnderConstruction

Topic revision: r4 - 2001-12-20 - DavidLeBlanc

Account
- Log In
- Register User

Edit
Attach

Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.