is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Someone, somewhere may have come up with this before me — if they did, I never saw it, I swear — but I’m nevertheless proud of this little trick that I developed for version 7.0 of this site. It applies unique styles to individual articles from within Movable Type in a more or less automated way. This post is an example of the trick in action: a little bit of PHP, a little bit of Movable Type hackery and a little bit of CSS all conspire to apply a completely arbitrary variant on the standard, black and white Subtraction.com article. Translation: this page looks different from the others.
One Day Only! Special CSS Styles!
I had long been frustrated with my inability to apply ad hoc style rules to various posts that I’ve made to the site. I’m talking about pieces that have called for one-off treatments to text or graphics — content-specific formatting for informational tables, for instance, or an accommodation for a unique kind of image. These are problems that are easily solved with a new CSS rule, but I never felt comfortable with the idea of ‘polluting’ my basic style sheets with rules that may only get used once or twice.
Then it occurred to me that a little PHP, combined with some Movable Type tags, would solve this problem nicely. Following is a quick explanation of how it works — handily, it doubles as a case for why I’m uniquely under-qualified to ever do serious technical writing.
How It Works
The idea is that the PHP automatically checks for a style sheet with the same name as the permalink of the article — with a .css file extension of course. This style sheet just gets appended to the page’s <meta> header, and adds to or overrides rules included in the default and otherwise active CSS file
The name of this second style sheet is supplied by MT tags in the template which are automatically generated in the published article; I only need to be sure to manually name the style sheet correctly. If PHP finds the matching CSS file, it appends a <link> to the header of the page pointing to that style sheet.
To be honest, I’m no PHP expert, and I had to consult a friend even for this simple construction. He polished it off quickly and gave it to me for free, so I feel like I should ‘pay it forward,’ so to speak. Go nuts — I’m sure some of the more enterprising amongst you are going to come up with applications for this concept that will put me to shame. More power to you.
<?php
// check to see if a css file with the
// same name as the permalink exists,
// if so print a link to it
if (file_exists("<$MTEntryPermalink$>.css")) {
print '<link rel="stylesheet" type="text/css"
href="<$MTEntryPermalink$>.css" />'
;}
?>
I did it a bit differently — I tapped into the MT ‘keywords’ field, which I’m not using anyway, and set it up to be a binary variable. If there’s something in there, import ‘custom.css’ from the same path as the article. If there isn’t, don’t.
I’d show you examples, but for the fact they’re broken at the moment. Nice. I wonder when I did that? *grumble*
Brilliant. Firstly, I thought, well this will just break the flow of the site jumping from disparate page to page. Then I thought well magazines do this with every page and we seem able to handle that. All of the function is still present just a matter of the backdrop changing which is quite nice.
And, you’ve certainly bolstered my want to learn more about PHP.
I’ve noticed this effect on the Big Empty photoblog, where the background colour of each post is matched to a hue of the contained photo. Both implementations allow more creativity, and that’s a great thing!
WordPress has the ability to add custom meta fields to posts, and to output the contents of those fields to the template. So what you’ve done is possible in WordPress as well (and may have been done).
I *do* think it’s damn sexy though, so don’t worry about anybody else beating you to it. =]
Super useful concept for keeping the css-sheets clean!!
For sites where this wouldn’t be an uncommon thing to do, a solution to avoid having a bunch of extra style-sheets in your css folder would be to hold all of the extra styles in a single sheet, which PHP parses and selects the necessary styles based on the requested url.
That would have the drawback of adding extra processing, however, and I suppose if it’s used a lot that could tax the server… Just might have to give this a go!!
Bronwyn
I know we have a case of simultaneous art…Patrick Michaud, who writes PmWiki, wrote a little routine which lets a directive in the page content (or a group header) apply a stylesheet. It’s not quite as automagic — you have to specify the stylesheet — but it’s very similar. Cool, no?
It would be better if you @imported it, no? In theory if there’s more than one stylesheet imported, then the user may choose from them — multiple links equals alternate stylesheets. So to ensure that all stylesheets are in fact *used*, and not just available for use, you should @import the others.
Cboone: I hadn’t considered using @import, which betrays my only passing familiarity with the use of that rule. Your reasoning is sound; maybe I’ll make the tweak this weekend. I still have at least one more CSS tip sent in by helpful readers that I need to make.
Regarding PmWiki, Plone, WordPress et.al., as well as instances of prior art: thanks for the heads up, everyone who added these comments. I hope I was sufficiently deferential to the inevitability that this idea was already out there to not seem like I was taking complete credit for the concept. Anyway, my host provider has just started offering one-touch WordPress set up; this makes me want to give it a try even more.
Philippe: hey, that’s terrific! Let no one ever accuse TextPatternists of being slow on the uptake. By the way, it seems as if my first name is misspelled as “Koy” when it should be “Khoi.” If you can influence the author to make the correction before the documentation is finalized, I’d appreciate it. Of course, it’s not the first time someone has misspelled my name, so no worries.
CSS, meh. Object of interest right now are those Tanqueray canisters you have next to the fan. I’ve seen normal Tanqueray, Extra Special Tanqueray and all that, but never Tanqueray In A Desirable Presentation Can.
Micah: that’s exactly the technique I wanted to avoid, because it results in a slew of extra CSS rules that get used on only one page, but must be loaded by all pages in my site.
Mike Czepiel
First of all, your site is a pleasure to simply look at.
I deployed a site like this where certain subpages would require their own style. At the time I implemented it like so:
//loads up a specific css file
$cssFile = "$p.css";
if (file_exists("/home/novast3/public_html/
c/alt/". $cssFile))
echo '@import "/c/alt/'. $cssFile .'";';
I pull the value $p from the URL (part of some .htaccess rewrite trickery). It seemed like the easiest solution to the problem of managing lots of style accross a site with some potentially diverse demands.
I have noticed however that I invariably see in my logs plenty of requests for /c/alt/null.css, which obviously fail. Do you have the same problem? with your php? It’s not so much of a real problem as an annoyance, but an annoyance none the less.
I’m sure it’s just some issue with my php logic. as it does seem to be echoing the import statement…I’m just no sure why it would think null.css exists…
Mike, you’ve flown over the top of my non-PHP-expertise-havin’ head. Sorry. I can say that I don’t get those requests for “null.css” files, though, which is one elegant bonus of the method I use.
1) The CSS file gets cached
2) No PHP is needed.
3) It’s one less request from the server.
4) You can modify customizations or remove them later if you modify the site, without needing to go find those .css files.
Someone, somewhere may have come up with this before me — if they did, I never saw it, I swear — but I’m nevertheless proud of this little trick that I developed for
Wow, beautiful proof of concept. Great job.
I did it a bit differently — I tapped into the MT ‘keywords’ field, which I’m not using anyway, and set it up to be a binary variable. If there’s something in there, import ‘custom.css’ from the same path as the article. If there isn’t, don’t.
I’d show you examples, but for the fact they’re broken at the moment. Nice. I wonder when I did that? *grumble*
Brilliant. Firstly, I thought, well this will just break the flow of the site jumping from disparate page to page. Then I thought well magazines do this with every page and we seem able to handle that. All of the function is still present just a matter of the backdrop changing which is quite nice.
And, you’ve certainly bolstered my want to learn more about PHP.
Now, that is a nice idea. It probably could be implemented in other CMS (textpattern, wordpress). Time for playing a bit.
I’ve noticed this effect on the Big Empty photoblog, where the background colour of each post is matched to a hue of the contained photo. Both implementations allow more creativity, and that’s a great thing!
It’s a limitation that authors shoehorn their content into their templates, you can’t automate originality I guess.
FYI, Plone has had a similar concept for a couple of years already.
Not meaning to gloat or anything, but since you wondered about prior art. 🙂
Nice site you have, by the way – I like the minimalist b&w layout.
WordPress has the ability to add custom meta fields to posts, and to output the contents of those fields to the template. So what you’ve done is possible in WordPress as well (and may have been done).
I *do* think it’s damn sexy though, so don’t worry about anybody else beating you to it. =]
Super useful concept for keeping the css-sheets clean!!
For sites where this wouldn’t be an uncommon thing to do, a solution to avoid having a bunch of extra style-sheets in your css folder would be to hold all of the extra styles in a single sheet, which PHP parses and selects the necessary styles based on the requested url.
That would have the drawback of adding extra processing, however, and I suppose if it’s used a lot that could tax the server… Just might have to give this a go!!
I know we have a case of simultaneous art…Patrick Michaud, who writes PmWiki, wrote a little routine which lets a directive in the page content (or a group header) apply a stylesheet. It’s not quite as automagic — you have to specify the stylesheet — but it’s very similar. Cool, no?
Very cool.
ButЁ one thing:
It would be better if you @imported it, no? In theory if there’s more than one stylesheet imported, then the user may choose from them — multiple links equals alternate stylesheets. So to ensure that all stylesheets are in fact *used*, and not just available for use, you should @import the others.
A nit, picked.
Cboone: I hadn’t considered using @import, which betrays my only passing familiarity with the use of that rule. Your reasoning is sound; maybe I’ll make the tweak this weekend. I still have at least one more CSS tip sent in by helpful readers that I need to make.
Regarding PmWiki, Plone, WordPress et.al., as well as instances of prior art: thanks for the heads up, everyone who added these comments. I hope I was sufficiently deferential to the inevitability that this idea was already out there to not seem like I was taking complete credit for the concept. Anyway, my host provider has just started offering one-touch WordPress set up; this makes me want to give it a try even more.
@ cboone,
‘alternate styles’ will only be used as such if the stylesheet is labeled as such, and has a title.
If you view this page in Firefox, and go to the View menu, you’ll see that there is only one style available, despite the various stylesheets.
I posted about this very nice idea on the TextPattern forums; and there is already a plugin in the works.
Philippe: hey, that’s terrific! Let no one ever accuse TextPatternists of being slow on the uptake. By the way, it seems as if my first name is misspelled as “Koy” when it should be “Khoi.” If you can influence the author to make the correction before the documentation is finalized, I’d appreciate it. Of course, it’s not the first time someone has misspelled my name, so no worries.
Khoi wrote:
By the way, it seems as if my first name is misspelled as “Koy” when it should be “Khoi.”
Oooops, color me red…
Corrected on the Textpattern forums.
CSS, meh. Object of interest right now are those Tanqueray canisters you have next to the fan. I’ve seen normal Tanqueray, Extra Special Tanqueray and all that, but never Tanqueray In A Desirable Presentation Can.
Where’d you get it?
I use a mixture of classes with the body of the Individual Archive…
body class=”Individual “>
then in the main css for my site, i just add the following:
body.Individual.article_title P { color: red; }
and voilр! no extra files needed or PHP.
Micah: that’s exactly the technique I wanted to avoid, because it results in a slew of extra CSS rules that get used on only one page, but must be loaded by all pages in my site.
First of all, your site is a pleasure to simply look at.
I deployed a site like this where certain subpages would require their own style. At the time I implemented it like so:
//loads up a specific css file $cssFile = "$p.css"; if (file_exists("/home/novast3/public_html/ c/alt/". $cssFile)) echo '@import "/c/alt/'. $cssFile .'";';I pull the value $p from the URL (part of some .htaccess rewrite trickery). It seemed like the easiest solution to the problem of managing lots of style accross a site with some potentially diverse demands.
I have noticed however that I invariably see in my logs plenty of requests for /c/alt/null.css, which obviously fail. Do you have the same problem? with your php? It’s not so much of a real problem as an annoyance, but an annoyance none the less.
I’m sure it’s just some issue with my php logic. as it does seem to be echoing the import statement…I’m just no sure why it would think null.css exists…
Mike, you’ve flown over the top of my non-PHP-expertise-havin’ head. Sorry. I can say that I don’t get those requests for “null.css” files, though, which is one elegant bonus of the method I use.
Khoi
1) The CSS file gets cached
2) No PHP is needed.
3) It’s one less request from the server.
4) You can modify customizations or remove them later if you modify the site, without needing to go find those .css files.
Phillippe: You’re absolutely right: alternate stylesheets need to be labeled as such.
Perhaps I was thinking of what happens when you link in multiple titled stylesheets…
Or perhaps I was just wrong. 🙂