Dynamic blog designs

Earlier this week, community member Amnith revealed his new designs that are changing by the time of the day. If you get in at 4 p.m. you will see one theme, while if you get in at 9 a.m. you'll see a completely different theme.

This is done by a very simple process, but requires a web hosting with PHP to work. Please note that this trick is for those of you who are experienced with Web development and know what you are doing.

The basics to this is to create different stylesheets for the different themes and arrange these in a structured way. Say that you put the stylesheets in different folders, numbered or named by the different designs. For this article we have four different themes, refreshing themselves every 6th hour. Let's call the themes morning, day, evening and night.

First off, we need to decide which intervals we want the designs to be shown at. I'll define morning as the period between 0600 and 1200, day for the period between 1200 and 1800, evening as the period between 1800 and 0000, and night as the period between 0000 and 0600. Now that we have the given periods, we can start working on the different CSS files.

To structurize our script, we'll put the CSS files in their different directories, named by the different themes, and put the CSS files in these directories. We'll call all the files user.css to keep it easy to edit. We shall now have the following setup:

(root directory)

• morning
• user.css
• day
• user.css
• evening
• user.css
• night
• user.css
  

Bold words are directories

The user.css are the CSS files you have generated for the different themes. An excellent way to do so is to use Furie and Moesring's ingenious My Opera CSS Generator. This piece of neatness is designed to enable anyone to customize their blog themes without any specific knowledge of CSS, and allows people to change the look and feel of their pages easily.

Now that the designs are in place, we have to make the script that does the magic. The script itself is written in PHP, and its general idea is this: If the hour of the day is between X and Y, show design Z. The hour has to be in 24 hour format.

Great! Now we have a little formula to work with, and to get the hour of the day with PHP we will use this command:
$hour = date("H");

For the computer to interpret PHP, we have to wrap the script into special "tags": <?php ?>.

Now, in order for us to be able to get out the correct designs to the correct time, we will have to check to see if the hour meets the criterias we have set. Say for our night design, we want it to be shown between 0000 and 0600, while the morning takes over from 0600. This means that we will have to see if the value of the hour is greater than or equal to 0 and less than 6. This is done like this in PHP:

<?php
  $hour = date("H");
  if ( $hour >= 0 && $hour < 6 )
  {
    <do something here>
  }
?>

This is read as: if the value of hour is greater than or equal to zero and the value of hour is less than six, then...

What we want to do instead of the <do something here>, is to include and show the appropriate CSS file. This is done with PHP's include command. This is how it is done:

<?php
  $hour = date("H");
  if ( $hour >= 0 && $hour < 6 )
  {
    include "night/user.css";
  }
?>

Great job! Now we have a CSS file shown between 0000 and 0600! We are going to use the same template for the rest of the intervals, but instead of if, we're going to use elseif.

The entire code block will then be read as: if the value of hour is greater than or equal to zero and the value of hour is less than six, then include the user.css file from the night directory. Otherwise, if the value of hour is greater than or equal to six and the value of hour is less than twelve, then include the user.css file from the morning directory. This repeats for the remaining two intervals.

<?php
  $hour = date("H");
  if ( $hour >= && $hour < 6 )
  {
    include "night/user.css";
  }
  elseif ( $hour >= 6 && $hour < 12 )
  {
    include "morning/user.css";
  }
  elseif ( $hour >= 12 && $hour < 18 )
  {
    include "day/user.css";
  }
  elseif ( $hour >= 18 && $hour < 24 )
  {
    include "evening/user.css";
  }
?>

That's it, you're done! Save the script to the file "myo.php" in the root directory and go to your My Opera account page. Now, choose design and custom style sheet. In the custom style sheet page, paste the following code:
@import url("http://path.to/hosting/rootfolder/myo.php");

Congratulations! You have now made a dynamic My Opera design!