Articles web

Nos articles concernant les techniques web sont centrés sur des solutions pratiques qui mettent en œuvre, le plus souvent, notre framework web : Vae Soli!

Des articles généraux sont également fournis dans le respect des standards du web.

Tous nos articles web sont disponibles sous le couvert de la licence Icône Creative Commons Creative Commons — Paternité - pas de modification.

2009-12-27 à 14:55:06

Thème dynamiques

thème,dynamique,CSS,vaesoli,web

2009-12-27 – 14:20

2009-12-27 – 14:00

2009-12-27 – 14:55

Les thèmes dynamiques ont été appliqués au site de Lato Sensu Management. C'est ce qui nous permet d'afficher une bannière festive entre le 15 décembre et le 15 janvier.

En soi, cela n'a rien de difficile : il suffit d'adapter les définitions CSS et le tour est joué. Ce que nous allons illustrer dans cet article, c'est l'application automatique de ce principe. Il ne faudra dès lors plus jamais modifier notre code pour que le principe s'active de lui-même !

Thème dynamique en fonction d'une période

Imaginons que nous souhaitions modifier l'apparence de notre site web en fonction de la période de l'année. Pourquoi pas une apparence un peu plus festive entre le 15 décembre et le 15 janvier ou alors une apparence plus amoureuse le 14 février ? Vous l'aurez compris, vous pourrez aussi, sur base des mêmes principes, appliquer un thème matinal, un thème de soirée …. La limite est vraiment votre imagination.

Créons le code PHP qui va retourner le nom du thème en fonction des dates : 

function DynamicTheme()
/*-------------------*/
{
    $iNow   = time();

    $iMonth = DAT_Month( $iNow );   /* Fonction de Vae Soli! pour retourner le mois */
    $iDay   = DAT_Day(   $iNow );   /* Fonction de Vae Soli! pour retourner le jour */
    $iYear  = DAT_Year(  $iNow );   /* Fonction de Vae Soli! pour retourner l'année */

    if ( ( ( $iMonth == 12 ) && ( $iDay >= 15 ) ) ||
         ( ( $iMonth == 1  ) && ( $iDay <= 15 ) ) 
       )
    {
        $szTheme = "holiday_season {$iYear}";
    }
    else if ( $iMonth == 2 && $iDay == 14 )
    {
        $szTheme = "valentine {$iYear}";
    }
    else
    {
        $szTheme = 'regular';
    }

    return ( $szTheme );
}

Ce code PHP va donc retourner des patterns bien particulier entre le 15 décembre et le 15 janvier de n'importe quelle année (dans ce cas le pattern holiday_season) et le 14 février (valentine). Il suffira d'appliquer le pattern résultat en tant que classe de notre body … et de prévoir les images à afficher dans l'entête de nos pages. 

<html>
    …
    <body class="<?php echo DynamicTheme(); ?>">
        <div id="header">
            …
        </div>
        …
    </body>
</html>

… et donc de prévoir un code CSS semblable à … 

body div#header
    {   background          :   #fff url(/images/header.jpg) left top no-repeat;  
    }
body.holiday_season div#header
    {   background-color    :   #000;  
        background-image    :   url(/images/header-holiday-season.jpg);
    }
body.valentine div#header
    {   background-color    :   #800;  
        background-image    :   url(/images/header-valentine.jpg);
    }

… et le tour est joué ! Avouez que ce n'était pas bien compliqué!