Calendrier agenda gratuitCalendrier agenda gratuit

Feuille de style pour le calendrier

La feuille de style, disponible derrière l'onglet "Calendrier", est réservée aux internautes avertis qui souhaitent réaliser un  calendrier très spécifique.
Avant d'utiliser la feuille de style, il faut d'abord connaître :

Avec la feuille de style, vous pouvez finaliser la personnalisation de votre calendrier, afin d'obtenir exactement celui que vous recherchez.
L'utilisation de la feuille de style, qui nécessite une lecture attentive de cette page de documentation, permet de définir des présentations spécifiques, qui ne sont pas prévues avec les diverses listes déroulantes présentes derrière les onglets "Mois", " Cases", "Photos" et "Légende".

La syntaxe de la feuille de style (CSS) utilisée par les designers Web, vous paraitra plus claire si vous lisez ce tutoriel.

Syntaxe de la feuille de style

Pour modifier le style (couleur, taille, effet, etc.) d'un ou plusieurs éléments du calendrier, il faut d'abord connaitre soit le nom de cet élément, s'il est unique (par exemple "Le calendrier" ou  "La photo" ou la "Légende") , soit la classe des éléments, s'il y en a plusieurs (par exemples "Les cases" ou "Les numéros des jours" ou "Les noms des jours" ou "Les noms des fêtes" ou "Chaque calendrier mensuel du calendrier annuel".  Il faut ensuite décrire le style à appliquer (couleur du texte, couleur du fond, taille, police de caractères, ombrage, cadre, marge, rotation, etc.).

  • La syntaxe générale est la suivante :
    sélecteur{propriété:valeur; propriété:valeur;...}
    • Le sélecteur défini le ou les éléments sur lequel ou sur lesquels on souhaite appliquer le style (calendrier, photo, légende, cases...), et les couples propriétés/valeur, entre une accolade ouvrante ({) et une accolade fermante (}), définissent le ou les styles à appliquer (couleur, taille...).
    • La syntaxe pour le sélecteur est en général la suivante :
      #élement si l'élément est unique, ou
      .classe pour appliquer la mise en forme à plusieurs éléments.
      Voir ci-dessous la liste des sélecteurs.
    • Pour chaque sélecteur, on peut donc définir un ou plusieurs couples propriété/valeur.
      • La propriété défini le type de mise en page à faire ('color' pour la couleur, 'font-size' pour la taille des caractères, 'background-color' pour la couleur du fond, 'margin-left' pour la marge gauche, etc.)
        Pour les propriétés 'color' et 'background-color', choisissez dans la liste des couleurs.
        Certaines propriétés (par exemple les dégradés de couleur), ne sont opérationnelles qu'avec les dernières versions des navigateurs, en particulier pour Internet Explorer.
      • La valeur s'applique à la propriété, par exemple 'green' pour les propriétés 'color' et 'background_color', ou '10px' (px=pixels) pour les propriétés 'font-size' et 'margin-left'.
      La propriété est toujours séparée de sa valeur par deux-points (:).
      La valeur est toujours suivie d'un point-virgule (;)
      Pour ceux qui ont déjà lu ce tutoriel et qui veulent en savoir plus, le site 'Developpez.com' donne la liste des propriétés et les valeurs correspondantes.
  • Exemples :

    Rotation (inclinaison) du calendrier.

    La rotation est définie en degrés. L'application d'une marge évite les superpositions.

    Taille et couleur du numéro du jour.

    Une taille en pourcentage indique le poucentage à appliquer par rapport à la taille de caractères définie dans l'onglet 'Cases'. Augmentez éventuellement la largeur dans l'onglet 'Cases'.

Liste des sélecteurs (éléments du calendrier) sur lesquels on peut appliquer un style.

Les exemples proposés ci-dessous pour chaque élément sont donnés à titre indicatif, et vous pouvez modifier les valeurs avant d'appliquer le style.
Les boutons 'Appliquer...' permettent d'appliquer le style soit au dernier calendrier visualisé (calendrier en cours), soit à un calendrier précis.
Pour appliquer un style à un calendrier autre que celui proposé ci-dessous, copier le style, afficher le calendrier, cliquer sur l'onglet 'Calendrier' et coller le style dans la zone de saisie 'Feuille de style'.

  • La page (calendrier, photo et légende) : #calobjets

    Exemple : bordure noire autour du calendrier mensuel et de la photo.

    Ajuster éventuellement la transparence de la photo pour l’assortir au fond noir du calendrier.

  • Le calendrier : #mon_cal

    Ombre portée sur le cadre du calendrier.

    Deuxième bordure autour du calendrier.

    Il s'agit d'une bordure supplémentaire à celle définie dans l'onglet 'Calendrier'. Cette bordure sera superposée à l'ombre portée si elle existe.

    Dégradé de couleur linéaire pour le fond du calendrier.

    Supprimer par ailleurs le fond du calendrier.

    Marge en bas du calendrier (pour des notes manuscrites).

    Ajuster la valeur (200px) pour qu'à l'impression, le calendrier tienne sur une page.

    Texte en bas du calendrier (pied de calendrier).

  • La photo : #photo_img

    Ombre portée sur la photo.

    Photo arrondie.

    Dans l'onglet 'Photo', le style de la bordure doit être 'Normal'.

  • La légende : #legende_contenu

    Ombre portée sur la légende.

    Inclinaison de la légende.

    Utiliser éventuellement la main pour déplacer le calendrier et la légende.

  • Le titre : #tr_titre1

    Exemple : ombre portée sur le titre du calendrier.

  • Le rapport d'activité : #divrapport

    Exemple : Taille et couleur du rapport d'activités périodique.

  • La légende des vacances scolaires : #tdz_vacances

    Exemple : Style et couleur de la légende des vacances scolaires.

  • Un jour précis : #J_aaaa_mm_aa

    Exemple : bordure rouge sur la case du 25 décembre 2015, avec une hauteur de 100 pixels.

    Sans l'ajout de ' !important', c'est la hauteur définie dans l'onglet 'Cases' qui serait appliquée.

  • Chaque mois du calendrier : .un_mois

    Exemple : Inclinaison et ombre portée sur les mois, par exemple pour un effet 3D sur un calendrier annuel.

    Ajouter si besoin une marge externe dans l’onglet ‘Mois’ et une marge dans l’onglet ‘Calendrier’.

  • Un mois précis : .cal_mois[data-mois='m']

    Exemple : Ajouter un cadre vert au mois de février.

    Cette bordure sera superposée aux éléments adjacents.

  • Les mois pairs du calendrier bimestriel...

    Exemple : réserver un emplacement pour une photo différente sur chaque mois d'un calendrier bimestriel en tableau.

    Pour ajouter la photo : Onglet 'Mois', Fond : différent chaque mois..., choisir une photo pour chaque mois en fond, puis la positionner et la dimensionner.

  • Les cases du calendrier : .un_jour

    Inclinaison des cases.

    Ajouter si besoin une marge externe et un arrondi aux cases.

    Arrondir les cases uniquement en haut à droite.

    Dans l'onglet Cases, spécifier une taille de bordure, une couleur et un style normal.

    Ajout d'un espacement pour des notes manuscrites au-dessus du premier jour de chaque mois, sur un calendrier en colonne.

  • Les cases du dimanche : .case_jour_7

    Exemple : dégradé de couleur radient pour le fond des cases du dimanche.

  • Les titres : .case_titre

    Exemple : effet 3D (rouleau) sur les cases contenant le nom des mois et le titre général du calendrier.

  • Les noms des mois : .titre_mois

    Alignement à gauche du nom du mois.

    Couleur du lien sur le nom du mois.

    Sans l'ajout de ' !important', c'est la couleur par défaut qui serait appliquée au lien.

    Ajouter 'Mois de' devant le nom du mois.

    Pour ajouter le texte à la suite du mois, remplacer 'before' par 'after'.

  • Les numéro des jours : .h_numjour

    Numéro des jours en gras avec une taille de 120% par rapport à la taille indiquée dans l'onglet Cases.

    Affichage du numéro du jour à gauche, à la place du nom du jour.

    Bordure à gauche et à droite du numéro du jour.

    Dans l'onglet 'Cases, l'alignement doit être à gauche ou centré. Augmenter si besoin la largeur des cases.

  • Les noms des jours : .h_nomjour

    Exemple : couleur du nom du jour.

  • Les noms des fêtes : .h_nomfete

    Exemple : fêtes en italic.

  • Données personnelles : .h_agenda

    Couleur du fond pour les données personnelles (agenda, anniversaires, fêtes à souhaiter.

    Pour voir le résultat, saisir une donnée d'agenda, un anniversaire, une fête à souhaiter. Les listes déroulantes doivent être positionnées sur 'Afficher le détail' ou 'Afficher le texte' dans l'onglet 'Infos'.

  • Données d'agenda : .jour_agenda

    Couleur pour les données d'agenda.

    Pour voir le résultat, saisir une donnée d'agenda, et la liste déroulante 'Agenda' doit être positionnée sur 'Afficher le détail' dans l'onglet 'Infos'.

  • Anniversaires : .jour_anni

    Couleur pour les anniversaires.

    Pour voir le résultat, saisir un anniversaire, et la liste déroulante 'Anniversaires' doit être positionnée sur 'Afficher le texte' dans l'onglet 'Infos'.

  • Fêtes à souhaiter : .jour_fetes

    Couleur pour les fêtes à souhaiter.

    Pour voir le résultat, saisir un anniversaire, et la liste déroulante 'Fêtes à souhaiter' doit être positionnée sur 'Afficher le texte' dans l'onglet 'Infos'.

  • Liserets du suivi d'activités : .h_liseret

    Personnaliser les dimensions du liseret.

    Pour plus d'infos : Gestion des activités.

N'hèsitez pas à me contacter :

  • Pour toute information complémentaire.
  • Si vous n'avez pas pu réaliser votre calendrier.
  • Si vous souhaitez que les internautes bénéficient de votre belle réalisation !
  • Pour écrire dans le livre d'or.
Calendriers agendas : http://www.calagenda.fr