Automating Themed Logo Changes by Season
October 18, 2010 Posted by Tyler CruzWe’re getting close to Halloween, which means it’s time for me to switch my logo mascot over to my Halloween costume, and this year, I’ve decided to dress it up as a fearsome ninja with a tiny Mini Katana.
I have several different versions of my logo for various seasons. For example, I have a Halloween version, a Christmas version. I also have a poker version (from when I was an active poker player), and a standing up version. I may even get a Thanksgiving one soon.
Having specially custom themed logos for each season is really cool, but it also means that I have to remember to replace the logo at the start and end of each season. This is not really difficult to do, but it does takes time and is a bit of an annoyance. Also, I can sometimes forget to change the logo for a while, and having a Christmas logo up in February can be a bit embarrassing.
In a continued effort to save time and automated repeated processes anywhere I can, I came up with the simple yet great idea to have my custom logos change automatically depending on the season.
By doing this, I not only eliminate the hassle of having to edit my CSS at the beginning and end of each season, but I also get to specify the exact date range that my logos will appear, thus eliminating any irrelevant seasonal images.
In fact, due to the way my blog’s design is coded, my logo is actually split into 3 separate images. This means that I have 3 separate split-images for each themed logo, and each would have to be changed whenever I updated my logo.
It’s not a huge deal, but it did make updating my logo all that more cumbersome.
Fortunately, I was able to completely automate this process and now my logo changes completely automatically depending on the season. From October 15th to November 1st it will show my Halloween logo, from December 5th to December 31st it will show my Christmas logo, and the rest of the year it will show my default logo.
How to Automatically Change Your Logo by Season
This post would be rather annoying if I didn’t share how I did it, so here’s what I did:
For the main PHP code, I used and modified various PHP examples from a variety of different sources I found on Google.
In the end, this is what I came up with:
<?php
// ——————— Automatic Logo Season Changer ———————-
date_default_timezone_set(‘America/Vancouver’); // Your local or base time zone.$today = strtotime(date(‘Y-m-d’)); // Don’t change. This will grab the date automatically.
// Halloween Range
$halloween_start = strtotime(date(‘Y’) . ‘-10-15’);
$halloween_end = strtotime(date(‘Y’) . ‘-11-01’);// Christmas Range
$christmas_start = strtotime(date(‘Y’) . ‘-12-5’);
$christmas_end = strtotime((date(‘Y’)+1) . ‘-12-31′);if($today >= $halloween_start && $today <= $halloween_end) $season=’halloween’;
elseif($today >= $christmas_start && $today <= $christmas_end) $season=’xmas’;
else $season=’default’;
// ——————— Automatic Logo Season Changer ———————-
?>
(Note that if you copy and paste this that you will need to replace the apostrophes as they get converted to a different format when I post them on my blog. If you don’t do this you’ll get many errors.)
You will need to modify that a bit to fit your personal needs, but that is the main code that you need. Place this at the top of your header.php script in WordPress.
To change your logo, you will want to use something like the following:
<img src=”logo_<?php echo $season; ?>.jpg”>
Being sure to name your logos “logo_default.jpg”, “logo_halloween.jpg”, and “logo_xmas.jpg”.
That should work for most people. However for me, I had to do a bit more editing since my logo image filenames were not specified in HTML but rather as fixed values in the CSS (as an external file). Since I can’t run PHP code in CSS files, I had to create separate CSS ID’s and PHP variable insertions.
So in my custom WordPress theme’s style.css file I originally had:
h1 a span {
display: block;
width: 430px;
height: 81px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
cursor: hand;
background: url(‘images/tyler_00.gif’) no-repeat left top;
}
Since I have 3 logo variables in PHP, I had to create 3 separate ID’s in the CSS, so I changed the above to:
h1 a span#default {
display: block;
width: 430px;
height: 81px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
cursor: hand;
background: url(‘images/tyler_00.gif’) no-repeat left top;
}
h1 a span#halloween {
display: block;
width: 430px;
height: 81px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
cursor: hand;
background: url(‘images/tyler_00_halloween.gif’) no-repeat left top;
}
h1 a span#xmas {
display: block;
width: 430px;
height: 81px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
cursor: hand;
background: url(‘images/tyler_00_xmas.gif’) no-repeat left top;
}
Then in my header.php file I changed (in the appropriate area, under the H1 and A parents):
<span></span>
to
<span id=”<?php echo $season; ?>”></span>
As I mentioned before, since my blog’s logo is actually split up into 3 separate images, I had to repeat this process 2 more times, editing both the style.css and header.php again, in order to make the other 2 parts of the logo change depending on the season as well.
And that’s it! Depending on how many logo variations you have and how your blog’s HTML and CSS is coded, it should only take you around 15-minutes to implement the automation of changing your logo depending on the season.
It’s nothing major, but anything I can do to save time and hassle for myself is victory in my book.
The Talent Behind the Mascot
Since I know I’ll get dozens of e-mails and comments asking who designed my logo, I’ll just mention it here.
Ever since I had my mascot commissioned 3 years ago I’ve constantly had people ask me who designed it, even though it clearly says who in my Recommended Resources page and I have numerous posts like this one stating who did it.
Sergio Ordoñez Suanez from SOSFactory.com (hence the SOS…) is the talent behind my mascot, and has done a total of 3 variations for me now as well. Without hyperbole, I can confidently say that Sergio is a world-class calibre artist in his field of mascot design.
I don’t throw around such praise easily, so that’s really saying a lot. When it comes to custom cartoon/mascot work, Sergio is really one of the best in the world. I was actually at Toys R Us a while ago, looking to pick up a board game, when I came across HedBanz, the popular board game, and remembered that Sergio was the one who designed their box!
He charges $600 per logo or mascot and while that may sound expensive, it’s really not. In fact, it’s quite cheap considering the quality you get.
That is one scary avatar. Sergio’s work is really impressive. Few people can do cartoon caricatures with that kind of smoothness.
I noticed the change to the logo immediately. You should make more of them!
No offense, but leave the multiple logos to the big companies like Google. It is just a big waste of time that doesn’t affect your bottom line. You spent $600 per logo and spent all this time switching logos and making scripts. I think that time and money would’ve been better spent managing your campaigns or working on your other projects.
I hired Sergio too. He is good
This is the best logo you have 🙂 love it
Pretty spiffy.
You’re a hacker.
-Paul
Good thinking, perhaps this should be a wordpress plugin 🙂 (Although that seems to be a bit too heavy)
There’s an error in your code though, the christmas logo will never show since the end date is not next year, and you’re checking if today is between 2010-12-05 and 2010-01-05.
I cleaned up that code a little so it’s easier to add more events if you want (only 1 line to add in the array):
$today = date(‘Y-m-d’);
$year = date(‘Y’);
$season = ‘default’;
$holidays = array(‘halloween’ => array(‘start’ => $year . ‘-10-15’, ‘end’ => $year . ‘-11-01’),
‘christmas’ => array(‘start’ => $year . ‘-12-05’, ‘end’ => $year+1 . ‘-01-05’));
foreach ($holidays as $holiday => $range) {
if ($today >= $range[‘start’] && $today <= $range['end']) {
$season = $holiday;
break;
}
}
Also, you’re repeating lots of code in that css file, why not do:
h1 a span {
display: block;
width: 430px;
height: 81px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
cursor: hand;
background: url(‘images/tyler_00.gif’) no-repeat left top; #this is default
}
h1 a span#halloween {
background: url(‘images/tyler_00_halloween.gif’) no-repeat left top;
}
h1 a span#xmas {
background: url(‘images/tyler_00_xmas.gif’) no-repeat left top;
}
Oh, and which is it, pointer or hand (cursor)? I doubt this declaration is even necessary:
cursor: pointer;
cursor: hand;
Thanks for the heads up on the Christmas issue. I went ahead and changed the following line from:
$christmas_end = strtotime(date(‘Y’) . ‘-01-05’);
to:
$christmas_end = strtotime((date(‘Y’)+1) . ‘-01-05’);
I guess there is no ++ in PHP.
You could also leave out everything to do with the year to simplify things further.
haha, I was going to suggest that as well. There is no need for the year.
Actually I was wrong, after some experimentation you can’t leave out the year.
There’s still a bug in the code though as when the year on the server changes to 2011 you’ll still be adding one.
e.g
From the 2011-01-01 00:00:00
$christmas_end = strtotime((date(‘Y’)+1) . ‘-01-05′);
will return
2012-01-05
This would make a good interview question. I’ve determined it to require far too much brain power to solve the problem properly on a Tuesday night.
So instead I’d create two ranges, one from the 25’th of December to the 31’st of December and another starting on the 01’st January to the 5’th of January for simplicities sake.
I just changed it to run through until the end of December 31st to apply an easy fix. It’s funny though, how it’s really a simple issue but seems rather difficult to fix.
I don’t feel bad about changing the date because my Christmas image is really Christmasy with the presents and Santa hat, and not exactly New Yearsy (although that’s an idea for another logo) so it’s probably for the better anyway.
Thats an interesting trick! I might actually change my logo now an add a bit scary stuff to it as well! heehhe
Oh, that’s really nice to have a new logo every season! The logos designed by Sergio look awesome!
That is really cool. I like the Halloween one the best. I really need to get and animated me!
I like the Christmas one the best, probably because I like Christmas more then Halloween. If you did a Thanksgiving one would you put it up during Canada’s Thanksgiving or America’s Thanksgiving?
I might do both, for about a 5-day range, and then put a small flag up for each one.
Make a logo of you in your underpants then have it just change your underwear everyday.
The logos Sergio has done for you look wonderful. I hope that one day I can hire him to logos for some of my websites. His work on the HedBanz box cover is also equally impressive. Tyler, I love how you change your logos for each season. Keep up the good work.
– Robert
I loved the Poker and Christmas one the most 🙂
I think one thing that would definitely benefit the halloween graphic is to add a ravaged pumpkin next to Tylerminator. That would fill in the role of the cash mounds or the chips in the other images. 😀
Yes a pumpkin or something is missing from the Halloween logo. It just seems that Tyler turns into a psycho killer for a couple weeks at this time of year.
Hey Tyler pretty awesome Halloween logo you got for yourself, and super useful post with the process on how we too can do it 🙂 Can’t wait to see the Christmas logo on there!
Till then,
Jean
Doesn’t that mean that every time your page loads there is extra band-end processing going on? Could increase the server load? Or… did I miss something and its in the cache?
That’s true, but it is very minimal, especially when you compare it to just how many other executions are actually being run with most CMS’s and plugins.
@used tires , I agree the Halloween logo is extreme cool
Great idea Tyler! You looking cool in all pics. Really its good to have multiple logos that should be change after some interval..
I would have to disagree. There is very little benefit to having multiple logos. If anything it could hurt branding by causing some confusion. Nobody is going to make a purchase from a company just because they waste time putting up some seasonal logo.
Honestly I like your image it seem really cool and professional to me. It is a really good idea if we can change our theme on automatic. Sometime we forgot or busy with other thing make us not alert on the season and change the suitable theme =)
Nice script!
Overall A GREAT POST TO READ. The script is cool and I will use it. SOS is great at those arts, and yes $600 isn’t that much for those quality arts, and when you earn a lot, so why bother.
Sergio is definitely very talented. Those characters look very lively and well done. Like someone said above, a cut-up pumpkin next to the Halloween Tyler might be a cool addition. 🙂 But the rest are pretty much perfect.
Thanks for the quick tutorial, its easier than it looks!
that is good to know I wondered how you guys did that or if it was done manually. Great tip. I am having someone work on my logo and character as we speak. I have seen a couple proofs but not quite there yet.
I actually never knew this was possible. Thanks so much for the script.
It is not my first time to pay a visit this site, i am browsing this site dailly and take pleasant facts from here daily.