Topic: Dynamic CSS Switching?

Is there a way to switch style sheets dynamically?  In other words - say I had sunset header on my blog (and just for fun, let's say that blog was powered by textpattern).  Is there a way to make that header change to a starry night or something automatically at 9pm?  And before you go there, I'm not talking about image rotation.  Because the sunset sheet would also contain a pretty sunset color scheme while the starry night sheet would have it's own color scheme.  Maybe this isn't possible and maybe it's really easy.  I've just never seen it and was thinking it might be cool.

"Everything is sweetened by risk." - Alexander Smith

Re: Dynamic CSS Switching?

Donovan: That might be possible, by writing your own PHP inclusion based on the time of day. If you're thinking about what Mike Davidson has www.mikeindustries.com/blog - I think his is based on a web-services weather app.

Give me liturgy or give me death.

Re: Dynamic CSS Switching?

That's sort of what I mean.  I'll have to check his site later tonight to see how it changes with the weather.  I'll take a look around.  I bet there's something on A List Apart.

"Everything is sweetened by risk." - Alexander Smith

Re: Dynamic CSS Switching?

Donovan: You could just write a series of if / then statements, based on the hour of the day. I'll try to make an example page later this week if I have time.

Give me liturgy or give me death.

Re: Dynamic CSS Switching?

I checked out Davidson's blog this morning.  The header img changes, but I'm talking about a complete thematic shift.  What you're talking about with the if/then statements sounds about right.  I've never used them before, but I'll mess around with'em this week if I get some time.

"Everything is sweetened by risk." - Alexander Smith

Re: Dynamic CSS Switching?

I would create the two different style sheets, say day.css and night.css, and then load the appropriate style sheet with the following:

<link rel="stylesheet" type="text/css" href="<? if (date('G') > 6 && date('G') < 21) echo "day"; else echo "night"; ?>.css" />

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Dynamic CSS Switching?

After thinking about it a bit more, a cleaner and easier to maintain solution would be to have the night.css file only have those things that apply to the late-night styling and use the following:

<link rel="stylesheet" type="text/css" href="day.css" />
<? if (date('G') < 7 || date('G') > 20) { ?><link rel="stylesheet" type="text/css" href="night.css" /><? } ?>

Sorry about writing before thinking.  It's been a long day already.

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Dynamic CSS Switching?

I stumbled across this solution over on the textpattern forum.

<link rel="stylesheet" href="<txp:php> $currenttime = date(H); if ($currenttime > 17 OR $currenttime < 5) echo 'night.css'; else echo 'day.css';</txp:php>" type="text/css" media="all" />

I don't know jack about php.  What do you guys think?

Last edited by Donovan (2006-02-08 15:10:18)

"Everything is sweetened by risk." - Alexander Smith

Re: Dynamic CSS Switching?

That is pretty much the same thing Tom (maspick) said. Try it out and see if it works and let us know what happened.

Re: Dynamic CSS Switching?

I was thinking of doing it that way, but instead of having the PHP in the link rel, I was going to have it like this...

<link rel="stylesheet" type="text/css" href="style/css-rotator.php" />

That way, you can easily add new CSS files, and only have to plug them into one PHP file, instead of changing the head of every document.

Give me liturgy or give me death.

Re: Dynamic CSS Switching?

Here's an example of what the contents of that PHP file could look like, substituting the hours of the day with CSS files. I'll do up a working demo webpage a little later tonight. I'm fairly excited about this idea, not sure why. smile

<?php

$currenttime = date(H);

	if ($currenttime == 1) {
		echo '1:00am';
	}
	elseif ($currenttime == 2) {
		echo '2:00am';
	}
	elseif ($currenttime == 3) {
		echo '3:00am';
	}
	elseif ($currenttime == 4) {
		echo '4:00am';
	}
	elseif ($currenttime == 5) {
		echo '5:00am';
	}
	elseif ($currenttime == 6) {
		echo '6:00am';
	}
	elseif ($currenttime == 7) {
		echo '7:00am';
	}
	elseif ($currenttime == 8) {
		echo '8:00am';
	}
	elseif ($currenttime == 9) {
		echo '9:00am';
	}
	elseif ($currenttime == 10) {
		echo '10:00am';
	}
	elseif ($currenttime == 11) {
		echo '11:00am';
	}
	elseif ($currenttime == 12) {
		echo '12:00pm';
	}
	elseif ($currenttime == 13) {
		echo '1:00pm';
	}
	elseif ($currenttime == 14) {
		echo '2:00pm';
	}
	elseif ($currenttime == 15) {
		echo '3:00pm';
	}
	elseif ($currenttime == 16) {
		echo '4:00pm';
	}
	elseif ($currenttime == 17) {
		echo '5:00pm';
	}
	elseif ($currenttime == 18) {
		echo '6:00pm';
	}
	elseif ($currenttime == 19) {
		echo '7:00pm';
	}
	elseif ($currenttime == 20) {
		echo '8:00pm';
	}
	elseif ($currenttime == 21) {
		echo '9:00pm';
	}
	elseif ($currenttime == 22) {
		echo '10:00pm';
	}
	elseif ($currenttime == 23) {
		echo '11:00pm';
	}
	else { echo '12:00am'; }
?>
Give me liturgy or give me death.

Re: Dynamic CSS Switching?

I'm glad you're excited.  It makes me feel like I've contributed something for once - even if it was just a prod wink

Now the question is: How could this be used purposefully?  Right now (in my mind) it's just really cool.  My first thought is - if it can work with time, it can work with anything.  But since I have yet to actually try it, maybe I'm getting ahead of myself.

Last edited by Donovan (2006-02-09 06:29:45)

"Everything is sweetened by risk." - Alexander Smith

Re: Dynamic CSS Switching?

Nathan -

>>but instead of having the PHP in the link rel, I was going to have it like this...That way, you can easily add new CSS files, and only have to plug them into one PHP file, instead of changing the head of every document.<<

Once we create the first page of a new design and have the elements that are universal to the site determined, I place those in header.inc and footer.inc files so that changes to things like main navigation, etc. only have to be touched in one place and are then adjusted universally for the site.  The actual pages, then, pull in the header & footer files via a PHP include placed inserted at the top and bottom of the document, like:  <? include("header.inc") ?>, which is what most CMS, blog, & other packages do with their proprietary content tags.  Makes for really quick maintenance when the client/pastor wants to add a new page that needs to be in the main navigation.

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Dynamic CSS Switching?

I'm just about done working up a demo and tutorial. It will be ready in a few hours.

Update: It's now ready, check it out.

http://sonspring.com/journal/time-sensitive-css

Last edited by Nathan Smith (2006-02-09 10:07:19)

Give me liturgy or give me death.

Re: Dynamic CSS Switching?

This is freakin awesome.. exactly what I need for a client who wants 4 different styles to change with the seasons. Looking at your tutorial and code I now understand how I can switch CSS based on minutes, hours and months. But how would you modify this script to switch CSS on a particular date? (In this case Dec 21, Mar 22, June 21 and Sep 21 all at midnight PST)

Re: Dynamic CSS Switching?

Ace of Dubs wrote:

But how would you modify this script to switch CSS on a particular date? (In this case Dec 21, Mar 22, June 21 and Sep 21 all at midnight PST)

Instead of looking at the time of day, you would look at the date range.  Altering the code example given:

<link rel="stylesheet" type="text/css" href="style/<?php

$today = date('nj');

	if ($today < 322 || $today > 1220) {
		echo 'winter';
	}
	elseif ($today > 321 && $today < 621) {
		echo 'spring';
	}
	elseif ($today > 620 && $today < 921) {
		echo 'summer';
	}

	else { echo 'fall'; }
?>.css" type="text/css" media="all" />
Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Dynamic CSS Switching?

If you are running PHP5, there are also two functions called date_sunrise and date_sunset, which give you the time of sunrise and time of sunset for a given day and location... I haven't played around with them, but they look like they would be helpful for the day / night css above and would work regardless of the time of year.

The difference between sacred work and secular work is not what we're doing but why we're doing it. - AW Tozer

Re: Dynamic CSS Switching?

That is some beautiful code maspick.. thank you!

Looking at your example I am left with one question... why did you use "||" instead of "&&" for winter? (Pardon my noobness)

Anyways I had no idea you could use date ranges in this fashion..mebbe I'm a little slow but couldnt find anything like that on php.net.
Man I really need to find a book that will give me the same "A-ha!" experience as CSS Mastery for PHP.

Re: Dynamic CSS Switching?

Ace: && means "and" while || means "or". Good question thought, since it's not as obvious as the double ampersand. More here...

http://www.w3schools.com/php/php_operators.asp

If you want an "aha" book for PHP, this is the one that did it for me...

http://apress.com/book/bookDisplay.html?bID=10017

Give me liturgy or give me death.

Re: Dynamic CSS Switching?

Cheers Nathan, will definitely be picking up that book!

Re: Dynamic CSS Switching?

Ace of Dubs wrote:

Looking at your example I am left with one question... why did you use "||" instead of "&&" for winter? (Pardon my noobness)

We was all noobs at one point, and sometimes I find myself feeling like one despite the time I've put in.  I wish there had been books like Nathan mentioned when I was starting to use PHP so long ago.  Would have made the learning curve a lot smaller.

Winter can be at the end of the year (12/21 thru 21/31) OR the beginning of the year (1/1 thru 3/21), but not both, hence the || (or) rather than && (and).

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Dynamic CSS Switching?

I wanted my CSS theme to change based on Day of the Week, but I wanted the User to be able to Change the current theme also. I finally figured it out; So I wanted to share my code, which obviously is partially code from above.

<?php
$tempCSS = $HTTP_GET_VARS["cssfile"];
if ($tempCSS != "") {
    $userCSS = $tempCSS;
    } else {
$today = date("D");
?>
    <link rel="stylesheet" type="text/css" href="<?php
    if ($today == "Sun" || $today == "Mon" || $today == "Tue") {
        $todaysCSS = "first.css";
        } elseif ($today == "Wed" || $today == "Thr") {
            $todaysCSS = "second.css";
            } elseif ($today == "Fri" || $today == "Sat") {
                $todaysCSS = "third.css";
                };               
    echo $todaysCSS; ?>" title="default" media="screen" />
<?php
};
?>

    <link rel="stylesheet" type="text/css" href="<?php echo $userCSS; ?>" title="default" media="screen" />

The buttons looked like this:

<a href="index.php?cssfile=first.css"><img src="images/firsttheme.jpg"></a>

Maybe somebody else will also find this useful!

Last edited by MooseDog (2006-11-25 19:21:54)