[Pmwiki-users] Modular configurable skin

Mon Jan 10 16:09:15 CST 2005

On Sat, Jan 08, 2005 at 11:58:03PM -0500, Bronwyn Boltwood wrote:
> I was playing with templates today, and got a really cool idea, but I
> can't implement it without help.
> 
> What if the new default skin for PmWiki2 was modular, that is, lots of
> little CSS files that got linked or imported according to what the
> site admin wanted, instead of a monolithic lump?  

It's a good idea, but unfortunately I think the base assumption is
invalid for a couple of reasons.  First, it assumes that we can come
up with a common HTML template that would work for a wide variety of
sites.  In my experience, most admins are pretty quick to create their
own, or modify an existing skin .tmpl file in ways that cannot be 
done solely through CSS.  It's interesting to go through the list
of PmWikiUsers and see how few of them chose to use a skin template
"as-is".

Second, it assumes that most of the CSS things an admin would be interested
in are "toggleable".  But a lot of things -- widths, colors, etc.
aren't on/off values (although I'll concede we could toggle palettes
of these items).

All that said, at present the easiest way to toggle CSS components is 
through a config.php or skin.php file, and I'm fairly sure that nearly
every admin will be editing that...

    $CSSToggles[] = array(
      # uncomment any of the below to enable
      # 'font-face-verdana.css',
      # 'font-face-times_new_roman.css',
      # 'font-face-h_georgia-b_verdana.css',
      # 'sidebar-orientation-left.css',
      # 'sidebar-orientation-right.css',
      );

    foreach($CSSToggles[] as $c) 
      $HTMLHeadersFmt[] = 
        "<link rel='stylesheet' type='text/css' href='\$SkinDirUrl/$c' />";

> I tested my idea to (ab)use <!--wiki:Group.Page--> to suck data from a
> wikipage into the template's <head> tag: [...]

Ick!  Don't go there -- it's just too messy.  Let's try again.  :-)

> So, if my modular default skin idea is to fly, I need your help -- I
> need a magic routine that puts the style information from the
> wikipages into the template correctly.  

This "magic routine" already exists -- it's called $HTMLHeadersFmt[].
Read on...

> I think they'd find this much easier to understand, and there's a lot
> less to mung:
> 
> OFF link "font-face-verdana.css"
> OFF link "font-face-times_new_roman.css"
> link "font-face-h_georgia-b_verdana.css"
> link "sidebar-orientation-left.css"
> OFF link "sidebar-orientation-right.css"

Answer #1:  If you want to toggle stylesheets in wiki pages, just do
it directly from skin.php:

   global $HTMLHeadersFmt;

   $spage = ReadPage('Skin.StyleConfig');
   preg_match_all('/^link "(.*?\.css)"/m', $spage['text'], $m);
   foreach($m[1] as $css) 
     $HTMLHeadersFmt[] = 
       "<link rel='stylesheet' type='text/css' href='\$SkinDirUrl/$css' />";

Answer #2:  If you want to toggle stylesheets in wiki pages, just do
it directly from the markup:

   Markup('stylesheet', 'directives', 
     '/\\(:(no)?stylesheet\\s+([-\\w.]+\\.css)\\s*:\\)/e',
     "('$1' == 'no') ? '' : 
       PZZ(\$GLOBALS['HTMLHeadersFmt'][] = 
         \"<link rel='stylesheet' type='text/css' href='\$SkinDirUrl/$2' />\"");

This adds (:stylesheet font-face-verdana.css:) and
(:nostylesheet font-face-verdana.css:) to the markup.  This can then be
placed in a GroupHeader, or if we want them processed globally, we'd use

   global $pagename;

   $spage = ReadPage('Skin.StyleConfig');
   MarkupToHTML($pagename, $spage['text']);

which would process the directives in Skin.StyleConfig but not actually
generate any output.

But the key to making *any* of this work would be to first come up
with an HTML template file that could adequately abstract out all of
the desired options into CSS -- somehow I don't think that's likely.
That's not to say it isn't worth trying.  :-)

Pm

P.S.:  To anticipate the people who will point me to csszengarden.com as
an example of all the things that can be done with CSS ... :-)

I absolutely adore the csszengarden -- it's amazing what people are
able to accomplish there.  But it's not real-world.  Many (most?) of the
designs that show up there would only work with a static HTML template
or content.  This is especially true of those designs that use CSS to
load in graphic images of the headings and text.  

It's absolutely true that it's important to use CSS to separate
the layout and styling of text from its structure and content, but this 
is not the same thing as saying that pages' structure and content never
change.  Indeed, one of the advantages of PmWiki is that, unlike HTML,
the layout *and* structure can be separated from the content, so that
it's possible to globally modify the structure and organization of 
pages without also having to edit the content portion of the pages.