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 responsive
sauts 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;}
}
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
Action {{grid ...}} : l'action {{grid ...}} doit être fermée par une action {{end elem="grid"}}.
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é.

Action {{grid ...}} : l'action {{grid ...}} doit être fermée par une action {{end elem="grid"}}.
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 correspondent à la palette de 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
Index

Syntaxes twig pour afficher du contenu yeswiki

Un template twig permet de concevoir une structure de page en HTML et d'y intégrer des petits bouts de code dynamique.
2 syntaxes à connaitre pour débuter :
- {{ ... }} permet d'afficher la valeur d'une variable
- {% ... %} permet d'executer un traitement (condition, boucle, ...)
Au moment d'afficher le rendu d'une fiche bazar, vous disposez de deux objets disponibles au format JSON :
fiche et html
Dans fiche sont stockées les valeurs brutes de chaque champ, c'est à dire lorsque c'est un champ de type liste, c'est l'index de la liste qui est stocké dans fiche.champ_liste
Dans html on dispose de la valeur préformatée, pour notre liste on aura l'intitulé entier.
Pour afficher la valeur du champ bf_titre, vous pouvez écrire :
<h1>{{fiche.bf_titre}}</h1>

Pour un texte long :
{{html.bf_description|raw}}

Le contenu d'un champ texte long peut contenir des éléments de mise en forme, c'est pourquoi on affiche de préférence la valeur préformattée html.bf_description, en twig il faut ajouter |raw pour indiquer qu'il s'agit d'un code HTML à interpréter

Ajouter une condition

If ... Else ...
Vous avez la possibilité de tester la valeur d'un champ et de définir des options d'affichage.
{% if fiche.listeinscription == "obligatoire" %}
    <p>L'inscription est obligatoire, merci de compléter le formulaire suivant : {{html.url_inscription}}</p>
   {% else %}
   <p> Entrée libre dans la limite des places disponibles.
{% endif %}

Notez la présence d'un double signe = pour tester :
{% if champ == "valeur" %}

Pour tester si la valeur est différente :
{% if champ != "valeur" %}

Pour tester si une valeur a été saisie :
{%  if champ %}

Quelques bouts de code à copier coller

Aucun résultat