TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 101894 visiteurs

 1 visiteur en ligne

  • Style.css
  • Blog
  • Configuration secondaire

Le style du calendrier est dans les lignes suivantes :

/********** Calendrier **************/
.cal { /*fond du calendrier*/
    width: 100%;
    text-align: center;
    margin: auto;
    border-collapse: separate;
    border: 1px solid #000000;
    border-radius: 6px;
    border-spacing: 1px;
    color: inherit;
    background-color: #E3EDC7;
}
tr.cal { /* barre de navigation du mois actif */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    text-align: center;
}
td.cals { /* jours de la semaine */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #E3EDC7;

    width: 14%;
    text-align: center;
}
td.cal0 { /* cellules vides*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #E3EDC7;
    width: 14%;
    text-align: center;
}
td.cal1 { /* jours */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    width: 14%;
    text-align: center;
}
td.cal2 { /* aujourd'hui */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #C5D1A5;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
td.cal3 { /* dimanche ou jour férié */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
td.cal4 { /* aujourd'hui si dimanche ou jour férié */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
td.calevt { /* événement */
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #C5D1A5;
    text-decoration: underline;
    text-align: center;
    width: 14%;
}

td.cal5 { /* mois actif */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
select.cal { /* sélection du mois et de l'année */
    background-color: #E3EDC7;
}
/*****************************************/

Pour personnaliser le calendrier du blog, il faut ajouter .CALBG0 :

/********** Calendrier du blog **************/
.CALBG0 .cal { /*fond du calendrier*/
    width: 100%;
    text-align: center;
    margin: auto;
    border-collapse: separate;
    border: 1px solid #000000;
    border-radius: 6px;
    border-spacing: 1px;
    color: inherit;
    background-color: #E3EDC7;
}
.CALBG0 tr.cal { /* barre de navigation du mois actif */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    text-align: center;
}
.CALBG0 td.cals { /* jours de la semaine */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #E3EDC7;

    width: 14%;
    text-align: center;
}
.CALBG0 td.cal0 { /* cellules vides*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #E3EDC7;
    width: 14%;
    text-align: center;
}
.CALBG0 td.cal1 { /* jours */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    width: 14%;
    text-align: center;
}
.CALBG0 td.cal2 { /* aujourd'hui */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #C5D1A5;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALBG0 td.cal3 { /* dimanche ou jour férié */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALBG0 td.cal4 { /* aujourd'hui si dimanche ou jour férié */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALBG0 td.calevt { /* événement */
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #C5D1A5;
    text-decoration: underline;
    text-align: center;
    width: 14%;
}

/*****************************************/

Le calendrier est identifié par .CALxx

Exemple avec le calendrier dans la configuration secondaire (1) colonne latérale droite (R), l'identification est : .CALR1 :

/********** Calendrier dans la configuration secondaire 1 - à droite **************/
.CALR1 .cal { /*fond du calendrier*/
    width: 100%;
    text-align: center;
    margin: auto;
    border-collapse: separate;
    border: 1px solid #000000;
    border-radius: 6px;
    border-spacing: 1px;
    color: inherit;
    background-color: #E3EDC7;
}
.CALR1 tr.cal { /* barre de navigation du mois actif */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    text-align: center;
}
.CALR1 td.cals { /* jours de la semaine */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #E3EDC7;

    width: 14%;
    text-align: center;
}
.CALR1 td.cal0 { /* cellules vides*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #E3EDC7;
    width: 14%;
    text-align: center;
}
.CALR1 td.cal1 { /* jours */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    width: 14%;
    text-align: center;
}
td.cal2 { /* aujourd'hui */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #C5D1A5;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALR1 td.cal3 { /* dimanche ou jour férié */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALR1 td.cal4 { /* aujourd'hui si dimanche ou jour férié */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALR1 td.calevt { /* événement */
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #C5D1A5;
    text-decoration: underline;
    text-align: center;
    width: 14%;
}

.CALR1 td.cal5 { /* mois actif */
    font: 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #ECEFC2;
    border: 1px solid #000000;
    border-radius: 6px;
    width: 14%;
    text-align: center;
}
.CALR1 select.cal { /* sélection du mois et de l'année */
    background-color: #E3EDC7;
}
/*****************************************/

Mots-clés associés

Date de création : 19/07/2013 15:08
Dernière modification : 17/08/2013 14:16
Page lue 2775 fois


Vous êtes ici :   Accueil » Calendrier