By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.

SKINS TUTO

GuppY Help Center


PRESENTATION
BOXES
SERVICES
JQUERY
BULK
EXAMPLES
Currently...

 121885 visitors

 1 visitor online

  • 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;
}
/*****************************************/

Associated keywords

Creation date : 19/07/2013 15:08
Last update : 17/08/2013 14:16
Page read 3417 times


You are here :   Home » Calendar