CSS magic (was: Re: [Pmwiki-users] Creating Groups)

Patrick R. Michaud pmichaud
Wed Jan 19 20:16:16 CST 2005


On Wed, Jan 19, 2005 at 05:08:07PM -0500, Neil Herber wrote:
> At 2005-01-19  02:46 PM -0700, Patrick R. Michaud is rumored to have said:
> >   #sidebar { font-size:smaller; }
> >
> >You could do this by adding the line above to either
> >
> >   pub/skins/dropdown/dropdown.css
> >   pub/css/local.css
> 
> I did not realize that it was possible to override the CSS in a skin 
> without having to hack it to bits (that's what happens to the ones I 
> touch!!).
> 
> Patrick, could you please add a few lines to 
> http://www.pmwiki.org/wiki/Cookbook/Skins to describe how the CSS is 
> assembled for a page? 

It could probably go into SkinGuidelines or LayoutAdvanced, and
I need some help in formulating an appropriate text first.  We can
also decide now if the order that CSS rules are presented needs to
be altered from its present defaults.

CSS rules can come from any of the following sources:
   1. CSS rules in the $HTMLStylesFmt array (modules and cookbook recipes)
   2. <link> and <style> tags placed in $HTMLHeaderFmt by 
      site/page/group config.php entries and cookbook recipes
   3. <link> and <style> tags placed in $HTMLHeaderFmt by 
      skin customizations
   4. pub/css/local.css
   5. pub/css/$Group.css
   6. pub/css/$Group.$Name.css
   7. <link> and <style> tags specified in the skin's .tmpl file

By default, items 1-6 above occur in the order given above, and are placed
in the output at the point where <!--HeaderText--> appears in the .tmpl
file.  For item 7, the order (and thus priority) of <link> and <style> 
tags in the .tmpl file relative to 1-6 depends on where the skin author 
places them relative to <!--HeaderText-->.

For any CSS rules that have the same weight (i.e., importance and
specificity), the one that occurs latest in the HTML output always
wins.  So, for example, if a skin template says

   <link rel='stylesheet' type='text/css' href='$SkinDirUrl/myskin.css' />
   <!--HeaderText-->

then the rules specified in 1-6 above will override any equivalent-weight
rules from myskin.css.  Thus, an administrator could use pub/css/local.css
to override any of the defaults, whether they come from PmWiki, a cookbook
script, or a skin.  However, if the tags are in reverse sequence

   <!--HeaderText-->
   <link rel='stylesheet' type='text/css' href='$SkinDirUrl/myskin.css' />

then any rules given in the myskin.css stylesheet will override any
equivalent-weight rules from 1-6 above.  And, of course, the .tmpl
file can sandwich stylesheets around <!--HeaderText-->:

  <link rel='stylesheet' type='text/css' href='$SkinDirUrl/sheet-1.css' />
  <!--HeaderText-->
  <link rel='stylesheet' type='text/css' href='$SkinDirUrl/sheet-2.css' />

In this case, the administrator can easily override the settings in
sheet-1.css via the mechanisms listed in 1-6 above, and sheet-2.css can
override the administrator's settings.

The above glosses over a few details -- such as the fact that those
rare entries to $HTMLHeaderFmt by markup and action handlers will 
typically show up after item 6, and that it's possible for a local
customization (or skin or cookbook script) to completely change
the sequence to be something else, but this is how things "normally
work".

Is that a good start?  Where could the above use more clarity/explanation?

Pm



More information about the pmwiki-users mailing list