Elxis CMS Forum

Extensions => Templates => Topic started by: Andrrew on February 02, 2011, 07:05:59

Title: How can I make a templates that changes with time?
Post by: Andrrew on February 02, 2011, 07:05:59

I've seen a few sites which have templates that automatically change with change in time. Like when it's morning, they appear light colored, and the same with afternoon and evening. I own a website too, but I don't know how to do that. Is there some template code or any helpful website that solves this problem?

Title: Re: How can I make a templates that changes with time?
Post by: apkoutsou on February 02, 2011, 09:23:52

You sould create 4 or 5 different css files with the colours you like for each time period. Then, in the index.php file of your template you should add some code that will calculate what time it is and load the corresponding css file, e.g.:

Code: [Select]

$hour = date("G");   // Get hour of current time without leading zeros
switch ($hour) {
   case 1:
   case 2:
      echo '<link rel="stylesheet" type="text/css" href="morning.css"/>';
      break;
   case 3:
   case 4:
      echo '<link rel="stylesheet" type="text/css" href="evening.css"/>';
      break;
   ...
}
This works each time thw page is refreshed. If you want the template to change without refresh, you should make a javascript timer that do the same job but changes the colours on-the-fly (a bit more complicated but it may worth it).

Title: Re: How can I make a templates that changes with time?
Post by: webgift on February 02, 2011, 09:34:15

It would be a perfect idea to add on this switch statement a default case like :

Code: [Select]

$hour = date("G");   // Get hour of current time without leading zeros
switch ($hour) {
   case 1:
   case 2:
      echo '<link rel="stylesheet" type="text/css" href="morning.css"/>';
      break;
   case 3:
   case 4:
      echo '<link rel="stylesheet" type="text/css" href="evening.css"/>';
      break;
  default :
     echo '<link rel="stylesheet" type="text/css" href="default.css"/>';
      break;
}

which default.css will be used in any other cases ;)

Title: Re: How can I make a templates that changes with time?
Post by: datahell on February 03, 2011, 19:33:10

Working with a custom timezone (http://php.net/manual/en/timezones.php) (requires PHP 5.2+) to synchronize your site's time to any place in the world:
Change Europe/Athens to anything you wish from the PHP's list of supported timezones (http://php.net/manual/en/timezones.php).

Code: [Select]

<?php 
$myDT = new DateTime(&#39;now&#39;, new DateTimeZone(&#39;Europe/Athens&#39;));
$hour = gmdate(&#39;G&#39;, time() + $myDT->getOffset());
unset($myDT);

if ($hour > 19) { //night 20:00 - 23:59
      $cssfile = &#39;night&#39;;
} else if ($hour > 16) { //afternoon 17:00 - 19:59
      $cssfile = &#39;afternoon&#39;;
} else if ($hour > 11) { //noon 12:00 - 16:59
      $cssfile = &#39;noon&#39;;
} else if ($hour > 6) { //morning 07:00 - 11:59
      $cssfile = &#39;morning&#39;;
} else { //night again 00:00 - 06:59
      $cssfile = &#39;night&#39;;
}


echo &#39;<link rel="stylesheet" type="text/css" href="&#39;.$mainframe->getCfg(&#39;ssl_live_site&#39;).&#39;/templates/&#39;.
$mainframe->getTemplate().&#39;/css/template_css.css" />&#39;;
echo &#39;<link rel="stylesheet" type="text/css" href="&#39;.$mainframe->getCfg(&#39;ssl_live_site&#39;).&#39;/templates/&#39;.
$mainframe->getTemplate().&#39;/css/&#39;.cssfile .&#39;.css" />&#39;;
?>
Build the following css files providing alternative styling for your template depending on the time of the day (in Athens) and you are ready. Those css files provides overwriting of the default CSS styles as set on template_css.css file.
morning.css
noon.css
afternoon.css
night.css

Note 1
If you use Elxis older than 2009.2 replace this:
$mainframe->getCfg('ssl_live_site')
with this:
$mainframe->getCfg('live_site')

Note 2
Just a reminder that Elxis Nautilus (https://www.elxis.org/news/elxis-news/elxis-nautilus.html) is under development.
To get the current hour of the day for Athens in Elxis Nautilus, you do this:

Code: [Select]

<?php 
$hour = eFactory::getDate()->worldDate(&#39;now&#39;, &#39;Europe/Athens&#39;, &#39;G&#39;);
?>

Title: Re: How can I make a templates that changes with time?
Post by: webgift on February 03, 2011, 19:53:07

This is the absolutely right way!
I am just thinking if a visitor comes from other time zone . . . then the website will be karnavali  ;D

Title: Re: How can I make a templates that changes with time?
Post by: datahell on February 03, 2011, 20:00:50

To get the client's hour you can use javascript instead.
Here is the alternative code that will display the style depending on the local visitor's timezone for any country of the world.

Code: [Select]

<?php 
echo &#39;<link rel="stylesheet" type="text/css" href="&#39;.$mainframe->getCfg(&#39;ssl_live_site&#39;).&#39;/templates/&#39;.
$mainframe->getTemplate().&#39;/css/template_css.css" />&#39;;
?>
<script type="text/javascript">
/* <![CDATA[ */
var client_date = new Date();
var client_hour = client_date.getHours();
client_hour = parseInt(client_hour);

if (client_hour > 19) { //night 20:00 - 23:59
      var cssfile = 'night';
} else if (client_hour > 16) { //afternoon 17:00 - 19:59
      var cssfile = 'afternoon';
} else if (client_hour > 11) { //noon 12:00 - 16:59
      var cssfile = 'noon';
} else if (client_hour > 6) { //morning 07:00 - 11:59
      var cssfile = 'morning';
} else { //night again 00:00 - 06:59
      var cssfile = 'night';
}

var custom_css = '<link rel="stylesheet" type="text/css" href="<?php echo $mainframe->getCfg(&#39;ssl_live_site&#39;); ?>';
custom_css += '/templates/<?php echo $mainframe->getTemplate(); ?>/css/'+cssfile+'.css" />';
document.write(custom_css);
/* ]]> */
</script>

Title: Re: How can I make a templates that changes with time?
Post by: webgift on February 03, 2011, 20:02:42

Ops! Here we are! RESPECT!