How to change your CSS styles based on the day of the week with Expression Engine

Feature image

The Double Rainbow Guy.

This site’s color scheme changes every day of the week thanks to the design’s flexibility. (Thanks, Monika!) For example, if you’re seeing this on a Thursday, the whole site is orange. If you come back 7 days in a row to see all the pretty colors, you’ll make my Google Analytics giddy as a schoolgirl.

How can you do the same thing with your Expression Engine site? Well, there many ways, but I’ll tell you about 2 of them that I used in developing this site.

Method 1: PHP variables in your CSS

My initial method was to incorporate some variables into my CSS by enabling PHP in my CSS template. This is easy when it’s managed through Expression Engine. You’ll need to have your CSS managed by Expression Engine and have the option to allow PHP turned on. It will be off by default.

Allow PHP in an Expression Engine template

(If you’re not using Expression Engine, you can still try this technique. See this piece at NetTuts on enabling PHP and Apache?s URL rewrite mod.)

This method worked fine when I was changing only one color value for each day. Here’s how I did it.

I had some PHP to find the day of the week:

$day = date("w"); // returns 0 for Sunday, 1 for Monday, etc.

To bug test my different CSS values, I would comment out this line and force $day to be equal to the day of the week I was testing.

I had an array of the colors for each day:

$colors = array("#fed701", "#0cf", "#fd1c15", "#02fcca", "#fe6d02", "#9900ff", "#85e200");

Then I defined the color by using those 2 pieces of data together:

$daycolor = $colors[$day];

I would then define a CSS color using a PHP echo statement:

color: <? echo $daycolor; ?>;

As I mentioned, this worked fine until Monika and I started reviewing each day’s color scheme and fine tuning it. Certain colors needed a darker or lighter gray in the side bar. Other colors needed to have 2 sets of primary colors to read properly. (You’ll see below I created a $sidecolors variable.) There were also lighter shades of the primary color to deal with. In addition there were various small graphics that changed on a daily basis, like the arrow in the circle next to the search field. Soon my variable definitions and the CSS became unmanageable. Here’s an excerpt:

<?php
	$day = date("w");
	$colors = array("#fed701", "#0cf", "#fd1c15", "#02fcca", "#fe6d02", "#9900ff", "#85e200");
	$sidecolors = array("#fed701", "#0cf", "#de1c16", "#02fcca", "#fe6d02", "#9900ff", "#85e200");
	$tenperccolors = array("#fffbe5", "#e5faff", "#ffe8e7", "#e5fffa", "#fff0e5", "#f5e5ff", "#f3fce5");
	$grays = array('#787a7a', '#787a7a', '#9b9c9c', '#787a7a', '#787a7a', '#9b9c9c', '#787a7a');
	$daycolor = $colors[$day];
	$daysidecolor = $sidecolors[$day];
	$dayshade = $tenperccolors[$day];
	$graycolor = $grays[$day];
?>

// excerpt of CSS

.hued {
	color: <? echo $daycolor; ?>;
}

.reversed {
	color: white;
	background-color: <? echo $daycolor; ?>;
}

#innerwrapper {
	background-color: <? echo $graycolor ?>;
}

This method did work but I found it became too messy for me to really keep updated easily. I use the excellent CSSEdit, from MacRabbit, to write CSS and as the PHP variables multiplied, it impacted that workflow significantly.

Method 2: Separate style sheets

That lead me to the current method I’m using which is having a separate style sheet for every day of the week and have the header in EE pick the appropriate one. Managing multiple style sheets is arguably just as big of a hassle as having to deal with the variables, but I started with my most complex style sheet, the one for Tuesday, and after it was perfect, I had a series of search and replace commands that would create the remainder of the style sheets.

I saved each day’s CSS out to files. They are not managed in EE anymore, although you could do this if you’d like. It may speed up your site a bit. The file names are siteStyle_day0.css, siteStyle_day1.css, etc. Remember, 0 equals Sunday when you use the PHP date function. (I could have minified these along with my ‘static’ CSS files, but I didn’t do that. Maybe I will when I’m in a tinkering mood.)

I have only one template for the <head> area on the entire site. I allow PHP in that template, just like I allowed PHP in the style sheet I mentioned in the first method of doing this. Here’s the line in that file that loads the CSS file:


This has the browser request the correct style sheet based on the day of the week. It’s easy to see how you could do this based on the month. Maybe October gets a Halloween themed CSS, for example. Maybe your site could go green just for Earth Day. Back in the pmachine days, I did a friend’s site who is a chef using a similar technique. The CSS changed based on the season. Boy, did I think I was cool. ;-)What do you think?

Comments on this post.

You could do the same without using PHP and using EE’s built in date tag.

<link type="text/css" rel="stylesheet" href="{site_url}styles/siteStyle_day{current_time format="%w"}"
By Justin Long on Jan 07 2011

Justin. Good call on the built-in date tags. I tend to use the PHP tags for no particular reason other than they come to mind more easily for me even though they have a very similar syntax.

By John Morton on Feb 01 2011

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Jazz history at the corner of 4th & Cooper Sq #nyc #jazz