PAR ICI LE CHAT !

UN CALENDRIER TOP MOUMOUTE !

Voici comment changer le look de votre calendrier, avec un diaporama et pavés de couleur etc...

Tout le mérite revient à Alérion ! pour d'autres détails allez voir son tuto.

Alors...

Commencez d'abord par choisir le thème de votre calendrier et rassemblez 7 images de la même dimensions (150x140px) dans cet exemple.
Il vous faudra aussi un fond, soit une image fixe, soit animée...
Dans cet exemple mon image est animée et fait 320x270px.

Collez le code suivant dans votre "feuille de style", à la suite des codes du calendrier, tout en bas :

#cadrecalendar {
      border:none;
      background:transparent url("Adresse de l'image du fond");
      height: 280px;
      width: 180px;
      display: block;
}

#imagecalendrier {
      padding: 15px 5px 0 5px;
      height:140px;
      display:block;
}
.jourlucalendar {
         background-color:#ffffff;
   }

.jourmacalendar {
         background-color:#ffffff;
   }

.jourmecalendar {
         background-color:#ffffff;
   }

.jourjecalendar {
         background-color:#ffffff;
   }

.jourvecalendar {
         background-color:#ffffff;
   }

.joursacalendar {
         background-color:#ffffff;
   }

.jourdicalendar {
         background-color:#ffffff;
}

Les lignes "jourdicalendar background-color:#ffffff" Correspondent aux pavés de couleurs sous les jours de la semaines.
Changez les codes couleurs uniquement

Ensuite, mettez "l'adresse de vos images" dans le code suivant et collez-le dans votre "page d'accueil" avant la balise </head>

<script type="text/javascript">
<!--
var imageducalendar = new Array("Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image");
//-->
</script>
<script src="http://storage.canalblog.com/79/67/272783/19819048.js" type="text/javascript" ></script>

Dans cet exemple, les images font 150x140px.

et pour finir, repérez la ligne du calendrier dans la "page d'accueil" et collez ce code juste en dessous, comme sur la capture :

<script type="text/javascript">
<!--
NewCSSCalendar();
DateJourCalendar();
NewDaysCalendar("p");
AfficherImagesCalendar();
// -->
</script>

Ensuite vous devez jouer avec les valeurs du calendrier d'origine dans la "feuille de style", et aussi avec la couleur des liens pour trouver ce qui rend le mieux avec votre nouveau calendrier...

a:link {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    color: #ffffff;
    text-decoration: none;
}
a:active {
    color: #ffffff;
    text-decoration: none
}
a:hover {
    color: #e4263f;
    text-decoration: none;
}

En 2 mots : bon courage !

URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=251752&pid=5915104

Liens vers des weblogs qui référencent ce message :