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
Fil RSS 