Stylehack

I frequently have scatterbrained ideas, some of which I can bludgeon into working and some not. Early in 2004 I began mulling over the concept of providing my web hosting clients with a very simple method of ‘customizing’ a simple, standards-compliant web template using CSS — without them having to know the first thing about CSS. Working by my usual credo of not ‘recreating the wheel’, I went in search of a script… Open Source or Commercial, either would work. There are a lot of nice packages out there but none were as basic as I wanted. A blog or CMS system is overkill for what I have in mind; its beyond the skill level of my target user to maintain (let alone learn), and therefore more than I want to support. Did I say I will be offering this for free or close-to-free for my hosting clients? What’s a girl to do? Create my own solution! Basically, a simple input form available via the cPanel that will allow them to change some basic CSS styling. Most importantly, it needs to be reallllllly simple… for me! Think: create once and forget about it. Think: require as little effort put into the creation process as possible. Always keeping in mind that I am not a programmer by even the most generous definition… just a fiddler. After sending out all 3 brain cells to find an idea (aka sleeping on it), one brave cell straggled back in with an excited glow… Dynamic CSS! As in “using variables to assign values to attributes”. Oh boy! Surely there is info on the web I can snarf up and use to make this happen. (Snarf being “use to educate myself”.) Well, if there ~is~ I sure couldn’t find it. I’m consider myself the Google Queen, but no matter what I searched I couldn’t find a discussion addressing this topic. What I did find was an old thread somewhere that said “Can’t be done; even if it could it shouldn’t be done [sic]“. Tsk tsk. That’s like putting a piece of raw antelope on the counter and telling my cat to leave it alone. Yeah, that’ll deter her. [It should be noted here that I recently stumbled across an entry on Dunstan's blog that related to using dynamic CSS, but it wasn't exactly from the direction I was considering. It also struck me as too convoluted, which probably means it was way over my head. Youngsters nowadays! I also recently noticed a blog, maybe TextPattern?, that uses variables to declare some styles; again, it isn't doing what I am talking about either, it simply echos some variables as inline styles in the templates.] Simply put, in my mind DYNAMIC CSS is nothing more than PARSEABLE CSS. There are three ways to achieve this goal: 1. Give the CSS stylesheet an .shtml extension; 2. Give the CSS stylesheet a .php extension; 3. Instruct the server to parse files with a .css extension. SHTML Extension A CSS stylesheet given an SHTML extension can contain X/SSI statements (as in “declaring variables” and echoing them in the styles declarations) and/or call includes (as in putting the variable declarations in an external file). If the CSS stylesheet calls an include that file must be given an SHTML extension IF it contains X/SSI statements (for instance, variable declarations). If the file being called does not need to be parsed, it can have whatever extension is applicable to that file. For instance, if you don’t need to hide styles from an older browser you could put an SSI include into this CSS stylesheet and bring in other styles that way. This CSS file serves up properly whether the web page calling it is HTML, SHTML or PHP. PHP Extension A CSS stylesheet given a PHP extension can contain whatever PHP statements you like, though for purposes of simple style changes it would be limited to declaring variables and using them. As with the SHTML version, you can include external files. If the CSS stylesheet calls an include that file must be given a PHP extension IF it contains PHP statements (for instance, variable declarations). If the file being called does not need to be parsed, it can have whatever extension is applicable to that file. For instance, if you don’t need to hide styles from an older browser you could put a PHP include into this CSS stylesheet and bring in other styles that way. This CSS file serves up properly whether the web page calling it is PHP, HTML or SHTML. Parseable CSS By using an AddHandler directive in .htaccess you can tell the server to parse your CSS files just like it does SHTML or PHP files. A Parsed CSS file works exactly as one give an SHTML extension insofar as it can use X/SSI as described above. However, it accepts includes with both an SHTML extension AND a CSS extension in terms of server parsing. Like the other methods of creating dynamic CSS a parsed CSS file is served up properly via HTML, SHTML and PHP files. Pros/Cons Naysayers might claim “This will cause the page to load slowly… think if the drain on the server’s resources… the sky is falling, the sky is falling!”. I think not. If your stylesheet is that large it needs some rethinking anyway! Your site coding probably needs some tightening up, too. The extra characters added to a CSS file to allow the use of variables should not have a deliterious impact on your server or the speed at which your site is served any more than using a full PHP-driven site does. If you server is so overloaded that it ~does~ happen… well, you need a new host. Say… Web-o-Mat.net eh? “-) The one thing I don’t like about the X/SSI version are the empty lines that end up at the top of your CSS file when someone views it in a browser, but that’s a livable drawback to my mind. I do think the more elegant methods are the PHP or Parseable CSS solutions. Unless someone can show me that any of these options really ~do~ cause the sky to fall, I think they all are pretty handy for slapping in some very easy functionality in terms of allowing a non-web coder to change CSS styles on the fly. Not to mention that it opens up some very interesting possibilities for someone who is comfortable with PHP or X/SSI. As I fiddle with this more, I’ll try to remember to post what I’m doing here at Stylehack. At the rate I’m going, that will be in late 2007. (rolling eyes wildly) The remainder of this article is nothing more than 3 exercises demonstrating how to use each of these methods.

… is I wish I would have finished documenting all the “minor” hacks I made to WordPress 1.2.1. Big news today… WordPress 1.2.2 was released to fix bugs, security issues, whatever. For more info, visit the Wordpress wiki to read the change log. The upgrade actually went smooth as silk and didn’t actually take that long — I spent more time figuring out what I had modified and what files were related to plugins rather than WP. A couple of points I stumbled across during this upgrade:

1. If you follow the phpMyAdmin MySQL database backup instructions on the New Doc Site there are a few differences from the version that I used. I used phpMyAdmin 2.6.0-pl3 and discovered that you HAVE to tell it you want it to create a zip file (and give it a name preceding the default ‘_db_’ that is provided) or all you get is the text version of the file displayed within phpMyAdmin. Of course you can always select all, copy and paste into a text editor, etc. but might if you have a large database that may not work well for you.
    
   
2. If you’re using the subscribe-to-comments plugin by Jennifer @ ScriptyGoddess it threw an error that prevented me from running the upgrade script. I can’t say if this was something I had done or if it is something new and exciting related to this new release of WP, but it was easy enough fix.. I deleted the plugin, ran the upgrade, added the plugin back in and it seems to work fine. Well, so far anyway. “-) Dont’ forget to reactivate it.

