Index
A vous de jouer
⭐ Niveau 1Petites adaptations de mise en forme en utilisant seulement le CSS
exemple des fiches agenda / sur la fiche évènement coding-party :
- personnaliser le css pour masquer certains label
- supprimer le trait après le titre modifier la couleur du texte de description
⭐⭐Niveau 2
Cette étape intermédiaire est facultative - L'idée est de commencer à jouer avec le code HTML pour préparer le rendu souhaité : copier le code HTML généré par Yeswiki pour afficher une fiche / le coller dans une page / le modifier
Copier et modifier le code HTML
image Capture_fiche_agenda.png (80.2kB)
- inspecter le rendu de la fiche coding-party et copier le code HTML qui correspond au rendu de la fiche : entre
<div class="BAZ_cadre_fiche id2"> .... </div>
- coller dans une page de votre wiki TemplateAgenda
- Modifier le code HTML pour créer un encadré avec date et lieu de l'évenement placé sous le titre et avant la description comme sur le modèle ci-contre
⭐⭐⭐Niveau 3
Créer un template twig pour appliquer cette mise en forme à toutes les fiches agenda
- accéder au serveur et créer le dossier custom/templates/bazar
- copier votre code HTML dans un fichier nommé fiche-2.twig
- remplacez les textes de l'évènement par un affichage dynamique de la valeur de chaque champ ex
{{html.bf_titre}}
- enregistrez et transférez le fichier sur le serveur
- actualisez votre fiche évènement coding-party
- si il y a une erreur dans le code, reportez vous à la ligne indiquée sur le message d'erreur