I’m still playing with new styles for the site. I find when I’m tired or want to think about a topic before I write on it that playing around with a new style is very soothing. After all, it’s very easy because all of the styles use the same basic layout and layout is the tough part of a web page design.
I thought I would write out the details of how all this works since the sheet switching seems to be working relatively well. I’m still tweaking, but that’s primarily because of my extensive use of photos and graphics.
I borrowed the dynamic stylesheet loading Javascript from Michael Hanscom, who got it from an A List Apart article. You can also download a copy here. After downloading, rename it to “styleswitcher.js”.
The ALA article has good coverage about adding the switcher code and how it works so I won’t repeat it. What I’ll talk about instead is what I’m doing with my own site, including using PHP to generate CSS.
First, all of the sites have the same basic layout. Once I found what I liked, I kept it and this makes site redesign more a matter of fun exploration than work.
The basic design is two columns, usually centered, each separated slightly from the other. Within the sidebar column on the left, several discrete sections containing images and things like Recent Comments and other lists are framed within another ’sidebar’ section that usually doesn’t have any background (Walker Evans differs).
I made no attempt to ‘contain’ these sidebar items, hence creating the effect a friend called the “floating clouds”. I also make no attempt to ensure that all the segments are exactly the same size, and spaced exactly the same. Clouds in nature are imprecise and chaotic and so are my sidebar clouds.
(Besides, I’m also a little chaotic so the design suits me. And it feels so good to drive the anal among you crazy with my irregularities.)
Now, to change the sidebar images with each stylesheet, what I did was create a set of nine DIV blocks, img1-img9, that have a different image as a background image, just as I use a background image for the entire page. From Fire & Ice, one of the image blocks looks as follows:
div.img1 {
background-image: URL(./look/noaa2sm.jpg);
width: 200px; height: 131px; margin: 0px; padding: 0px
}
The main page has the DIV blocks embedded into the sidebar, but if the matching DIV class is not included, nothing shows – as you’ll see in Old Bird. Otherwise, the image defined in the stylesheet is what shows.
Of course, this has some latency effects with some browsers and an embedded transparent GIF within the block would help overcome this – but the sidebar images I use differ in size from stylesheet to stylesheet. So, for the nonce, the slight latency issue remains.
You can access any of my style sheets just by opening my main page, getting the stylesheet names, and then saving the sheet. As for this page, well, a girl has to have some secrets, doesn’t she?
Seriously – you can access a copy of the main index page design here.
Finally, a new approach that I’m exploring now can be seen in a style called “Random Shot”. This style, still under development, is a combination of PHP and CSS that uses a random generator to access a database containing names of photos I have stored on my server, and change the image with each page load. You’ve seen random photos in my main page, but that’s a pure PHP page.
It’s relatively easy to combine CSS and PHP. To have the web server process the PHP in the CSS file, you need to name the file with a PHP extension instead of CSS (unless you’re playing around with your .htaccess file – more in a later writing). However, to ensure that a page is returned as a specific type to the browser, in this case CSS, include a PHP header function call as the first bit of code in the page and set the document type:
<?php
header(’Content-type: text/css’);
?>
Now, the page will be processed as PHP, but returned to the browser as CSS.
Include the link to this page as you would any other CSS page:
<link rel=”alternate stylesheet” media=”screen” title=”randomshots” href=”http://weblog.burningbird.net/photos.php” type=”text/css” />
At this time, I’m using a file with names of photos for my test stylesheet, but you can use a database or anything else you want:
<?php
// script is RandomImage, from Enter the Fog
$url = file(“http://burningbird,net/somefile.txt”);//generate a random number
srand((double)microtime() * 1000000);//change the number after the % to the number of images
//you have
$ct = count($url);
$rn = (rand()%$ct);//display the banner and link . This opens in a new window
$imgname = trim($url[$rn]);
printf(“background-image: URL(’%s’);”, $imgname);
?>
width: 200px; height: 130px; margin: 0px; padding: 0px
}
You can use PHP to do anything within your stylesheet. Think of the possibilities….
All you have to remember is that the more processing you put in, the slower the page loads. And if you dynamically generate the stylesheet, it won’t cache between access. However, unless the file is large or uses a lot of photos –ahem– you shouldn’t have any problems. If you use a lot of photos or processing though, there could be a noticable lag between when the page loads and the stylesheet kicks in.