Ess - Sibran Lens

CSS style theme switcher

Posted by Sibran - 25/04/07 at 04:04:06 pm

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

7 Comments »

RSS feed for comments on this post. TrackBack URI

1. [...] Para fazer ver um exemplo, fazer o download e acessar informações de como utilizar visite: http://blog.e-ss.be/2007/04/25/css-style-theme-switcher/ [...]

   Pingback by Mudar estilo do site dependendo do horário do dia — April 26, 2007 #

2. Thanks for the tool i will test it… as soon as possible THX

   Comment by Fred — April 28, 2007 #

3. [...] CSS style theme switcher 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. [...]

   Pingback by Best of April 2007 | Smashing Magazine — May 15, 2007 #

4. [...] CSS style theme switcher 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. [...]

   Pingback by Web-Design Blog » Blog Archive » Best of April 2007 — May 15, 2007 #

5. [...] but useful - particularly if you want to create a unique theme. -CSS-Techniques, (X)HTML, PHP Ex.CSS style theme switcher By changing some css classes, your site will look different 6 times a day. You can make a sun going [...]

   Pingback by Jedineko » Blog Archive » Best of Smashing Magazine — May 16, 2007 #

6. [...] CSS style theme switcher 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. (tags: css javascript tutorials) [...]

   Pingback by links for 2007-05-17 « Mandarine — May 17, 2007 #

7. [...] CSS style theme switcher 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. [...]

   Pingback by Tekjuice.com » Blog Archive » Best of April 2007 — May 29, 2007 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spread the word and save a piece of the planet

Search