[themes] Programmatic CSS

Mark Fredrickson mfredrickson at ppmns.org
Tue Dec 20 14:58:05 UTC 2005


Hello-

I have not done a lot of theme hacking, but it seems to me that generally a
theme is composed of static CSS and dynamically created (X)HTML. I am
wondering if it is also possible to create dynamic CSS.

For example, in the current system, it is easy to create zebra striping by
alternating classes on markup (say block divs). By alternating between
.zebra1 and .zebra2, a theme creator can highlight every other block on a
page. Of course, the classes themselves are defined in a static CSS file
that is fetched from the server.

I was recently looking at Eric Meyer's Color Blender:

http://www.meyerweb.com/eric/tools/color-blend/

And I thought: wouldn't it be cool to do this programmatically on the server
side? (To fade my blocks down the screen, for example.)

The obvious solution would be to tag each block with .fadeN class, where N
is updated for each block. After I made all the blocks, I could go back and
make N classes, each with a different color, faded from color1 to color2.

Is this possible? It requires the construction of a CSS file on the fly. I
could not just add the styles inline, because I don't know how many blocks
there are until the end (something of a halting problem).

It would be easy to link to 'dynamic.css' in the file (this can be done
statically), but how would I get the dynamic.css file properly served to the
user? Moreover, it might be better to code each .css file with a unique
identifier, so that the styles won't be improperly cached.

Another option might be to make an inline <style> ... </style> section and
stick it back in the DOM. Of the available options, this sounds like the
easiest.

In the end, it might be best to create something like the forms API to
manage dynamic CSS. It could be a very powerful feature, and easily
encapsulated into a few functions (add_css(), render_css(), etc):

<?php
    $css['classname1']['classname2'] = array( 'color' => '#12AB00',
'text-align' => 'left' .... );

// equivalent to 
//.classname1 .classname2 {color: #12AB00; text-aling: left;}

    
    Add_css($css);
?php>

Thoughts, suggestions?

Mark Fredrickson
E-Advocacy Manager
Planned Parenthood Minnesota, North Dakota, South Dakota
1200 Lagoon Ave.
Minneapolis, MN 55408
Ph: 612.821.6154
Fax: 612.825.3522
Email: mfredrickson at ppmns.org

Are you a member of the Action Network?
http://www.ppaction.org/ppmsd/join.tcl
 




More information about the themes mailing list