Des bouts de codes à copier-coller !

Documentations Yeswiki

Pages


Pour créer une page sur Yeswiki, il suffit d'écrire un mot avec deux majuscule sur une page du site.
si vous écrivez par exemple ActualiteBlog, le mot s'affichera en vert sur la page et correspond au lien vers votre nouvel page. elle sera vide, il faudra y ajouter du code.

Pour que ça soit pas trop le bordel avec des pages dans tous les sens. je vous invite à créer vos pages dans Pages en développement dans la roue crantée. ça se présente comme un sommaire ou vous pouvez trouver une catégorie pour ranger votre page ou en créer une nouvelle.

Pour ajouter une page, éditer la page et copier coller un des liens déjà présent et modifier le à votre convenance.
(ce code peut vous servir à faire d'autre lien)

- La partie gauche correspond au nom de votre nouvelle page avec 2 majuscules
- La partie droite correspond au texte affiché sur le sommaire.

  • - [[FormulaireEvenement FORMULAIRE EVENEMENT]]

Dans yeswiki, le nom de votre page correspond à son URL, cad que vous pouvez l'utiliser pour vos liens, vous êtes pas obliger de mettre l'URL complète https://..........
Par contre pour des pages extérieurs au site, il faut bien mettre l'URL complète.

Externe au site

[[http://www.exemple.com TEXTE A AFFICHER POUR UN LIEN EXTERNE AU SITE]]
qui donne : TEXTE A AFFICHER POUR UN LIEN EXTERNE AU SITE

Interne au site

[[PageDeCeWiki Texte à afficher pour le lien interne]]
qui donne : Texte à afficher pour le lien interne

Lien qui force l'ouverture vers une page extérieure

""<a href="http://exemple.com" target="_blank">ton texte</a>""

Si vous déposez du html dans la page wiki,
pour qu'il soit interprété, il faut l'entourer de deux guillemets de part et d'autre du code comme ceci : "" <bout de html> ""
Le texte sera visible seulement dans l'espace de modification et pas sur la page. Ce qui permet de mettre des commentaires à côté du code, soit pour l'ordonner soit dans le cadre d'un travail collaboratif.
""<!-- en utilisant ce code on peut mettre du texte qui n'apparait pas sur la page... ce qui permet de laisser des explications par exemple ou même d'écrire du texte en prépa d'une publication future -->""

  • L'espace texte d'une fiche peut servir à intégrer un bout de code : un iframe, un tableau, une action, un graph...

Un iframe permet de faire apparaitre le contenu d'une autre page internet sur sa fiche. c'est comme un encadré dans lequel apparait une autre page internet. Cela permet de montrer tout de suite un élément sans avoir à passer par un lien.
Exemples d'iframe : video youtbe, tableau excel, page d'un autre site....

Code :
""<iframe width=100% height="750" src="VOTRE LIEN" frameborder="1" allowfullscreen></iframe>""


Puis l'adapter à vos besoins :

Width= % : Correspond à l'espace occupé par l'iframe sur la largeur de la page, 100 étant le maximum
height=" " : Correspond à l'espace occupé par l'iframe sur la hauteur de la page
frameborder=" " : afficher un cadre à l'iframe ou pas de cadre / 1=oui 0=non

Ne pas oubliez de mettre/laisser les 2 guillemets au début et à la fin

Texte

**Gras**

//Italique//

__ Souligné __

@@Barré@@

======Titre 1======

=====Titre 2=====

====Titre 3====

===Titre 4===

==Titre 5==
""<span style="color:#votrecodecouleur;">votre texte à colorer</span>""
Quelques codes couleur => mauve : 990066 / vert : 99cc33 / rouge : cc3333 / orange : ff9900 / bleu : 006699Voir les codes hexa des couleurs : http://fr.wikipedia.org/wiki/Liste_de_couleurs

Mise en forme

""<CENTER>VOTRE TEXTE</CENTER>""
qui donne:
VOTRE TEXTE



"Une petite colonne, ça fait toujours un peu plus cossue" Caius Camillus

Faire des colonnes permet d'organiser votre page, de la découper, de l'ordonner. Vous pouvez mettre du texte et une image à côté....

Vous pouvez le récupérer le code dans la boite à outil Yeswiki ou ci-dessous :

Une page se découpe en 12 parties que vous pouvez adapter comme bon vous semble
L'exemple ci-dessous présente deux colonnes de 6. mais vous pouvez faire 4 et 8 ou 4, 4 4... enfin toute les combinaisons que vous voulez.

{{grid}}

{{col size="6"}}

texte, image.... de la colonne 1

{{end elem="col"}}
{{col size="6"}}

texte, image.... de la colonne 2

{{end elem="col"}}
{{end elem="grid"}}


donnera :


texte, image.... de la colonne 1


texte, image.... de la colonne 2


Description

{{grid}}
permet de dire qu'on veut faire des colonnes

{{end elem="grid"}}
indique de fermer toutes les colonnes

{{col size="6"}}
permet de créer une colonne, le chiffre correspond à la largeur

{{end elem="col"}}
ferme la colonne précédente

Tricks

Si vous voulez créer un espace entre deux éléments sur une page, vous pouvez créer une colonne de largeur 1 que vous laissez vide.


Nav nav-tabs


Cela permet de créer un menu horizontal qui redirige vers d'autre pages. Pour le menu "Navs bar" apparaisse sur toutes les pages, il faut mettre le code sur toutes les pages concernées.

Le code se décompose en deux partie :
- nav link : Mettre les liens des différentes pages séparées par des virgules, Les liens apparaitront de gauche à droite sur la page
- Titles : Mettre, dans le même ordre que les liens les titres des barres de navigation. Il faut également les séparer par des virgule

Copier le code ci-dessous et coller le dans le menu edition de votre page, adaptez le code selon le nombre de barre de navigation que vous souhaitez :
{{nav links="Lien 1, Lien 2, Lien 3,  Lien 4"  titles="Titre 1, Titre 2, Titre 3, Titre 4" class="nav nav-tabs"}}

Un exemple ci-dessous :


  • Par exemple si vous souhaitez juste 2 barres de navigation, le code se présentera comme ceci :
    {{nav links="Lien 1, Lien 2"  titles="Titre 1, Titre 2" class="nav nav-tabs"}}
qui donnera :


  • Vous pouvez appliquez un format d'écriture aux onglets en les mettant en gras, souligné ou italique comme l'exemple ci-dessous
**{{nav links="Lien Barre Navigation 1, Lien Barre Navigation 2, Lien Barre Navigation 3, Lien Barre Navigation 4"  titles="Titre Barre Navigation 1, Titre Barre Navigation 2, Titre Barre Navigation 3, Titre Barre Navigation4" class="nav nav-tabs"}}**

qui donne :



Vous pouvez utiliser le code ci-dessous :
{{backgroundimage class="img-rounded black" bgcolor="#BDD8F2" }}

====VOTRE==== ===**TEXTE**=== qui se //paramètre// comme ====vous le voulez====

{{endbackgroundimage}}


qui donnera :


VOTRE

TEXTE

qui se paramètre comme

vous le voulez



bgcolor="#F2DD9F" : vous pouvez changer la couleur de fond, voir charte des couleurs


Télécharger le fichier palette_couleurajuster.png

#59748C
Couleur Wiki: success


#F2DD9F
Couleur Wiki : warning

#D88F36
Couleur Wiki : danger

#A55F21
Couleur Wiki : primary

#592A0F
Couleur Wiki : info


Pour faire un onglet dépliant comme celui-ci, utiliser le code ci-dessous : 

{{accordion}}
{{panel title="TITRE DE VOTRE ONGLET PANEL" class="panel-default"}}

VOTRE CONTENU

{{end elem="panel"}}
{{end elem="accordion"}}



{{accordion}}
indique qu'on veut commencer à faire des onglets panel

{{end elem="accordion"}}
Ferme l'ensemble des onglets panel

{{panel title=" "}}
Ouvre un onglet panel

{{end elem="panel"}}
Ferme l'onglet panel


  • class="panel-default" : vous pouvez changer la couleur du panel en modifiant la class,
vous pouvez remplacer défault par warning ou primary ou sucess ou info ou danger






Le plus "simple" est encore d'utiliser le code ci-dessous :


Donne:

ligne 1 colonne 1 ligne 1 colonne 2 ligne 1 colonne 3
ligne 2 colonne 1 ligne 2 colonne 2 ligne 2 colonne 3
ligne 3 colonne 1 ligne 3 colonne 2 ligne 3 colonne 3
ligne 4 colonne 1 ligne 4 colonne 2 ligne 4 colonne 3


Attention avec les espaces ! Tout particulierement, ne mettez aucun caractère (même pas d'espace) derrière le |
qui marque la fin de la fin d'une la ligne (dernière colonne).

Boutons

  • Couleurs

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-primary" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}



Cela donne un bouton comme ça :
Texte affiché sur le bouton

  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... sans déconner... :-)
Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}



Cela donne un bouton comme ça :
Texte affiché sur le bouton

  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... sans déconner... :-)

  • Types de boutons


Il redirige vers une autre page

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}



Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON

  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... sans déconner... :-)

  • Il redirige vers une autre page mais dans un nouvel onglet
  • La page initial reste ouverte


