Index

A vous de jouer

⭐ Niveau 1
Petites 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