En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

TUTO SKINS

Centre d'Aide GuppY


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

 121884 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 3416 fois


Vous êtes ici :   Accueil » Calendrier