Copier le code ci-dessous et coller le dans le menu edition de votre page :
""<a href="VOTRE LIEN" target="_blank" class="btn btn-warning">TEXTE AFFICHE SUR LE BOUTON</a>""



Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON


  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... vous avez compris non ? :-)

Il ouvre une fenetre pop-up dans laquelle il fait apparaitre la page correspondant au lien que vous avez renseigné dans le code


Copier le code ci-dessous et coller le dans le menu edition de votre page : 
{{button class="btn-warning modalbox" link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}



Un exemple ci-dessous :
TEXTE AFFICHE SUR LE BOUTON

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-lg" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-sm" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-xs" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-block" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON

  • Tricks


Vous pouvez combiner les éléments et faire par exemple un gros bouton pop-up ou un bouton XS nouvel onglet.
il faut modifier la "class" vous copier la class d'un bouton et vous l'ajouter à un autre.

Description de la Class

  • btn : indique que c'est un bouton
  • btn-warning : correspond à sa couleur, voir charte de couleur
  • btn-lg : indique la taille du bouton en l'occurence large. si il y a rien, ce sera le bouton par défaut.

Exemple Gros bouton nouvel onglet :

""<a href="VOTRE LIEN" target="_blank" class="btn btn-warning btn-lg">TEXTE AFFICHE SUR LE BOUTON</a>""


Exemples de codes HTML


Permet d'ordonner une page, de séparer du texte...

Vous pouvez adapter la barre selon vos envies en adaptant les paramètres ci-dessous :

- height: xx px : Modifie les pixels c'est à dire l'épaisseur de la barre
- color: Modifie la couleur de la barre - se référer aux couleurs définis plus haut dans la rubriques "Les Couleurs"
- width: modifie la longueur de la ligne : 100% = toute la largeur de la page

Copier le code ci-dessous et coller le dans le menu edition de votre page : 
""<hr style="height: 2px; color: #A55F21; background-color: #A55F21; width: 50%; border: none;">""

Un exemple ci-dessous :



la balise pour le retour à la ligne est 
<br />
à mettre entre des guillemets si on veut qu'elle soit interprétée


AU SEIN DES FORMULAIRES, CELA SE PRESENTERA COMME CI-DESSOUS :
Pour faire un espace dans un formulaire, il faut mettre un bout de code, sauter une ligne ne sert à rien (à part y voir plus clair dans sa page de code)

Espace en mode vue
labelhtml*** *** ***<br />***


Espace en mode saisie
labelhtml***<br />*** *** ***


Espace en mode saisie et vue
labelhtml***<br />*** ***<br />***




""</h2><br /><div style="padding:5px; background-color:#F2DD9F; border:2px solid #A55F21; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;"
<br /><h4><strong>VOTRE TITRE</strong></h4>
<h4>VOTRE TEXTE</h4><br />
</div><br />""


Donne :

VOTRE TITRE

VOTRE TEXTE





Détail :

<h4>TEXTE</h4> Taille du titre, plus le chiffre un grand et plus le titre est gros
<strong>TEXTE</strong> Mettre un texte en gras
background-color:#F2DD9F : couleur de fond cf la charte des couleurs
border:2px : épaisseur du cadre
border-radius:9px importance de l'arrondi du cadre
le reste je vous laisse le découvirir...
<br /> mettre des retours à la ligne

Actions

Permet de créer un petit formulaire qui envoie un message à l'adresse email renseigné. Permet de cacher aux yeux du grand public l'dresse email.
Le niveau de sécurité de cette application n'est pas très élevé mais pour l'instant je n'ai toujours pas été spammé..
Voir exemple : https://lacagette-coop.fr/?PageAdrienLeurent

Code :
{{contact mail="adresse.mail@exemple.com"}}



Je souhaite faire apparaitre une autre page du site sur ma page.

Code : 
{{include page="NomPageAInclure"}}

Pour inclure une page d'un autre yeswiki : ( Noter le pipe | après les premiers [[ ) 
[[|http://lesite.org/nomduwiki PageAInclure]]