CSSLayout
<< | Cookbook-V1 | >>
Note: The recipes here are for PmWiki versions 0.6 and 1.0 only. For PmWiki 2.0 recipes, see Cookbook.
0.6 Information
Most of the functionality that this script provides is available in 0.6 of PmWiki. Because of this I'm really not planning to port this script to the newer version.
Goal
Provide a flexible presentation using CSS
Solution
Include a variety of stylesheets into the header of each page. Divide the body of the document in to a series of div tags that each have their own unique id. Use these ids to define the behaviour of the web page.
Files
Installation
- Put Attach:csslayout.php in your local directory.
- Unzip Attach:csslayoutfiles.zip and place the resulting folder named public in your local directory as well.
- Add include_once("local/csslayout.php"); to your local.php file.
- You'll probably want to create a Main.WebMenu page in your wiki that looks something like: *[[Main.SearchWiki Search]] *[[RecentChanges Group Changes]] *[[$Edit Edit Page]] *[[$Diff Page Revisions]] *[[$Theme]]
Configuration
There are a few variables that you can add to your local.php to change the behaviour of this script.
- $ThemeEnable, Default is 1, setting this to 0 will turn off the theme system leaving only the $BaseCSS $Group.css $Group.$Title.css and the print.css stylesheets.
- $BaseCSS, Default is "wiki.css" This css is applied to all pages
- $BaseCSSDir, Default is "/local/public/css/" This is the directory that holds all the css files.
- $ThemeDefault, Default is "default.css" default theme if themes are enabled.
If themes are enabled it also adds the special markup [[$Theme]] that produces a drop down box listing all of the styles avalible.
CSS is defined by a series of stylesheets that are included in each page. They are included in this order:
- the default css for the entire site (public/css/wiki.css)
- the stylesheet used if you have themes enabled (public/css/themes/*.css)
- The group stylesheet (public/css/groups/$group.css)
- The page stylesheet (public/css/groups/$group.$title.css)
There is also a print.css (public/css/print.css) that is the only css that affects how the page prints out. Thus you can make sure that every page on the site prints out in a clear readable format.
Usage
The goal of this addon is to make it as easy as possible to use CSS, and only CSS to shape the layout. To to this it uses a collection of div tags to seperate and define parts of the document. There is an id for header, menu, main, and footer. See the included stylesheets for examples of how to use this.
See Also
FlexLayout, ExternalCSS, PrintablePage
History
Second Release - 09-26-03 - code cleanup
First Release
Comments, Bugs
Still working on full webmenu compatiblity. I'm not too sure how well this addon plays with others. It does a fair bit of reorganizing of page layouts and this may adversly affect other scripts. I'm probably going to work to clean this up as much as possible and add a function to add new divs to pages.
Nice, but I have problems using it with wiki 0.5.20 - appearance is fine, but I cannot edit any page anymore (edit the form, it 'snaps' back to the original text)! Also in IE, the menu box overlays the rest of the page - it isn't indented.
- update: upgraded my PmWiki to 0.5.25 and CSSLayout started working!! fantastic. Anyone got any more themes?
I've done some tweaking to the default css theme, thank you for all the work put into this module. I found a strange behaviour with the first and second paragraphs sometimes not being properly positioned - try PmWiki.WikiWikiWeb in a csslayout-enabled PmWiki to see this.
I found that commenting out
p,h1,pre { margin:0px 10px 10px 10px; }
from style.css seemed to solve the problem, but I don't understand why.
One other thing I'm still trying to figure out is why I can't get the formatting I want into the text of the WebMenu, it doesn't seem to parse the * characters into making a bulleted list, and keeps the font monospace.
(SS, 2004/01/05)
An argument for a /local/public directory
Since I was including several file types and a bit of a directory structure it seemed more reasonable to create a directory that was accesible from a web browser but located within the local directory. This avoids having to make a list of exceptions in the .htaccess file and makes it clear which files are public and which are not. I really think there should be some place to put these kinds of files (web accesible local addtions) in the base distribution. pmwiki-2.3.32 -- Last modified by {{}}?