Grayden Poper – Interactive Designer

Pixelmess - Set Your Site Apart! Carbon Studio Using Weather Data to Change Your Website's Appearance through PHP and CSS This article is co-authored by David Walsh ofThe David Walsh Blog:: PHP, CSS, MooTools, and Everything Else UPDATE: This post was updated on April 30th, 2008 to account for a minor change in how Yahoo! was serving up data UPDATED DOWNLOAD Inspiration for this idea came from a comment by Andreas. Using a little magic and trickery (read: PHP and CSS), we can change the appearance of a website automatically based on the weather outside, in real time! Step 1: Designing your weather graphics Our example site changes header graphics as as well as an icon in the sidebar to describe the weather. Step 2: Retrieving the weather information Yahoo! The 5-digit number is your Zip Code and the "f" stands for "Fahrenheit" (change to "c" for "Celsius"). Once the regular expression returns the yweather element's text, we'll use str_replace() and strtolower to format the string into a representative CSS class. Step 3: Turning the weather information into an CSS class