Orangescale.NET

May 01, 2007 / 12:00 am

Spring 2007 CSS Reboot

in Webdev

Dynamic header

Images used by stylesheet for the header area is managed by CSS. The information is derived from Weather.com. And it will display the weather condition of Jogjakarta, the city where I live now. So, if you open this site on 10 AM (GMT+7) and the weather is “mostly cloudly”, you will see different image when opening this site on 10 PM (GMT+7). See the picture below.

This mechanism was inspired by Dunstan’s panorama header (with some adjustments — of course). For the codings and modifications, Tharayudi and Yan Arif helped me with the PHP functions.

Archives page, search feature, and RSS

The journal archiving system is similar to what I had in my previous design. The “new” features is a pie chart to display the category archive comparison. This feature is based on Pie & Donuts Chart by amCharts.

In the archive page, you can find list of entry tags. But, for now, the entry tags do not give you all entries? It because Movable Type introduced the tag feature after I create this blog, and also because when I posted an entry (even the tag feature is ‘there’), I did not assign any tags. Too bad eh? If you want to search some spesific topics, there is a search featues here now. It will help you search old entries from my journal, bookmark section, and also blognotes.

If you want to take advantage of RSS feeds from certain blogs, I create something new here. There are many feeds now. For the category feeds, they will display ten latest entries. And all feeds will only display the entry excerpt.

Some other small changes

Here are some quick notes about some minor changes.

• Comment texts and stylesheet. The number of comments will decide which CSS selector should be used. It was a simple process, only creating some conditional tags. ;)
• Re-organizing uploaded files. I cleanup the image locations. Yeah, it was my mistake. Before, I uploaded some images to ‘unorganized folders’. Now, I have my own convention about where the images should be uploaded.
• Breadcrumbs for every page.

Summary

Personally, I am satisfied with my redesign. I found some challenges. And, when building the design, I created scratches on a paper, yes a real paper. Organizing the CSS selectors so that when modifying the design only by touching the stylesheet, I can do it easily.

And, congratulation to all of you — especially Indonesian CSS-based designers — who joined Spring 2007 Reboot organized by CSS Reboot.

If you like this design, you can cast your vote now. Anyway, I also submitted this reboot to Standard Reboot May 07.

Comments are still closed. I am searching for some possible errors.

Update: Thank you Kusaeni for your note about broken form action. Fixed now.

• May 1st, 2007 • # 12:00 am