Accéder aux codes sources
Index
File Transfer Protocol (FTP)
Prêt à mettre les mains dans le cambouis ?
Les codes sources de votre wiki sont hébergés sur un serveur web. Pour y accéder il est nécessaire de demander à l'administrateur de votre wiki : l'hote, l'identifiant et le mot de passe.
Quel logiciel utiliser ?
Le logiciel libre Filezilla permet d'accéder aux dossiers sur un serveur distant et d'y ajouter de nouveaux fichiers.Dans quel dossier faut-il mettre les templates ?
Les templates personnalisés doivent être placés dans le répertoire :/custom/templates/bazar
Tous les fichiers de ce répertoire seront conservés lors de la prochaine mise à jour de votre wiki.
Attention en aucun cas vous ne devez éditer les fichiers présents dans les autres dossiers !
Afficher des logos de partenaires
Index
Afficher des logos de partenaires
Quelques adaptations de templates bazar pour afficher joliment les logos des partenaires :Option 1 : utiliser photobox
Avec un peu de css, les logos sont affichés avec une hauteur uniformeet ici ils sont en gris puis repassent en couleur au survol de la souris
""<style> .pbgallery { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 3em; padding: 2em; } .pbgallery li a:hover { box-shadow:none;} .pbgallery li img{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); /* Firefox */ } .pbgallery li:hover img{ -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); /* Firefox */ } .pbgallery li:hover{ -webkit-transform: scale(0.9); transform: scale(0.9); } .pbgallery a { overflow: visible; background: transparent; } .pbgallery a img { width: auto; height: 100px; } </style>""
Ajouter du css personnalisé
Index
Ajouter du css personnalisé
Si vous avez besoin de faire des petites modifications sur le style de votre wiki, il est possible d'ajouter du code CSS en ligne, sans avoir besoin d'accéder au serveur.La page PageCss est chargée après les autres feuilles de style, de ce fait vous pouvez surcharger une classe css ou en déclarer de nouvelles, elles seront prises en compte.
Si vous n'avez pas peur d'un peu de code
Des variables CSS sont disponibles dans le thème Margot pour vous aider à affiner le design :
couleur des titres
couleur des liens
couleur de la barre de menu...
Sur chaque wiki, il existe une page nommée PageCss qui permet d'ajouter du code CSS pour définir des styles personnalisés
Un extrait de code est disponible par défaut dans PageCss :
/* :root { */ /* couleur des titres */ /* --title-h1-color:var(--neutral-color); */ /* --title-h2-color:var(--primary-color); */ /* --title-h3-color:var(--secondary-color-1); */ /* --title-h4-color:var(--secondary-color-2); */ /*}*/
Ce code définit des variables de couleurs qui s'appliquent à l'ensemble du wiki.
Titre de niveau 1 - couleur neutre
titre de niveau 2 - couleur primaire
titre de niveau 3 - couleur secondaire 1
titre de niveau 4 - couleur secondaire 2
Dans l'exemple qui est fournit par défaut vous remarquez les caractères /* et */ : c'est le code pour commenter une ligne, c'est à dire signaler qu'elle ne doit pas être appliqué.
Titre de niveau 1 - couleur neutre
titre de niveau 2 - couleur primaire
titre de niveau 3 - couleur secondaire 1
titre de niveau 4 - couleur secondaire 2
Dans l'exemple qui est fournit par défaut vous remarquez les caractères /* et */ : c'est le code pour commenter une ligne, c'est à dire signaler qu'elle ne doit pas être appliqué.
Si vous souhaitez commencer la personnalisation il faudra d'abord enlever les commentaires pour les lignes que vous souhaitez personnaliser :
:root { --title-h4-color:var(--neutral-color); }
Il est possible d'utiliser soit les couleurs en hexadecimal (#092e67) soit les variables de couleurs qui correspndent aux couleurs que que vous avez choisies via la page Apparence
[IMPORTANT!]Après avoir fait une modif de style CTRL + MAJ + R pour vider le cache du navigateur
Ajouter un effet au survol de l'image
Index
Ajouter un effet au survol de l'image
Yeswiki utilise une bibliothèque css nommée Izmir qui permet d'ajouter facilement des effets au survol d'une image.1ere étape : insérer une image et ajouter un texte
![image undraw_teaching_f1cm.png (86.0kB)](https://pratic-coop.fr/cache/AjouterUnEffetAuSurvolDeLImage_undraw_teaching_f1cm_vignette_300_209_20230124113513_20230124113513.png)
{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left" caption="Texte de la vignette apparait au survol de la souris"}}
Lorsque vous ajoutez une image avec le bouton fichier (fonction attach), il est possible de saisir un "texte de la vignette" - il sera visible au survol de l'image. Ce texte apparait dans votre code avec le paramètre caption="mon texte"
2eme étape : paramètres avancés
![image undraw_teaching_f1cm.png (86.0kB)](https://pratic-coop.fr/cache/AjouterUnEffetAuSurvolDeLImage_undraw_teaching_f1cm_vignette_300_209_20230124113513_20230124113513.png)
La couleur de fond est maintenant présente sur l'ensemble de l'image, le texte est centré.
D'autres options comme l'apparition de bordures ou le zoom sur l'image apportent un dynamisme lors du survol.
A ce jour il semble que texte surgissant et gradient ne fonctionnent pas
3eme étape : personnalisation plus fine
![image undraw_teaching_f1cm.png (86.0kB)](https://pratic-coop.fr/cache/AjouterUnEffetAuSurvolDeLImage_undraw_teaching_f1cm_vignette_300_209_20230124113513_20230124113513.png)
Pour modifier la couleur, il est possible de définir spécifiquement la propriété background-color de l'opbjet figcaption.
ici j'ai ajouté une classe css 'custom-izmir' afin de ne modifier que le 3eme exemple
Code attach avec la classe css ajoutée :
{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left c4-izmir c4-gradient-top custom-izmir" caption="Texte de la vignette apparait au survol de la souris"}}
Ajout de code css pour modifier la couleur :
""<style>.custom-izmir figcaption{background-color:#ea663c;}</style>""
Remarque : si votre image comporte un fond transparent, vous serez certainement gênés par une couleur de fond bleu appliquée sous votre image, dans ce cas vous pouvez modifier la couleur de fond avec le code css suivant :
.c4-izmir { --primary-color: transparent;}
Ajuster le bandeau
Index
Ajuster le bandeau
Le format conseillé pour l'image du bandeau est 1920*300px.Vous pouvez utiliser une image plus haute si besoin. Mais notez que la partie visible de l'image dépendra du contenu textuel contenu dans la section.
Le code qui est proposé dans le bandeau permet de gérer un image de fond avec du texte dessus.
Comment ajuster un bandeau contenant seulement une image ?
paramètre height dans l'action section : attention au comportement en responsivesauts de ligne : comportement un peu aléatoire
Css pour ajuster la hauteur en fonction de la taille de l'écran
@media only screen and (min-width: 600px) { #yw-header .background-image { min-height: 300px; } } @media only screen and (max-width: 370px) { #yw-header .background-image { min-height: 56px; } }
Combiner une image et une couleur de fond
La propriété CSS background-blend-mode permet d'associer la couleur de fond bgcolor et l'image. Cela permet de faire ressortir un texte{{section bgcolor="#172983" class="white full-width text-center cover home-header img-colored" file="image-bandeau.jpg" }} ======Le titre de mon projet====== {{button class="btn-primary" link="Projet" text="Découvrir le projet" }} {{button class="btn-primary" link="Contact" text="Nous contacter" }} {{end elem="section"}} ""<style> .img-colored{background-blend-mode: soft-light;} </style>""
Coller la 1ere section à la barre de menu
Dans l'idéal - le bandeau du haut de votre page est défini dans PageHeader, dans ce cas, le contenu de votre section ser collé correctement au menu, vous n'avez rien à faire.Il arrive de ne pas souhaiter utiliser PageHeader, mais d'avoir une section en pleine largeur sous le menu. Si elle est définie dans le contenu de la page alors il y aura une bande blache entre votre menu et la section.
/* Correction pour enlever l'écart entre barre de menu et contenu de la page main-container.css */ @media (min-width: 1200px){ #yw-main {padding: 0;} }
Améliorer la lisibilité du bouton "S'inscrire"
Index
Améliorer la lisibilité du bouton "S'inscrire"
![image Capture_dcran_login.png (31.0kB)](https://pratic-coop.fr/cache/unknown_entry_id_07ccb97ffff7e9ac2845_Capture_dcran_login_vignette_300_209_20230613111235_20230613091235.png)
/* Mise en avant du bouton s'inscrire sous le formulaire de connexion */ .login-form-modal .btn-default{border: 1px solid var(--primary-color);} .login-form .btn-default{border: 1px solid var(--primary-color);}
Astuces bling bling
Index
Astuces bling bling
Ajouter une icone animée pour inciter au scroll
Voir un exemple sur ce wiki :https://ancredessavoirs.fr/?Accueil
Le bouton qui renvoie vers une ancre plus bas dans la page :
{{button class="btn-link btn-icon icon-action" icon="fas fa-angle-double-down" link="#homepage" nobtn="1" }}
L'ancre se déclare comme ceci avec l'id de votre choix ...
""<div id="homepage"></div>""
Et voici le css associé à coller dans PageCss
/* Animation de l'icone chevron sur home */ @keyframes scroll { 0% { opacity: 0; } 30% { transform: translateY(0); opacity: .5; } 90% { transform: translateY(15px); opacity: 1;} 100% { transform: translateY(20px); opacity: 0;} } .icon-action { font-size: 4em; text-align: center; margin-right: auto; margin-left: auto; width: fit-content; display: block; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; }
Autres réglages avancés
Index
Autres réglages avancés
Limiter la longueur du texte affiché
Ces propriétés peuvent être utiles sur les affichages de vignettes style card ou agenda lorsqu'on ne souhaite pas avoir des titres trop longsLa propriété css text-overflow : ellipsis permet de remplacer le texte qui dépasse par ...
Ressource utile : https:www.weblogin.fr/blog/116-css-text-overflow-ellipsis-sur-plusieurs-lignes
Line-clamp peut aussi être utile
C'est la propriété qui est utilisée dans card lorsqu'on choisit le nb de lignes à afficher pour le sous-titre
Ressource utile : https://css-tricks.com/almanac/properties/l/line-clamp/
Avant de faire un template de liste
Index
Avant de faire un template de liste
Les templates dynamiques "card" offrent énormément d'options de personnalisation. Explorez les différentes combinaisons possibles : vertical, horizontal, ainsi que différentes informations mises en avant dans les emplacements titre / sous-titre /zone flottante / footer.exemple de page ressource avec card : https://communservice.cc/?FichesExp
![image Capture_adrets_commun_service.png (0.4MB)](https://pratic-coop.fr/files/AvantDeFaireUnTemplateDeFiche_Capture_adrets_commun_service_20221114161344_20221114161400.png)
Avant de se lancer
Index
Avant de se lancer
La structure de votre formulaire est-elle stable ?
Lorsque vous réalisez un template de fiche il va faire appel à un certain nombre de champs contenus dans votre formulaire. Si la structure de votre formulaire évolue, les nouveaux champs ne seront pas pris en compte.C'est pourquoi il est recommandé de se lancer seulement quand les données sont stabilisées, à moins de pouvoir faire appel très facilement à la personne qui a concu le template.
Quelques astuces pour insérer des éléments de mise en forme
Custom HTML
Le constructeur de formulaire bazar permet d'insérer à l'endroit que vous souhaitez du contenu en html.Utilisez cette possiblité pour ajouter un encadré autour d'un groupe d'informations :
<div class="well">
infos de votre formulaire
date
heure
lieu
</div>
De la même manière, vous pouvez insérer une image, un picto, mettre en colonne...
PageCSS
En inspectant le code de votre page, vous avez la possibilité de voir quelles sont les classes css utilisées dans le rendu de votre formulaire, ainsi vous pouvez surcharger ces classes dans PageCss et modifier la mise en forme.exemples :
pour mettre un fond de couleur au fiches ressource
.id5 {background-color:yellow;}
mettre en forme les titres des fiches bazar
.BAZ_fiche_titre { color:var(secondary-color-2); border-bottom:2px solid var(--primary-color); }
Afficher les champs de type texte long en colonnes
.id4 .field-textelong { column-count: 2; }
Masquer un champ à l'affichage (mais le garder accessible via les filtres facettes)
.id4 [data-id="checkboxListeDepartementbf_checkbox_group"]{display:none;}
Choisir des illustrations
Index
Choisir des illustrations
A propos de l'utilisation des images
Pour rappel, le droit français de la propriété intellectuelle est très clair : Le droit d’auteur protège toutes les œuvres de l’esprit, quels qu’en soient le genre, la forme d’expression, la destination ou le mérite. Le critère fondamental est celui de l’originalité, entendue comme « l’empreinte de la personnalité de son auteur ».La protection par le droit d’auteur confère au titulaire une exclusivité sur le droit d’autoriser ou d’interdire l’utilisation ou la réutilisation de son œuvre.
Le droit d’auteur est le droit des créateurs.
L’article L.111-1 du CPI prévoit que « l’auteur d’une œuvre de l’esprit jouit sur cette œuvre, du seul fait de sa création, d’un droit de propriété incorporelle exclusif et opposable à tous ».
Source : economie.gouv.fr
Autrement dit : toute image que vous trouvez sur le web est soumise au droit d'auteur (sauf mention contraire - licence creative commons par exemple), vous ne pouvez pas l'utiliser sans posséder une licence... Et pour info il existe des robots qui scannent le web et même un petit wiki inconnu peut être repéré et puni d'une amende d'environ 500€ par image utilisée de manière indue.
Quelques sites pour trouver des belles illustrations libres de droit
des dessins au trait modernes et joyeux
https://blush.design/https://cocomaterial.com/
https://undraw.co/illustrations
des photos
https://unsplash.com/frElements graphiques, photos, illustrations
https://www.freepik.com/Format des images
Il y a 2 paramètres qui comptent dans le poids (en ko) de vos images :- leur taille (largeur et hauteur) exprimée en nb de pixel
- leur qualité en dpi ou en %
La taille
Il est très facile de redimensionner une image, n'importe quel outil de visualisation d'une image le permet.Quelle dimension choisir ?
- Full HD (1920 x 1080 pixels) est la dimension d'un écran PC, dans tous les cas il n'est jamais utile d'avoir une image plus large que ca !
- la largeur de la partie centrale de la page d'un wiki c'est 1100px, donc une demi-colonne 550px
La qualité
Avec des logiciels de traitement de l'image (ou avec des services en ligne) on peut optimiser une image en baissant sa qualité sans que ce ne soit visible à l'oeil.Avec gimp quand on enregistre en jpeg il y a possibilité de régler la qualité, baisser à 70% permet de réduire significativement la taille de l'image.
Le format webp est un format d'image optimisé pour le web, les fichiers sont léger pour une qualité d'image correcte.
Autres traitements pour réduire le poids
Des outils tels que dither.it permettent de réduire le poids en dégradant volontairement l'image : réduction du nb de couleur et effet de texture...Cibler les attentes des utilisateurs
Index
Cibler les attentes des utilisateurs
Lorsqu'on parle d'ergonomie, il ne s'agit pas seulement d'être joli et bien assorti, l'enjeu est de guider des utilisateurs au sein de votre projet.A quels besoins répond le site ?
Besoin d'appartenance à un groupeBesoin d'infos pointues
Plaisir de la découverte
Faire ensemble
Quelques exemples d'utilisateurs d'une plateforme collaborative
Nouvel arrivant
> cherche à mieux connaitre le projet et la communauté> cherche des infos utiles pour lui / sur sa problématique du moment
> souhaite savoir comment participer éventuellement - conditions d'utilisation du site
visiteur observateur
Observateur inactif
> recoit les infos> observe les contributions des autres
> fait le pont avec d'autres projets dans lesquels il est plus actif
> repère les tâches ou les étapes dans lesquelles s'impliquer plus tard
Les réactifs
> connait bien le projet global> répond aux invitations des proactifs
> en recherche d'informations précises (fonction gare centrale)
> contribue quand on le lui rappelle, sur les sujets qui le touchent directement
Les proactifs
> met en place les outils et pense les interactions entre membres> contribue régulièrement
> anime la communauté, rythme le projet
> veille sur les usages des membres et fait évoluer les outils
Prenez le temps de dresser le portrait de vos utilisateurs
A quelle situation est confronté l'utilisateur ? De quoi a t il besoin pour avancer ?Notez pour chacun ce qui peut le rassurer, le motiver mais aussi ce qui peut le perturber, le rebuter...
Voici une petite fiche pour penser à vos utilisateurs en profondeur ...
Consulter les données brutes d'une fiche
Index
Extension Json dans le navigateur
Dans l'interface Bazar (Base de données) vous avez défini des identifiants pour chaque champ de votre formulaire. Ces identifiants sont utilisés pour stocker les informations à chaque fois qu'un utilisateur saisi une fiche.Afficher les données brutes
Pour vérifier vos identifiants et voir comment Yeswiki stocke les données, vous avez la possibilité d'afficher les données brutes.Lorsque vous consultez une fiche, ajoutez /raw à la fin de l'url
exemple :
https://pratic-coop.fr/?EcoclouD/raw
Json Lite : Extension firefox pour rendre plus lisible
Les données brutes sont stockées dans Yeswiki au format json, une extension firefox permet de formater l'affichage json : extension Json Lite.Pour installer l'extension dans firefox : Ctrl + Maj + A
Rechercher dans les Add-Ons mozilla le mot clé "Json", sélectionner "Json Lite" et installez.
Une fois l'extension installée, retournez sur votre wiki et consultez les données brutes, ca devrait être plus confortable !
Créer un template de fiche
Index
Créer un template de fiche
Les templates personnalisés sont écrits au format twig. C'est un langage qui permet le formatage en html et l'appel à des données bazar, tout en restant facile à lire.Dans quel dossier du serveur faut-il placer les fichiers ?
Un template de fiche doit être nommé fiche-id.twig (id étant l'identifiant du formulaire).Les templates personnalisés sont chargés depuis le répertoire custom/templates/bazar/.
ATTENTION, toutes les fiches possedant cet ID de formulaire seront avec le look personnalisé plutot que le look proposé par défaut... pour pouvoir réutiliser les templates, il faut enlever fiche-id.twig (ou le renommer avec un .old)
Exemple de code source
Un exemple de template de fiche est fourni dans le code source de votre wiki. Il est disponible en accédant via ftp à votre serveur, dans le dossier/docs/examples/templates/bazar
Pour démarrer, vous pouvez copier ce dossier dans votre dossier custom, puis renommer le fichier avec le numero identifiant de votre formulaire.
Il vous reste ensuite à éditer ce fichier et à construire votre mise en page.
Créer un template de liste
Index
Créer un template de liste
Les templates personnalisés sont écrits au format twig. C'est un langage qui permet le formatage en html et l'appel à des données bazar, tout en restant facile à lire.Dans quel dossier du serveur faut-il placer les fichiers ?
Il n'y a pas de convention de nommage pour votre template .twig .Les templates personnalisés sont chargés depuis le répertoire custom/templates/bazar/.
Structure du code
Code pour un template trombinoscope{% if fiches|length > 0 %} <div class="trombi-container "> {% for fiche in fiches %} <a class="bazar-entry modalbox bloc-question" data-size="modal-lg" {{ fiche.html_data|raw }} href="{{ fiche.url}}/iframe" data-iframe="1" {# add /iframe only for external YesWiki entries #} title="{{ fiche.bf_titre|raw|e('html_attr') }}"> <div class="caption trombi-content"> <span class="title">{{ fiche.bf_titre }}</span> </div> </div> </a> <!-- / bazar-entry --> {% endfor %} </div> <!-- / trombi-container --> {% endif %}
Anciens templates .tpl.html
Les templates yeswiki ont longtemps été codés en php dans des fichiers de type .tpl.htmlCes templates fonctionnent encore, cependant ils sont petits à petits réécrits en twig pour une meilleure lisibilité et une meilleure compatibilité avec le reste du code Yeswiki.
Un tuto Convertir un template bazar en twig a été écrit sur le site Yeswiki.net pour nous guider sur la réécriture des templates. Il comprend notamment un tableau de correspondance entre les syntaxes php et twig.
Editeur de code
Index
Editeur de code
Les templates peuvent être édités avec n'importe quel éditeur de texte basique, néanmoins il existe des outils de développement qui peuvent apporter un peu de confort en permettant la coloration syntaxique et l'autocomplétion de votre code.Si vous n'avez pas encore d'éditeur de code, je vous conseille d'installer VsCodium
Exemples
Index
Exemples
Voici quelques exemples de mise en forme pour démarrer.Pour les réutiliser :
- copier les codes sources de ces templates,
- coller le fichier dans votre dossier /custom/templates/bazar
- renommer le fichier avec le numero identifiant de votre formulaire
- adaptez le contenu à votre guise
Pour ces premiers exemples partagés, il manque le fichier css associé ... coming soon
Exemple pour une fiche annuaire
Moveagri
![image membre_moveagri.png (0.2MB)](https://pratic-coop.fr/cache/ExempleS2_membre_moveagri_vignette_140_97_20221207080508_20221207080508.png)
Codes source du template formulaire annuaire id=1 : fiche1.zip (1.8kB) Le formulaire contient une section pour afficher les fiches produite par cet utilisateur.
Syalinnov
![image membre_syalinnov.png (72.5kB)](https://pratic-coop.fr/cache/ExempleS2_membre_syalinnov_vignette_140_97_20221207081151_20221207082508.png)
Codes source du template formulaire annuaire id=1 :fiche1_syalinnov.zip (2.0kB)
Exemple pour une fiche ressources
Adrets - Communs service
![image RESSOURCES_adrets.png (0.1MB)](https://pratic-coop.fr/cache/ExempleS2_RESSOURCES_adrets_vignette_140_97_20221207081151_20221207084507.png)
Codes source du template formulaire ressource id=1 : fiche1_adrets.zip (1.8kB)
Exemple pour une fiche avec des onglets et des fiches liés
![image CapturePage2.png (1.1MB)](https://pratic-coop.fr/cache/ExempleS2_CapturePage2_vignette_300_209_20221207084947_20240329134310.png)
fiche1.zip (2.4kB)
Exemple de graphe en toile d'araignée
![image exemple_rendu_toile.png (56.1kB)](https://pratic-coop.fr/cache/ExempleS2_exemple_rendu_toile_vignette_300_209_20240329144626_20240610162430.png)
Code source d'un template de fiche pour le rendu toile d'araignée
utilise la bibliotheque vega.js
template_toile_araignee.zip (0.2MB)
Inspecter le code
Index
Inspecter le code
Les navigateurs proposent d'inspecter le code de n'importe quel site et de modifier en direct le rendu. Dans Firefox, vous pouvez accéder aux Outil de développement web en appuyant sur F12 ou sur Ctrl + Maj + ICet outil permet d'explorer le code HTML ainsi que le style appliqué à chaque objet de la page. Il est possible de sélectionner directement un objet et d'y appliquer des variantes de style pour tester en direct votre modification.
Les documentations de référence
Index
Les documentations de référence
Documentation twig : https://twig.symfony.com/doc/2.x/templates.htmlDocumentation html : https://www.w3schools.com/html/default.asp
Documentation css : https://www.w3schools.com/css/default.asp
Modifier la couleur du menu
Index
Modifier la couleur du menu
Par défaut, le menu principal est composé d'une barre de couleur primaire sur laquelle les liens sont affichés en blanc ou plus précisemment la couleur claire que vous avez défini dans votre configuration graphique (page LookWiki)Définition des variables de couleur
La page PageCss permet de définir vos propres règles de style en css.Un certain nombre de variables permettent de jouer sur les couleurs sans entrer dans des syntaxes css (qui demandent quelques compétences techniques).
Les variables sont définies dans :root{ } exemple
:root{--primary-color:pink;}
Pour vous aider, ces variables sont déjà présentes dans votre PageCss, elles sont cependant mises en commentaire , à vous de les modifier et les activer en fonction de vos besoins.
/* un commentaire est placé entre ces caractères */
Pour activer des variables, il faudra :
- enlever les caractères / et / sur la ligne souhaitée
- mais également sur la 1ere ligne :root{ et sur la dernière ligne }
Les variables liées à la barre de menu
/* couleur de la barre de menu */ --navbar-bg-color: var(--neutral-light-color); --navbar-text-color: var(--primary-color); --navbar-link-color: var(--primary-color); --navbar-link-bg-color: transparent; --navbar-link-hover-color: var(--secondary-color); --navbar-link-bg-hover-color: transparent; --navbar-border: none; --navbar-border-radius: 0; --navbar-shadow: none;
Le logo
Pour placer votre logo à gauche de la barre de menu : éditer PageTitreAfin de ne pas alourdir votre site, pensez à minimiser votre fichier image, inutile d'avoir une taille de plus de 60px de haut...
La taille de l'image est limitée par la taille de la barre
#yw-topnav .navbar-brand img { max-height: 2.9rem;} /* soit environ 40px de haut */
Modifier cette valeur peut avoir un impact sur l'alignement du logo en version mobile
Il faudra modifier la marge du haut en version mobile
@media mobile and (max-width: 480px) { #yw-topnav .navbar-brand img { max-height: 3.9rem; width: auto; margin-left: .9rem; margin-top: 1rem; } }
Personnaliser le favicon
Index
Personnaliser le favicon
Option 1 : via page Fichier de conf / dans les paramètres principaux Icône du site (emoji ou URL vers une image PNG) - faviconOption 2 :Créer un dossier /custom/themes/margot/images
placer le fichier favicon.png
Prendre en main l'éditeur de page
Index
Prendre en main l'éditeur de page
Pour éditer une page vous pouvez double cliquer sur le contenu ou cliquer sur le lien "Editer la page" situé en pied de page.
Les principaux éléments de mise en forme du texte
Titres
Pour mettre en forme un titre, sélectionnez votre texte et utilisez le menu Format puis choisissez le niveau de titre souhaité.Votre titre est maintenant entouré de = dans l'éditeur yeswiki.
Plus le titre est gros et plus il y a de caractère = . Le maximum est 6, le minimum est 2
======Titre de niveau 1======
=====Titre de niveau 2=====
etc...
Gras, souligné, italique
De la même manière, le pictos B permet de mettre en grasun mot en gras sera repérable dans l'éditeur de page Yeswiki par **
Ajouter une image
le bouton Fichier permet d'insérer une image ou un document jointDes options sont disponibles pour définir la position de l'image (gauche, centre, droit)
Pensez à renseigner le texte alternatif qui sera utile aux malvoyants.
Mise en forme avancée : colonnes, bloc de couleur, ...
Le menu Composants permet d'insérer des éléments de mise en forme avancés.Nous les détaillerons dans un autre chapitre.
Prototyper
Index
Prototyper
Figma est un outil en ligne qui permet de réaliser des maquettes de vos futures réalisations.Vous avez la possibiliter de partager ces maquettes à votre équipe qui pourra anoter des remarques, ou même proposer des améliorations.
Pour chaque objet on peut extraire le code css facilement, ce qui facilitera le travaiul d'intégration.
Rédiger les textes de présentation
Index
Rédiger les textes de présentation
Gagnez en lisibilité avec des contenus bien rédigés !
La chose la plus importante sur votre site est son contenu. Les textes doivent être rédigés avec soin et être correctement calibrés afin de rester digestes.
Comment une page web est-elle parcourue ?
A l’ecran on lit 25% moins vite que sur papier, seuls 20% des internautes lisent mot à motLe sens de lecture n’est pas figé à l’inverse de celui d’une phrase
Notion de Front Loading
Le parcours visuel pour l'internaute est le plus souvent en forme de F 'F shaped pattern'. Le lecteur ne lit que les 1ers mots, le 1er tiers de la phrase doit contenir les informations principales. Les titres sont 5 fois plus lus que le reste.
La ligne de flottaison (ce qui est affiché à l'écran avat de commencer à scroller) est une barrière pour le contenu
Quelques points de repères pour vous aider à préparer vos contenus
Titre
Entre 5 et 15 motsIntroduction
Entre 50 et 100 motsElle doit contenir :
- une phrase d'accroche
- définir le sujet et son contexte
- la problématique (donne un angle et s'articule autour du besoin)
- annonce le plan
Texte d'habillage
Entre 100 et 150 mots- Quand le projet/ la structure a t il été créé ?
- Quel est le secteur d'activité ?
- Quelle est la zone d'intervention ?
- Quel est le profil des membres / des participants ?
- Quelles sont les idées principales ?
Conclusion
Entre 150 et 200 mots- complète l'introduction
- donne des éléments de réponse
- incite à aller plus loin
- suggère une action
- laisser une ouverture
Quelques conseils
Ecriture journalistique : 4 C - Court concis concret connuConnu = registre de vocabulaire connu
Informer c’est choisir , sélectionner les infos les plus pertinentes en fonction de l’angle que l’on a choisi
5W2H Who What When How
Qui ? il s’agit du sujet de l’information
- Telle personne a commis telle action
- Telle personnalité a formulé telle déclaration
- Tel évènement a engendré telle conséquence
Où ? L’endroit où se passe l’évènement
Règle d’écriture : pyramide inversée
En 1er l’information essentielleOn développe
A la fin on commente
Titre
Chapeau
Texte
Utile également à l’oral pour les pitch
C’est pas du tout le principe intro – développement – conclusion
L’accroche permet de commencer par un fait insolite pour créer une ambiance.
Penser au confort de lecture
Des textes écrits sur une trop grande largeur sont plus fatiguants à lire. La meilleure lisibilité est obtenue pour une largeur de ligne entre 50 et 75 caractères.La structure de votre page contribuera à améliorer le confort de lecture en intégrant des colonnes, des illustrations, des espaces vides.
Quelques repères pour un texte bien calibré
Titre 4 à 10 motsPhrases 12 à 15 mots
12 mots = 70% de mémorisation
Pensez au maximum à utiliser la forme active
Référencement naturel
Index
Référencement naturel
Comment apparaitre dans les moteurs de recherche sans payer de publicité ?
Choisir les bons mots clés
Si votre structure (votre entreprise ou votre association) est connue du public, il est fort probable que les personnes qui veulent en savoir plus sur vous tape sur leur moteur de recherche votre nom / votre marque - 1er mot clé identifié : facile.
Maintenant il faut élargir un peu le spectre et formuler votre domaine d'expertise en 2 ou 3 mots : exemple "site web collaboratif"
Les mots et expression qui nous viennent lorsqu'on cherche sur un moteur de recherche sont souvent très basique.
Une bonne astuce pour explorer les mots clés
Ouvrez une page avec votre moteur de recherche préféré et taper un mot clé en lien avec votre activité, vous verrez apparaitre par autocomplétion une liste d'expression fréquemment recherchés.C'est un bon indicateur pour voir si votre mot clé à des chances d'être un jour recherché ou si votre contenu est totalement niché auprès d'un public restreint.
Explorer les mots clés de vos concurrents
Le site 1.fr permet d'explorer les mots clés champ sémantique à partir du lien vers un site vous pouvez lancer l'analyse sur votre site ou sur le site d'un de vos homologue pour vous donner des idées de mots à utiliser : le vocabulaire est simple et cela permet d'enrichir les textes tout en restant facile à comprendre pour lles visiteurs.Utilisez vos mots clé
Pensez à décliner vos mots clés dans vos titres, vos textes et vos illustrations. Le nom des images compte également. Evitez de laisser le nom du fichier brut : DCS2022142563.jpgOn a souvent peur de se répeter ou de faire des phrases lourdes, mais il est utile de trouver des phrases qui reprennent le mot clé.
Performance du site
Un site lent sera moins bien référencé, pensez à optimiser le poids de vos images avant de les mettre en ligne.En plus ca réduira votre impact environnemental !
Pour tester le poids de votre site wbe : https://www.ecoindex.fr/
Liens internes et liens externes
Plus il y a de liens sur vos pages et plus il est facile de naviguer, la lecture d'un site n'est pas comme la lecture d'un livre on ne l'aborde pas de la première à la dernière page, pensez à toutes les passerelles possibles pour surfer d'une page à une autre et permettre à l'internaute de creuser l'info rapidement.Les liens vers d'autres sites de référence dans votre domaine sont également un gage de qualité pour les moteurs de recherche.
Style des titres
Index
Style des titres
Personnaliser la couleur des titres
Dans PageCss , vous trouverez ce code prêt à être adapté à vos gouts et vos couleurs.Des variables de couleurs ont été définies dans le thème Margot, vous pouvez les modifier :
- soit en utilisant les couleurs de votre thème
par exemple pour utiliser la couleur primaire vous utiliserz la variable --title-h1-color:var(--primary-color);
- soit en utilisant un code couleur hexadecimal :
par exemple --title-h2-color:#ea663c;
- soit nommer la couleur : red, green, blue - c'est plus simple mais le choix est réduit ... (listes des couleurs que l'on peut nommer)
:root { --title-h1-color:var(--neutral-color); --title-h2-color:#ea663c; --title-h3-color:Fuchsia; --title-h4-color:var(--secondary-color-2); }
- Si vous souhaites aller plus loin, vous pouvez aussi définir vos propres style avec toutes les propriétés css que vous voulez :
/* pour les titres de niveau 1 */ h1 { color:red; border:2px solid blue; } /* pour les titres de niveau 2 */ h2 { .... }
Titre avec un effet surligné
L'astuce pour avoir une couleur de fond légèrement décalée comme sur cet exemple, c'est de définir un dégradé transparent sur 60% de la hauteur du titre, puis de la couleur de votre choix sur 40%
L'utilisation d'un dégradé est possible en utilisant la propriété CSS background-image.
L'utilisation d'un dégradé est possible en utilisant la propriété CSS background-image.
h3 {
- font-size: 1.2rem;
- color: var(--neutral-color);
- background-image: linear-gradient(transparent 60%, rgb(253, 193, 0) 40%);
- width: fit-content;
Titre avec un petit trait dessous
Syntaxes twig pour afficher du contenu yeswiki
Index
Syntaxes twig pour afficher du contenu yeswiki
Afficher la valeur brute d'un champ
{{fiche.identifiant}}
Pour le mettre en forme vous pouvez y ajouter les balises html de votre choix :
exemple pour un titre
<h1 class="BAZ_fiche_titre">{{fiche.bf_titre}}</h1>
Pour info veillez à conserver la classe "BAZ_fiche_titre" pour le titre de votre fiche - il est notamment utile dans l'affichage accordéon (évite d'avoir un doublon)
Afficher une partie d'un texte long
{{fiche.bf_description1[:250]}}
Voir documentation twig slice
Afficher le champ pré-formaté
Pour afficher vos données avec la mise en forme prévue dans yeswiki utilisez la syntaxe suivante :{{html.identifiant}}
Cette syntaxe est utile pour les champs de type date, mail, liste, fichier, etc...
Fonction displayFieldIfNotEmpty
En copiant le modèle /www/docs/examples/templates/ dans votre dossier custom, vous bénéficiez de fonctions génériques permettant de faciliter le rendu : les helper.entryHelper.displayHtml retourne la/les valeurs d'un champ liste
{{ entryHelper.displayHtml(html.listenom_champ,'optionnal label','optionnal class css') }}
entryHelper.displayHtmlIfNotEmpty retourne le champ formaté précédé par son libellé en gras après avoir vérifié son existence
{{ entryHelper.displayHtmlIfNotEmpty('Libellé','FieldName',html) }}
Formater un champ checkbox ou un champ tag
Ces champs peuvent contenir plusieurs valeurs, elles sont enregistrées sous forme de liste séparés par des virgules, pour les formater, il faut donc traiter la chaine de caractères en isolant chacune des valeurs de la liste pour pouvoir gérer la mise en forme de chaque élément.la fonction split dans twig permet de découper une chaine selon le caractère spécifié (ici ',')
exemple avec tag
{% for tag in fiche.bf_tags|split(',') %} <div class="trombi-content"> {{tag}} </div> {% endfor %}
exemple avec checkbox
Pour formater de manière personnalisée les valeurs des checkbox, comme dans l'exemple ci-dessous dans des étiquettes
{% set fieldOptions = (form.prepared|filter(f => f.propertyname == 'checkboxListeViolence')|first).options %} {% for element in fiche.checkboxListeViolence|split(',')|filter(o => o is not empty) %} <span class=" label label-primary"> {{fieldOptions[element]|raw}} </span> {% endfor %}
Afficher une image
Le code ci-dessous permet de redimensionner une image avant de l'afficher.{% if fiche.imagebf_image is not empty %} {# you can choose width, height (in px) and mode "fit" or "crop" #} {% set imageFileAddr = urlImage({fileName:"files/#{fiche.imagebf_image}",width:200,height:200,mode:"crop"}) %} {% if not(imageFileAddr is same as(false) or imageFileAddr matches '/^\\d+$/') %} {# imageFileAddr is not false or not integer otherwise error #} <img class="center custom-entry" alt="{{ fiche.bf_titre|e('html_attr') }}" src="{{ imageFileAddr }}" /> {% endif %} {% endif %}
Utiliser une syntaxe Yeswiki dans le template twig
{{ format('{{include page="' ~ fiche.id_fiche ~ '"}}') }}
Afficher des fiches liées
{{ format('{{bazarliste id="5" template="blog-custom" champ="bf_date" header="false" nb="10" ordre="desc" show_author="1" show_date="1" query="listefiche8=' ~ fiche.id_fiche ~ '"}}')|raw }}
Afficher pour les admins seulement
{# --- Start reserved admins info --- #} {% if hasAcl("@admins",fiche.id_fiche) %} <div class="panel panel-warning"> <div class="panel-heading center"> <h4><i class="far fa-hand-point-right"></i> Administration</h4> </div> <div class="panel-body"> {{ entryHelper.displayHtml(html.listeListeProjects,'Project','') }} {{ entryHelper.displayHtml(html.checkboxListeParamsbf_display_params,'Display','') }} </div> </div> {% endif %}