Update 12.19.04: Ok I can now safely say the error I got when updating re the subscription plugin was both something I did and something I didn’t… I did not read any comments on the ScriptyGoddess site prior to the release of this new update, thinking there wouldn’t be anything about this particular upgrade problem there… and I was wrong. So in that regard, I didn’t create any problem — it was already a known upgrade snafu. FYI, you need to either deactivate the plugin before upgrading or rename the ‘maybe_add_column’ function (temporarily?) or delete it like I did and upload it again after upgrading.

There’s that other big news item too… at least to me: the new documentation site for WP is up as a soft launch. It looks GREAT! Kudos to everyone involved in WP, the existing Wiki and this new site.

A common frustration for those wanting to use freeware CGI/PL scripts on their site (and lacking programming expertise themselves) is that they are not XHTML-compliant due to their age… there ~was~ no XHTML in practice back in the dawn of time. Here’s an article I wrote with step-by-step instructions on how to modify a specific Perl calendar script so that it validates. Clever readers will be able to use it as a launching pad for modifying other scripts that are destroying their validation results. The article contains links to the original script site/author as well as copies of the modified script. It also briefly touches on how to install the particular script, call it in a web page via SSI include and style it for fun & glory all around. “-) Article: Modifying the FTLS Calendar Script for XHTML Compliance (Dec 2004) http://www.stylehack.com/tutorials/xhtml_calendar.shtml Enjoy! And let me know if I messed up anywhere. “-)

Finally… no more doctor bills! I found this handy dandy diagnostic tool online, and it even includes treatment info. You absolutely can’t go wrong with the Dr. Unheimlich’s Disease Registry. Strangely enough, most of the diseases everyone I know has are actually named after the “bearer”. “-) I ran thru daHens: Farron, Liann, debbieT and Butzi… as well as our “owners” Emma, Tchai, Deben, Jack and Penny. Every single one was a hoot, well except for mine! Mine was boring and dull. sigh. For Emma…

Disease: Emma’s Disorder Cause: The wrong type of snow Symptoms: Gurgling, chest pain, mild coordination problems Cure: Drink lots of water  

Mine…

Disease: Becky’s Disease Cause: Natural sign of ageing Symptoms: Bladder pain, vague paranoia, hypochondria Cure: Fresh air  

Why oh why, she moans, is Becky’s Disease so boring???? Go check out your own health! Dr. Unheimlich’s Disease Registry is courtesy of The Surrealist OMG! I have to go right back there and find out what my SPAMMER NAME is!!! “-) [It's Hutch T. Antenna. Only slightly better than Becky's Disease. sigh. I feel slightly picked on!]