Per long overdue requests from several people, I’ve finished up a WordPress 1.22 template featuring the ‘floating clouds’ design. Additionally, I created a separate package that just provides the files necessary to do the random background image. You can see the basic floating clouds design at the development site, at http://word122.forpoets.com. I’m not linking this directly, as I will be blowing this site away when finished all my development. You can copy the complete template, or just the background image portion.
To install the complete template, make a backup of your index.php and wp-comments.php file. Then download and unzip the gzip-tar file; no worries if you’re not into the Unix thing– Mac’s Stuffit and Winzip can handle the file format. Just make sure you save the file with Firefox, and not have the browser open it directly — this can be troublesome at times.
From the material I’ve provided, copy the files index.php and wp-comments.php, in addition to the ‘look’ subdirectory, to your main WordPress 1.22 directory. You’ll also want to copy the plugin file, recent-comments.php, to your WordPress plugin directory (it should be wp-content/plugins off the main WordPress installation).
Once the files are in place, go into your admin, and activate the plugin, “Get Recent Comments”. This provides the functionality for getting recent comments in the sidebar, which is not provided in WordPress 1.22.
(If you haven’t upgraded to 1.22, you should do this first — there are security fixes in 1.22 you’ll need.)
After that, open the main index.php file in your browser, and you should have a site that looks like the one mentioned earlier. You can then add items to the sidebar, remove items, and modify the colors and look as you want.
If you’re just interested in the background image functionality, access this file instead and again unzip it, either to your server or your local PC. The file contains several images, which I’ve provided just as test images until you get the background switcher going. After that, you can replace the images with your own. Just make sure to update the photos.txt file to reference your images, not the ones provided.
For each page you want to use the dynamic background, add a link to the clouds.php file, using the following, but changing it for your domain and URL:
<link rel=”stylesheet” media=”screen” href=”http://weblog.burningbird.net/look/clouds.php” type=”text/css” />
This link should follow any other stylesheet you’re using for your site. When you next access your site, you should start to see the dynamic imaging take effect. If not, check to make sure that the photos.txt and images are in place, and the image files are named correctly in the file.
If you want the image to appear somewhere other than the upper left corner, adjust the CSS in the clouds.php file to whatever you prefer — lower right, upper middle, whatever. Totally up to you.
I achieve the effect I do with my site by adding a vignette to a photograph, in addition to adding some transparency. When using Photoshop, this is achieved by using the Elliptical Marquee tool to create an oval selection on the photo, and then choosing Select and Feather to ’smudge’ the edges. I cut the image and create a new one, with the appropriate background color. I copy the cut image from the original photo, and then adjust the transparency of the pasted image.
However, you don’t have to have Photoshop for this. There are several free and shareware applications that will allow you to add vignetting and transparency to a photo.
Stay tuned for a 1.3 theme based on Floating Clouds. Note that this design will validate as transitional XHTML, as long as the text in the posts is valid.