CSS style theme switcher

CSS style theme switcher

What does this thing do?

6 times a day, the body will change to a different class name. In the css file CSSTimeSwitch.css will be defined what has to change.

- after 01:00 => class .night
- after 07:00 => class .morning
- after 11:00 => class .noon
- after 13:00 => class .afternoon
- after 17:00 => class .late-afternoon
- after 20:00 => class .evening

The class names are changed with a javascript, if javascript is disabled the general style will be used.

Read the full article and download the source files at read more.

How does it work

- Insert the javascript and css in your html page
- Define your styles in CSSTimeSwitch.css
- I have used the css gradients to change to background color
- Have fun

The result

By changing some css classes, your site will look different 6 times a day. You can make a sun going up in the morning, and disappearing in the evening. I my case, the background, H1 and a little clock are changing. I have based my idea on this website, but they change the stylesheets link, unlike me, I change the body ID.

I have tested it in:
- Firefox (mac en pc)
- IE 6
- IE 7
- Safari

View the result (change your clock to view the other styles)
Download the source files

This entry was posted in CSS by Sibran. Bookmark the permalink.

About Sibran

he Name Sibran is a boy’s name. The origin of the baby name Sibran is Breton with the meaning(s) depending on Gender/Origin being Breton- From Cyprus. Sibran has the following similar or variant Names: Sybran. I am a multimedia developer specialized in HTML/CSS, web 2.0, web standards, Google Custom Search, Search engine optimization. I like the blue water between the big islands with all his/her mysteries, it’s the only place in the world that is still unknown… and because that’s the only place where it never rains.

7 thoughts on “CSS style theme switcher

  1. Pingback: Mudar estilo do site dependendo do horário do dia

  2. Pingback: Best of April 2007 | Smashing Magazine

  3. Pingback: Web-Design Blog » Blog Archive » Best of April 2007

  4. Pingback: Jedineko » Blog Archive » Best of Smashing Magazine

  5. Pingback: links for 2007-05-17 « Mandarine

  6. Pingback: Tekjuice.com » Blog Archive » Best of April 2007

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>