Adding Seasonal Flair To Your Site

One thing I enjoy doing to websites is giving the site different visual treatments depending on the season or holiday. For example, during the winter I’ll add snowflakes to the background, and in the spring I like adding little pops of color, whether that be through images or background colors. This is really easy to do, and all you need is some basic CSS knowledge and a little bit of client-side programming knowledge. The example below uses PHP, but it could easily be translated into any client-side or templating language.

The PHP


  <?php function findSeason() {
      if(date('m') == '01' || date('m') == '02' || date('m') == '12') {
         return " class='winter'";
      } else if (date('m') == '03' || date('m') == '04' || date('m') == '05') {
         return " class='spring'";
      }
  } ?>

This code just checks to see what the current month is, and if it’s January (01), February (02), or December (12), it returns the markup for winter. If it’s March (03), April (04), or May (05), it returns the markup for spring. You could extend this code for Summer and Spring as well, or also just check for singular months:


  <?php function findSeason() {

      // Return October
      if(date('m') == '10') {
         return " class='october'";
      }

      // Return Halloween
      if(date('m') == '10' && date('d') == '31') {
         return " class='halloween'";
      }
  } ?>

The PHP code can then be placed in your HTML markup, like so:


  <!-- Adding the season to the body tag -->
  <body<?php findSeason(); ?>>

The CSS


  body {
    background:transparent url('/images/background.png') top left no-repeat;
  }

  .winter {
    background:transparent url('/images/background-winter.png') top left no-repeat;
  }

  .spring {
    background:transparent url('/images/background-spring.png') top left no-repeat;
  }

The body styles will be overridden when you apply the .winter or .spring class to them. When the month/season/holiday is over, the class will no longer be applied and your default body styles will be used.

There are endless possibilities for styling your site – enjoy!

Leave a Reply

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