Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Les couleurs changent avec le temps

Les couleurs changent avec le temps

Objectif : des couleurs différentes selon les jours de la semaine.

1) D’abord utiliser le plugin « Couteau Suisse » et activer la lame *Trousse à balises* dans la section *Balises, filtres, critères*, ce qui offre en particulier la fonction « NOW » ... Reste à savoir comment ça marche. voir plus loin

 2) Changer la couleur de fond de la page d’accueil

Dans la page accueil.html j’avais ceci :

<BOUCLE_accueil(ARTICLES){titre_mot=accueil}>
<div class="texte">[(#TEXTE)]</div>
</BOUCLE_accueil>

J’ai mis ceci (il y a seulement la deuxième ligne changée)

<BOUCLE_accueil(ARTICLES){titre_mot=accueil}>
<div class="texte"><div class="jour<?php $class= date(l);  echo $class; ?> ">[(#TEXTE)]</div></div>
</BOUCLE_accueil>

 

Ce code permet de changer les couleurs tous les jours. Pour cela, dans le fichier css qui correspond à la page d’accueil, il faut écrire quelque chose du genre (sans oublier le point en début de ligne) :

.jourMonday  {background-color:#A5C700;color:#000000;padding:3px;}
.jourTuesday  {background-color:#FFC086;color:#000000;padding:3px;}
.jourWednesday {background-color:#ffffff;color:#000000;padding:3px;}
.jourThursday {background-color:#D6AE7B;color:#000000;padding:3px;}
.jourFriday  {background-color:#A39d38;color:#000000;padding:3px;}
.jourSaturday  {background-color:#A9B38A;color:#000000;padding:3px;}

Cela donne par exemple pour le lundi : couleur de fond A5C700 - couleur des caractères : 000000

 

Si l’on veut changer les couleurs toutes les semaines il faut écrire, dans accueil.html :

<BOUCLE_accueil(ARTICLES){titre_mot=accueil}>
<div class="texte"><div class="semaine<?php $class= date(W);  echo $class; ?> ">[(#TEXTE)]</div></div>
</BOUCLE_accueil>

et dans le css indiquer par exemple (sans oublier le point en début de ligne)
.semaine37 background-color :#FFF39C ;color :#000000 ;padding:3px ;

 3) Changer « sommaire.html » avec du PHP

Dans sommaire.html

remplacer <div id="droit_som">
par
<div id="droit_som" class="#NOW{D}">
et
<div id="navigation">
en
<div id="navigation" class="#NOW{D}">

 

Ensuite, dans le fichier css correspondant, ajouter :

/* couleur pour le dimanche */
div#droit_som.Sun {background-color:#FF00FF;}
div#navigation.Sun {background-color:#D0CBCB;}

/* couleur pour les autres jours */
div#droit_som.Mon, .Tue, .Wed, .Thu, .Fri, .Sat {background-color:#FFF;}
div#navigation.Mon, .Tue, .Wed, .Thu, .Fri, .Sat {background-color:#FFF;}

Cela donne :
– pour le dimanche, la colonne de droite (c’est-à-dire droit_som ici) de couleur #FF00FF - et la colonne de gauche (c’est-à-dire navigation , ici) de couleur #D0CBCB
– pour les autres jours : les deux colonnes sont de couleur #FFF

 4) Changer « rubrique.html » avec du javascript

J’ai voulu modifier rubrique.html

1) j’y ai trouvé ça

#CACHE{24*3600}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> (etc) (etc)
<div id="droit_som"> /* qui correspond à la colonne de droite*/
<div id="navigation"> /* qui correspond à la colonne de gauche*/
etc etc
</html>

 

C’est dans ce fichier, entre head et /head qu’on peut écrire :

<script type='text/javascript'>
function changeColor(){
 maintenant = new Date();
 j = maintenant.getDay();
 if (j == 0) {
    document.getElementById('droit_som').style.backgroundColor = '#FF00FF' ;
    document.getElementById('navigation').style.backgroundColor = '#D0CBCB' ;
 } else {
    document.getElementById('droit_som').style.backgroundColor = '#FFF' ;
    document.getElementById('navigation').style.backgroundColor = '#FFF' ;
 }
}
window.onload = changeColor;
</script>

Cela donne :
– pour le dimanche, la colonne de droite de couleur #FF00FF - et la colonne de gauche de couleur #D0CBCB
– pour les autres jours : les deux colonnes sont de couleur #FFF

Merci à Serge pour ses explications