Sitekleuren per dagdeel

Met de komst van CMSMS 1.8 is het mogelijk om smarty code in je styleheet-templates te gebruiken. In deze blog laat ik zien hoe je op een eenvoudige wijze afhankelijk van het dagdeel (nacht, zonsopgang, dag, zonsondergang) je sitekleuren kunt laten verspringen.

User Defined Tag

Maak een User Defined Tag (UDT) welke afhankelijk van de tijd een smarty waarde (css_by_hour) set.

• Extensions -> User Defined Tags

/**************************************************************************
   * globals
   *************************************************************************/

global $gCms;
$smarty =& $gCms->GetSmarty();

 /**************************************************************************
   * program
   *************************************************************************/

date_default_timezone_set('Europe/Berlin');
$hour = date("G");   

    if ($hour < 6) {
        $css_by_hour =  'night';
    } elseif($hour < 12) {
        $css_by_hour =  'sunrise';
    } elseif($hour < 18) {
        $css_by_hour =  'day';
    } else {
        $css_by_hour =  'sunset';
    }

$smarty->assign('css_by_hour', $css_by_hour);

Maak een nieuwe template aan en zorg ervoor dat {cms_stylesheet} hierin is opgenomen.

Maak een nieuwe stylesheet aan en koppel deze aan je template. Roep bovenstaande UDT aan in de CSS template en definieer de gewenste kleuren.

[code][[css_by_hour]]

[[if $css_by_hour == 'night']]
    [[assign var='background_color' value='#FF0000']]
[[elseif $css_by_hour == 'sunrise' ]]
     [[assign var='background_color' value='#00FF00']]
[[elseif $css_by_hour == 'day']]
    [[assign var='background_color' value='#FFFF00']]
[[else]]
     [[assign var='background_color' value='#0000FF']]
[[/if]] 

body {
    background-color: [[$background_color]];
}[/code]

{cms_stylesheet} tagcloud

Neem de volgende opmaak: tag[1..10]

<ul id="tagcloud">
<li><a class="tag10" title="woord1" href="#">woord1</a></li>
<li><a class="tag2" title="woord2" href="#">woord2</a></li>
<li><a class="tag1" title="woord3" href="#">woord3</a></li>
<li><a class="tag4" title="woord4" href="#">woord4</a></li>
</ul>

Deze is te genereren

[[assign var='color_dark' value='#333333']]
[[assign var='color_mid' value='#666666']]
[[assign var='color_light' value='#999999']]

#tagcloud {
  display: block; 
  width: 200px;
  height: 200px;
  background-color: #FFFFFF;
  overflow: hidden;
} 
  
#tagcloud li {
  margin-right: 6px;
  display: inline;
}

[[section name="i" start=1 loop=11 step=1]]
    [[assign var=pointer value=$smarty.section.i.index]]

    [[capture assign='font_weight']][[math equation="100 * x" x=$smarty.section.i.index]][[/capture]]

    [[capture assign='font_size']][[math equation="(12 + x) / 12" x=$smarty.section.i.index]][[/capture]]

#tagcloud a.tag[[$pointer]] {
    font-size: [[$font_size|string_format:"%.2f"]]em;
    font-weight: [[$font_weight]];
    color: [[$color_dark]];
}

#tagcloud a.tag[[$smarty.section.i.index]]:hover {
    font-size: [[$font_size|string_format:"%.2f"]]em;
    font-weight: [[$font_weight]];
    color: [[$color_light]];
}

[[/section]]

Video

Een demostratie van bovenstaande techniek kunt u bekijken in onderstaande video.

Meer met deze Blog doen

Lees de documentatie van {cms_stylesheet} via: Extensions -> Tags -> Help.