Les méandres du Calendrier ...
Je me suis bien bataillé avec mon calendrier, mais le bilan est :
Zoélie : 1
Calendrier : 0
Gniark gniark ...
Un petit résumé des propriétés du Calendrier Simple d'Over-Blog :
-Les couleurs :
.calendarToday1 {
font-family: "Comic Sans MS",Verdana, Arial, Helvetica;
font-size: 10px;
font-weight: bold;
color:#BC8F8F;
background-color:#CCFF00;
}
Le background-color est ici la couleur de la petite case du jour d'aujourd'hui (oui, je sais, pléonasme..)
Le color est la couleur du chiffre de la date du jour.
.calendarDays1 {
width:20px;
height:20px;
font-family:"Comic Sans MS",Verdana, Arial, Helvetica;
font-size: 10px; f
color:#BC8F8F;
background-color: #D2B48C;
text-align:center;
font-weight: bold;
}
Idem, mais pour les autres jours que celui d'aujourd'hui ... Chez moi, par exemple, j'ai mis comme background-color la couleur de fond de blog pour un effet "transparent".
.calendarHeader1{
width:20px;
height:20px;
font-family:"Comic Sans MS",Verdana,Arial, sans-serif;
background-color:#BCEE68;
color:#BC8F8F;
}
Couleur et fond des petites cases des lettres de la semaine .
.calendarTable1 {
margin:0px;
background-color:#D2B48C;
border:0px solid #7FFF00;
}
Cette fonction définit le contour du calendrier . Là aussi, j'ai mis en comme background-color la couleur de fond de blog pour un effet "transparent". Je n'ai pas mis de contour visible, mais vous pouvez en gérer les caractéristiques dans "border".
- Le plus fourbe (c'est ça qui m'a donné du mal...):
Le calendrier lui-même est un tableau. Pour modifier ses propriétés, il faut insérer là où était précédemment
/* Calendrier */
#Calendrier{}
#Calendrier table{
table-layout: fixed;
border-spacing: 1px;
border-collapse: separate ;
width: 90%;
margin-left:10px;
}
Table-layout définit l'algorithme employé par le navigateur pour la disposition des cellules, des rangées et des colonnes de la table. Il y a "fixed" et "auto".
Préférez la valeur fixed, pour les longs tableaux. Laffichage en sera plus rapide.
Enfin, pour un si petit calendrier, ce doit être un peu gadget ...
Border-spacing détermine l'espacement entre les cellules (sans bordures, remplissage et marges).
- Quand on ne spécifie qu'une longueur, ceci donne l'espacement horizontal et vertical.
- Quand on spécifie deux longueurs, la première donne l'espacement horizontal et la deuxième celui vertical.
Border-collapse détermine si les bordures des éléments de tableau adjacents (les peties cases Jour) doivent être affichés séparément ou fusionnés.
La valeur "separate " donne un modèle avec des bordures séparées, "collapse " des bordures continues d'un côté à l'autre de la table.
Le point intéressant : C'est là qu'il faut modifier la "width" du calendrier (ça ne marchera pas dans .calendarTable1...)
Pour appliquer une image de fond au calendrier, il faut ajouter l'attribut background au module spécifque du calendrier ...
Mais attention: un background appliqué au module rendra toute la place dévolue au module, y compris les contours et parfois même au-delà, si vos bordures de module possèdent un attribut margin...
Pour appliquer une image de fond uniquement dans la boîte intérieure du module, celle qui est appelée .box-content dans le cas général, il faut créer une sous-classe de l'identifiant #Calendrier, qui référera au .box-content du module :
#Calendrier .box-content{
margin: 37px 28px 37px 28px;
background-attachement:fixed;
background-image:
url(http://idata.over-blog.com/0/05/85/46/images-manga/chobit.jpg)
}
... donne le résultat que vous pouvez voir dans le calendrier à droite (enfin, jusqu'à ce que je change d'avis...)
Zoélie : 1
Calendrier : 0
Gniark gniark ...
Un petit résumé des propriétés du Calendrier Simple d'Over-Blog :
-Les couleurs :
.calendarToday1 {
font-family: "Comic Sans MS",Verdana, Arial, Helvetica;
font-size: 10px;
font-weight: bold;
color:#BC8F8F;
background-color:#CCFF00;
}
Le background-color est ici la couleur de la petite case du jour d'aujourd'hui (oui, je sais, pléonasme..)
Le color est la couleur du chiffre de la date du jour.
.calendarDays1 {
width:20px;
height:20px;
font-family:"Comic Sans MS",Verdana, Arial, Helvetica;
font-size: 10px; f
color:#BC8F8F;
background-color: #D2B48C;
text-align:center;
font-weight: bold;
}
Idem, mais pour les autres jours que celui d'aujourd'hui ... Chez moi, par exemple, j'ai mis comme background-color la couleur de fond de blog pour un effet "transparent".
.calendarHeader1{
width:20px;
height:20px;
font-family:"Comic Sans MS",Verdana,Arial, sans-serif;
background-color:#BCEE68;
color:#BC8F8F;
}
Couleur et fond des petites cases des lettres de la semaine .
.calendarTable1 {
margin:0px;
background-color:#D2B48C;
border:0px solid #7FFF00;
}
Cette fonction définit le contour du calendrier . Là aussi, j'ai mis en comme background-color la couleur de fond de blog pour un effet "transparent". Je n'ai pas mis de contour visible, mais vous pouvez en gérer les caractéristiques dans "border".
- Le plus fourbe (c'est ça qui m'a donné du mal...):
Le calendrier lui-même est un tableau. Pour modifier ses propriétés, il faut insérer là où était précédemment
/* Calendrier */
#Calendrier{}
#Calendrier table{
table-layout: fixed;
border-spacing: 1px;
border-collapse: separate ;
width: 90%;
margin-left:10px;
}
Table-layout définit l'algorithme employé par le navigateur pour la disposition des cellules, des rangées et des colonnes de la table. Il y a "fixed" et "auto".
Préférez la valeur fixed, pour les longs tableaux. Laffichage en sera plus rapide.
Enfin, pour un si petit calendrier, ce doit être un peu gadget ...
Border-spacing détermine l'espacement entre les cellules (sans bordures, remplissage et marges).
- Quand on ne spécifie qu'une longueur, ceci donne l'espacement horizontal et vertical.
- Quand on spécifie deux longueurs, la première donne l'espacement horizontal et la deuxième celui vertical.
Border-collapse détermine si les bordures des éléments de tableau adjacents (les peties cases Jour) doivent être affichés séparément ou fusionnés.
La valeur "separate " donne un modèle avec des bordures séparées, "collapse " des bordures continues d'un côté à l'autre de la table.
Le point intéressant : C'est là qu'il faut modifier la "width" du calendrier (ça ne marchera pas dans .calendarTable1...)
Pour appliquer une image de fond au calendrier, il faut ajouter l'attribut background au module spécifque du calendrier ...
Mais attention: un background appliqué au module rendra toute la place dévolue au module, y compris les contours et parfois même au-delà, si vos bordures de module possèdent un attribut margin...
Pour appliquer une image de fond uniquement dans la boîte intérieure du module, celle qui est appelée .box-content dans le cas général, il faut créer une sous-classe de l'identifiant #Calendrier, qui référera au .box-content du module :
#Calendrier .box-content{
margin: 37px 28px 37px 28px;
background-attachement:fixed;
background-image:
url(http://idata.over-blog.com/0/05/85/46/images-manga/chobit.jpg)
}
... donne le résultat que vous pouvez voir dans le calendrier à droite (enfin, jusqu'à ce que je change d'avis...)