Les différentes étapes :
La présentation "timeline" est une présentation suivant une ligne de temps. Dans l'exemple ci-contre, chaque événement de l'agenda est représenté par un bloc contenant la date de l'événement, sous la forme jour, mois, année. Sont affichés également, le titre de l'événement et un résumé de celui-ci. Un segment de couleur symbolise la ligne de temps. Une icône représentant une coche sur un calendrier est aussi visible.
Pour afficher un agenda sous cette forme là, il faudra suivre les étapes ci-dessous :
- Création du bloc personnalisé
- Ajout du code CSS
- Placement du bloc sur la ou les pages voulues
Création du bloc personnalisé
Le bloc que vous allez créer sera un bloc basique. La procédure pour la création d'un tel bloc est donnée à l'adresse "Blocs | version 3".
La vidéo ci-dessous présente la procédure pour modifier le contenu du bloc lorsque celui-ci a déjà été créé et que vous voulez mettre à jour votre agenda.
Pour la création du bloc, le principe sera le même. À la différence que celui-ci sera vide et qu'il vous faudra faire un copier coller du code proposé en dessous de la vidéo pour votre premier événement. Ne pas oublier de modifier le jour, le mois, l'année, le titre et le résumé de l'événement avec vos propres données.
<div class="timeline">
<div class="jour-evenement"><strong>13</strong></div>
<div class="mois-evenement"><strong>mars</strong></div>
<div class="annee-evenement"><strong>2024</strong></div>
<svg class="icone-evenement" height="2em" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM329 297L217 409c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47 95-95c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
<div class="ligne-timeline"> </div>
<div class="titre-evenement"><strong>Evénement 1</strong></div>
<div class="resume-evenement">Résumé événement 1</div>
</div>Ajout du code CSS
Pour que les différents éléments qui composent chaque événement soient affichés correctement, il est nécessaire de leur appliquer un style CSS.
Le code CSS ci-dessous est à copier coller en passant par "Apparence ---> Gestion du thème" et en suivant la procédure décrite à l'adresse "Thème (avancé) | version 3"
/* Mise en forme agenda timeline - sdomas */
#block-agendatimeline {
margin-top: 3em;
}
.timeline {
display: grid;
grid-template-columns: 80px 1fr;
grid-template-rows: repeat(7, 1fr);
margin-bottom: 2em;
}
.jour-evenement {
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
font-size: 1.5em;
}
.mois-evenement {
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
font-size: 1em;
}
.annee-evenement {
grid-column: 1;
grid-row: 3;
align-self: center;
justify-self: center;
font-size: 1em;
}
.ligne-timeline {
grid-column: 1;
grid-row-start: 5;
grid-row-end: span 2;
border-left: 2px solid #e95420 ;
height: 4em;
justify-self: center;
align-self: end;
margin-top: 1em;
}
.titre-evenement {
grid-column: 2;
grid-row-start: 1;
grid-row-end: span 2;
align-self: center;
font-size: 1.15em;
}
.icone-evenement {
grid-column: 1;
grid-row: 4;
align-self: center;
justify-self: center;
}
.resume-evenement {
grid-column: 2;
grid-row-start: 3;
grid-row-end: span 3;
}
/* Fin mise en forme agenda timeline */Disposition du bloc
Votre bloc "Agenda Timeline" est un bloc basique. Il ne peut donc pas être utilisé avec l'éditeur de texte. Il faut passer par "Apparence ---> Disposition des blocs" pour le placer dans la zone voulue et le configurer pour qu'il soit visible en permanence sur votre site ou seulement lorsque certains contenus sont affichés. Par exemple, seulement sur la page d'accueil, ou alors sur la page d'accueil et avec chaque rubrique.
La procédure pour placer un bloc basique est donnée à l'adresse "Disposition des blocs | version 3".