Variations on a Theme – Part I

Variations on a ThemeSometimes you want to run some ideas past a client. The old-school way to do this involves sets of wireframes, produced with Photoshop (or GIMP if you’re a cheap-ass Open Source geek like me). But you’re a developer, right? Why bother with an image editor, only to do the work again, in HTML and CSS?

Plus things look, and feel, different on the web than in a picture. How will your wireframe (aka picture of a website) look on different browser sizes? How will mouseovers and dropdown menus look and feel? Really, the best way to present your client with options is to actually build them, and then send the client links to the variations you have created.

For instance, you might want to offer some font variations, or color variations. Or even display a borderless “wide-screen” look vs. a traditional boxy look.

The way I like to do this is to write a stylesheet for one variation, then create some short little stylesheet files that contain overrides to some specific aspects of the primary stylesheet.

For instance, I wrote a couple new stylesheets that call out different fonts for this website. Here is one that uses the Special Elite font from Google Fonts for headers and menu, instead of the default Sabon webfont. This assumes that you have loaded the Special Elite Google web font in the header:

style-special-elite.css:

.nav-menu li a, h1, h2, h3, h4, h5, h6, .special, .titlelink {
    font-family: 'Special Elite', cursive;
}

Or perhaps the client wants to see the background in hot pink. This assumes you have uploaded an image file named canvas-hot-pink.png to the images subdirectory of your theme:

style-hot-pink.css:

body {
    background: #ff4faa url('images/canvas-hot-pink.png') repeat;
}

Since css has the delightful attribute of overriding itself, the page obeys the last css directive it sees. Thus, if you load one of the above css files after the main one, these directives will take effect quite nicely!

This is all fine, but what you REALLY want is to send links to your client, each of which displays one or more of these theme variations.

In order to do this, you need to add a little code to your site header to load one or both of these new style sheets. This code assumes you are using WordPress, and writing to the header.php file in your theme.

This code in your header.php file gives you access to special links that load the css files when the url is augmented to pass php variables. If you are using WordPress, this code needs to go UNDER the wp_head directive. This forces your special css file or files to load after the default one.

Note the use of WordPress’s bloginfo( ‘stylesheet_directory’ ) function. This echos the path to your main theme directory, where its “style.css” file lives. It’s always a good idea to use this function rather than typing in the path by hand, because the function will still work if you move your site to a new url!

<?php if (isset($_GET['font']) ) { ?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style-<?php echo $_GET['font']; ?>.css">
?>

<?php if (isset($_GET['background']) ) { ?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style-<?php echo $_GET['background']; ?>.css">
?>

I have set up these two style variations for this site. You can see one or both of them at these urls:

http://wickedcleverlabs.com/?font=special-elite
http://wickedcleverlabs.com/?background=hot-pink
http://wickedcleverlabs.com/?font=special-elite&background=hot-pink

The above gets you partway to offering theme variations to a client, but not quite all the way. What about the internal links in the site, such as the menu and blog permalinks?

Stay tuned for the solution to this quandry!

Leave a Reply

Your email address will not be published. Required fields are marked *