Dynamic blog designs

Original: Dynamic blog designs

Earlier this week, community member Amnith revealed his new designs that are changing by the time of the day. :eyes:

---

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 wi med 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

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 >= 0 && $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!