[Pmwiki-users] CSS layout in pmwiki-0.6
Patrick R. Michaud
pmichaud
Tue Jan 13 18:41:16 CST 2004
Hello all--this message is primarily to solicit your opinions, feedback,
and suggestions on the new CSS-based layout scheme that I'm developing
for release in pmwiki-0.6. I'm primarily wanting to get people's opinions
while there's time to make changes before an official 0.6 release is made.
Also, because browser interpretations for CSS varies quite a bit, I need
people to help me test the page layout under various browsers and let me
know of any quirks/problems they may observe. For now the test page is
at http://www.pmichaud.com/work/beta/pmwiki.php.
Also, I'm wanting to see how flexible the new layout scheme is, with
paritcular interest to seeing how difficult it might be to convert
existing sites' configurations to use the new scheme. So, if you're
interested in challenging me to duplicate your site's existing layout
in the new PmWiki layout scheme, send me your site address and I'll take
a crack at it. (Hint: this means you can get some free conversion help,
as well as have some certainty that 0.6 will work for you. :-)
It's worth noting that I'm expecting to bundle a "0.5 compatibility
layout" with pmwiki-0.6, which will restore the 0.5 layout for those who
want to upgrade to 0.6 when it's released but want to keep the same
layout configuration that they're already using.
What follows from here is a longish description of how the new layout
scheme is organized. If anything below gets too technical or doesn't make
any sense, feel free to (1) ask questions or (2) skip it as you see fit.
To start, the highlights of the new layout scheme are:
* CSS-based using external .css files
* Integrated support for left and right sidebars, including features
such as WebMenu
* Simplified control of components
* A reduced set of variables needed to customize PmWiki's output
Also, for the time being I've tried to clean up the HTML output that PmWiki
produces to make it a bit easier to view the HTML source and understand the
page structure. This comes at a slight cost to code readability, but
I figure it's a useful tradeoff to help others understand what's happening
in the layout and provide suggestions/recommendations for improving it.
Okay, onto the layout. PmWiki's new layout scheme divides a page into
six areas (I'm using ASCII art for now because it's easier than making
a bunch of gifs):
+---------------------------------------------------------+
| wikihead |
| |
+----------+----------------------------------+-----------+
| wikileft | wikititle | wikiright |
| | | |
| +----------------------------------+ |
| | wikitext | |
| | | |
| | | |
| | | |
| | | |
+----------+----------------------------------+-----------+
| wikifoot |
| |
+---------------------------------------------------------+
In addition, wikihead, wikititle, and wikifoot are all tables
subdivided into left, center, and right components, as in:
+---------------------------------------------------------+
| wikiheadl . wikiheadc . wikiheadr |
| . . |
+----------+----------------------------------+-----------+
| wikileft | wiki . wiki . wiki | wikiright |
| | titlel . titlec . titler | |
| +----------------------------------+ |
| | wikitext | |
| | | |
| | | |
| | | |
| | | |
+----------+----------------------------------+-----------+
| wikifootl . wikifootc . wikifootr |
| . . |
+---------------------------------------------------------+
Any of these panels can be empty. By default wikileft, wikiright,
wikiheadc, wikititlec, wikifootc, and wikifootr are all empty,
resulting in a display much like the traditional PmWiki layout:
+---------------------------------------------------------+
| wikiheadl . wikiheadr |
| . |
+---------------------------------------------------------+
| wikititlel . wikititler |
| . |
+---------------------------------------------------------+
| wikitext |
| |
| |
| |
| |
+---------------------------------------------------------+
| wikifootl |
| |
+---------------------------------------------------------+
By default each panel contains:
wikiheadl - site logo
wikiheadr - sitewide links such as SearchWiki, WikiHelp, RecentChanges
wikititlel - Group / Name of current page
wikititler - links to Edit Page and Page Revisions
wikitext - the text of the page
wikifootl - standard footer bottom links
The contents of each panel (except "wikitext") is stored in a
$PageLayoutFmt array, thus to add a copyright statement in the
bottom-right of the page, one simply places the following in local.php:
$PageLayoutFmt['wikifootr'] = 'Copyright 2004 Patrick R. Michaud';
To add a wikipage menu on the left side, similar to what is currently
done by the Cookbook.WebMenu recipe, one can simply do
$PageLayoutFmt['wikileft'] = 'wiki:Main.WebMenu';
which says that the 'wikileft' panel should display the contents of
the Main.WebMenu page. To clear the 'Edit Page' and 'Page Revisions' links
from the top of the page
$PageLayoutFmt['wikititler'] = '';
Of course, each of these variables can themselves be arrays or
contain arbitrary HTML for more complex layouts, and $-substitutions are
performed on them just like any other $Fmt variable.
Each panel element is also given an HTML 'id' attribute, so that the
element's size, color, fonts, etc. can be controlled through CSS. For
example, to cause the left panel to display with white text on a red
background, one would place the following in pub/css/local.css:
#wikileft { background-color:red; color:white; }
Nearly all of the other HTML element attributes have been removed from the
output code, meaning that the page layout is now largely controlled by CSS.
This is partially why I need some extensive browser testing to be done,
to see what does and doesn't work.
Anyway, that's pretty much where things sit for now. All comments,
feedback, and suggestions are *greatly* welcomed.
Pm
More information about the pmwiki-users
mailing list