IMAGE DE FOND POUR LE CALENDRIER
Vous n'osez pas vous lancer dans un relooking total de votre calendrier et je veux bien le comprendre...
Lorsqu'on débarque dans le monde rée...il vaut mieux mieux se faire la main sur plus simple avant.
"Chaque chose en son temps" comme on dit...
Alors je vous propose une alternative...une image fixe ou animée en fond pour votre calendrier.
Sur cet exemple, l'image est fixe, mais si vous mettez un gif (une image animée), les bulles défileront.
Rien de bien sorcier je vous assure...
1.Ouvrez votre feuille de style
2.Descendez sur le bloc #calendar
3.Ajoutez la ligne suivante en bas du bloc :
background-image: url("Adresse de votre image");
Comme ceci :
#calendar {
font-family: Georgia;
color: #000000;
font-size: small;
line-height: 150%;
padding: 0px;
margin-bottom: 0px;
background-image: url("https://storage.canalblog.com/66/66/255038/17491685.gif");
}
et validez.
Vous devez choisir une image de la même taille que l'affichage de votre calendrier (180X180) à peu près, car si l'image est trop petite, elle va se répéter et si elle est trop grande, elle sera coupée.
2 beaux exemples ici avec une image fixe et là avec une image animée !
Une fois que vous aurez mis votre fond, il y a de grande chance pour que vos chiffres soient moins visibles, forcement en fonction de la couleur de votre image, ça peut faire un ton sur ton...
Pas de panique, retournez dans votre feuille de style et redescendez sur les blocs de votre calendrier :
#calendar {
font-family: Georgia;
color: #FFFFFF;
font-size: small;
line-height: 150%;
padding: 0px;
margin-bottom: 0px;
background-image: url("https://storage.canalblog.com/66/66/255038/17491685.gif");
}
#calendar table {
width: 100%;
padding: 2px;
border-collapse: collapse;
border: 0px;
}
#calendar caption {
font-family: Georgia;
color: #FFFFFF;
font-size: small;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 3px;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
Pour changer la couleur des chiffres et du titre, modifier les codes couleurs #FFFFFF
Si votre fond est noir, choisissez les chiffres blancs par exemple...
#calendar : pour les chiffres
#calendar caption : pour le titre (le mois du calendrier)