[Pmwiki-users] CSS layout in pmwiki-0.6

Fri Jan 16 10:29:02 CST 2004

> -----Original Message-----
> From: Pmwiki-users-bounces at pmichaud.com
> [mailto:Pmwiki-users-bounces at pmichaud.com]On Behalf Of
> jasper at modwest.com
> Sent: 16 January 2004 15:42
> To: pmwiki-users at pmichaud.com
> Subject: Re: [Pmwiki-users] CSS layout in pmwiki-0.6
>
>
> Maybe it would be worth investigating if the entire layout can be done
> with <div> instead of tables? Maybe between the lot of us we can figure
> out how to make it work. This would make pmwiki friendly to screenreaders
> and handheld devices, with the appropriate stylesheets. Okay, it won't
> look "right" in a non-CSS browser but it will still be usable. If you
> want, I could try to put together a sample page to demonstrate.
>

My pmwiki site at http://yorkquakers.org.uk uses no tables for layout.  It
doesn't have the SearchWiki, PmWiki.RecentChanges, Edit Page or Page
Revisions links at the top although these could be easily added.

I managed to do this by using an idea from flexlayout to add the webmenu.
I had to add the following to local.php

----Extracts from local.php---------------------

##  Include webmenu
$HTMLStartFmt =
array(
'headers:',
&$HTMLDoctypeFmt,
&$HTMLTitleFmt,
&$HTMLHeaderFmt,
&$HTMLBodyFmt1,
"wiki:\$Group.WebMenu $DefaultGroup.WebMenu",
&$HTMLBodyFmt2);

##  Customise BodyFmt for WebMenu
$HTMLBodyFmt1 = "
</head>
<body>
<div id='links'>
";

$HTMLBodyFmt2 = "
</div>
<div id='wikibody'>
";

$HTTPHeaders[] = "";

$HTMLHeaderFmt = "
<link rel='stylesheet' title='Default Style'
href='http://www.yorkquakers.org.uk/wiki/styles.css' type='text/css'
media='screen' />
<link rel='alternate stylesheet' title='Shell'
href='http://www.yorkquakers.org.uk/wiki/shell-styles.css' type='text/css'
media='screen' />
<link rel='stylesheet' href='http://www.yorkquakers.org.uk/wiki/print.css'
type='text/css' media='print' />";

$PageHeaderFmt = "";

##  Customise Footer

$PageFooterFmt = "
<p id='bottom'>
<a class='pmtag' href='\$PageUrl?action=edit'>Edit Page</a>
<a class='pmtag' href='\$PageUrl?action=diff'>Page Revisions</a>
<a class='pmtag' href='\$ScriptUrl/\$Group/RecentChanges'>RecentChanges</a>
<a class='pmtag' href='\$ScriptUrl/$[PmWiki/WikiHelp]'>WikiHelp</a>
</p>
";

----End of extracts from local.php---------------------

As you can see I have an alternate style sheet (just to see if I can
really) and a separate print style sheet.

The standard style sheet is:

----styles.css---------------------

body {background: #FFFFF0; margin: 0; padding: 0; font-family: Verdana,
sans-serif;}

img{padding: 1ex;}

div#links {position: absolute; top: 12ex; left: 0.5em; width:
10.5em; font-size: 80%;}
div#links a {background: #ACE; display: block; text-align: center;
font-weight: bold;
padding: 0.25ex 0.5ex; margin: 0 0 2px; border-width: 0; text-decoration:
none;
color: #000000;}
div#links a:hover {background: #6BD;}

div#wikibody {position: absolute; top: 2ex; left: 9em; right: 0.5em; color:
#000000;
padding: 1em; border: 3px solid #FFCC66;}
div#wikibody p {margin: 0 1em 1em;}
div#wikibody h3 {margin-bottom: 0.25em;}
a, a:link, a:visited, div#wikibody a, div#wikibody a:link, div#wikibody
a:visited,
a.pmtag, a.pmtag:visited {color: #000000;}
a:link:hover, a:hover, a:visited:hover, div#wikibody a:hover, div#wikibody
a:visited:hover,
a.pmtag:hover, a.pmtag:visited:hover {color: #6BF;}

div#wikibody p#bottom{font-size: 70%;}

h1 {margin: -10px -9px 0.5em; padding: 15px 0 5px; text-align:
right; background: #ACE; color: #024; letter-spacing: 0.5em;
text-transform: capitalize; font-weight: bold; font-size: 180%;
vertical-align: middle; border-bottom: 5px solid #6BF;}
h2{color: #6BF; font-weight: bold; font-size: 110%;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
pre {font: 110% monospace;}

td {padding:0.5ex;}

li {padding:0 0 0.5em;}

----end of styles.css---------------------

I hope this is of some interest/help.

Edward