Aide:Trucs et astuces
Aide
{{#if:| {{{1}}}
}}Trucs et astuces
Sommaire
- 1 Souligner du texte
- 2 Barrer/Rayer du texte
- 3 Mettre du texte en couleur
- 4 Faire un lien vers une Catégorie
- 5 Faire des saut de lignes forcés
- 6 Forcer la purge du cache
- 7 Utilisation du signe = dans les modèles.
- 8 Protéger les adresses mail
- 9 Faire un cadre avec le modèle 'Relief'
- 10 Petite flèche originale
- 11 Afficher simplement une image
- 12 Couper une page, ou du texte, en un certain nombre de colonnes
- 13 Faire une liste horizontale avec des • pour séparer les éléments
- 14 Encadrer un texte simplement
- 15 Encadré simple 2
- 16 Colonnes avec séparateur (code pur, sans modèle)
- 17 Section déroulante
- 18 Exemple de section déroulante
- 19 Section déroulante (groupe)
- 20 Titre du groupe de sections
- ► {{#if:Les trucs et astuces améliorent vraiment l'usage du site. N'hésitez pas a y ajouter les vôtres !|Les trucs et astuces améliorent vraiment l'usage du site. N'hésitez pas a y ajouter les vôtres !|#ceeba8}}
Balise d'extension « inputbox » inconnue
Souligner du texte
Utiliser le modèle Souligner, ou les balises U : <u>Votre Texte</u>
- exemple
-
{{S|ceci est le texte souligné}}
- donne
ceci est le texte souligné
Barrer/Rayer du texte
Utiliser le modèle Rayer, ou les balises S : <s>Votre Texte</s>
- exemple
-
{{R|ceci est le texte rayé}}
- donne
ceci est le texte rayé
Mettre du texte en couleur
Utiliser le modèle Couleur, ou les balises span : <span style="color: #8814CC;">Votre Texte</span>
- exemple
-
{{Couleur|#8846F0|Un texte violacé.}}
- donne
Un texte violacé.
- et
-
{{Couleur|#FFA500|Texte en #FFA500 sur fond #8814CC|#8814CC}}
- donne
- Texte en #FFA500 sur fond #8814CC.
Faire un lien vers une Catégorie
Un lien de type [[Catégorie:Aide]]
ne créé pas un lien dans le texte, mais ajoute une catégorie en bas de page. (voir Aide:Catégorie).
Il faut donc tricher pour éviter au modèle de se générer. L'ajout d'un simple :
suffit à éviter cela.
- exemple
[[:Catégorie:Aide]]
- done
Faire des saut de lignes forcés
En règle générale, le texte s'étend sur toute la largeur de la fenêtre (elle se redimensionne suivant la taille ou la résolution de l'écran). Mais bien souvent on a besoin de forcer ce saut à la ligne. Pour ce faire, 2 solutions :
- ► Soit faire un double saut de ligne (Tapez deux fois sur entrée entre chaque paragraphes)
- ► Soit ajoutez un
<br>
en fin de ligne.
(Le double saut de ligne étant préférable car il permet d'aérer le code. Les rédacteurs qui passeront après auront donc une plus grande facilité à se retrouver dans la page).
- ► D'autres méthodes existent pour personnaliser les saut de ligne. Voir Aide:Saut de ligne
Forcer la purge du cache
Après chaque modification de modèle, il faut vider le cache de son navigateur. Sur la plupart du temps c’est :
CTRL
+ F5
ou CTRL
+ r
.
On peut aussi si nécessaire purger le cache des serveurs pour la page en cours, ce qui est surtout utile lorsqu’on fait des modifications de modèles ou de sous-pages : &action=purge
(code à copier/coller à la fin de l’adresse dans la page courante, dans la barre du navigateur). (voir Aide:Purge_du_cache pour plus de détails).
Utilisation du signe =
dans les modèles.
Ne pas utiliser les signe =
dans les modèles. Il faut utiliser {{=}}
ou écrire <nowiki>=</nowiki>
Protéger les adresses mail
Les @ dans les adresses mail sont captés par les trackers web. Un simple {{@}}
suffit à éviter celà.
- exemple
- contact
matrices.info
Faire un cadre avec le modèle 'Relief'
Ce modèle est paramétrable. Les paramètres sont les suivant : {{Relief|texte|fond=|bordure=|largeur=|ombre=|alignement=}}
Seul le paramètre texte est obligatoire. exemple
{{Relief|Mon texte mis en valeur}}
- donne
Mon texte mis en valeur
Exemple avec des paramètres modifiés :
{{Relief|Mon texte mis en valeur|fond=#ceeba8|bordure=#89d2ae|largeur=45|ombre=#8dc56c|alignement=center}}
- donne
Mon texte mis en valeur
- Remarque. La largeur se donne en pourcentage de la largeur de la page (de 0 à 100). L'alignement est a écrire en anglais (left, center ou right)
Petite flèche originale
:{{F}} Mon texte
- donne
- ► Mon texte
- Remarque. Pensez à utiliser le symbole
:
au début de la ligne
Afficher simplement une image
Pour afficher simplement une image, il suffit d'écrire [[Image:nom-de-l'image.png]]
et elle s'affiche directement.
Pour la redimensionner il faut écrire [[Image:nom-de-l'image.png|60px]]
(60px correspondant à la largeur de l'image)
exemple :
[[Fichier:Monitored_by_WikiApiary.png|60px]]
- donne
Pour l'aligner à droite, ou la centré etc.. ajouter |right
exemple :
[[Fichier:Monitored_by_WikiApiary.png|60px|right]]
- donne
- Remarque. écrire en anglais (left, center ou right)
Couper une page, ou du texte, en un certain nombre de colonnes
Le modèle {{Colonnes|nombre=3|
permet de couper la page en un certain nombre de colonnes.
Soit utiliser |nombre=3
, mais pour l'affichage sur les portables et tablettes, vous pouvez aussi définir le nombre de colones en fonction de la largeur d'une de celle ci. Pour cela, définir {{Colonnes|taille=25
. Les exemples ci après montrent ce que ça donne.
- bien entendu, fermer le modèle avec
}}
à la fin.
{{colonnes|nombre=3| # [[Aide:Cadres]] # [[Aide:Catégories]] # [[Aide:Comment se déplacer]] # [[Aide:Couleur]] # [[Aide:MonBrouillon]] # [[Aide:Mots_magiques]] # [[Aide:Mumble]] # [[Aide:Onglets]] # [[Aide:Purge_du_cache]] # [[Aide:Redirection]] # [[Aide:Signature]] # [[Aide:Supprimer_une_page]] # [[Aide:Trucs_et_astuces]] # [[Aide:Utiliser_la_page_discussion]] }}
- donne
- et
{{colonnes|taille=25| # [[Aide:Cadres]] # [[Aide:Catégories]] # [[Aide:Comment se déplacer]] # [[Aide:Couleur]] # [[Aide:MonBrouillon]] # [[Aide:Mots_magiques]] # [[Aide:Mumble]] # [[Aide:Onglets]] # [[Aide:Purge_du_cache]] # [[Aide:Redirection]] # [[Aide:Signature]] # [[Aide:Supprimer_une_page]] # [[Aide:Trucs_et_astuces]] # [[Aide:Utiliser_la_page_discussion]] }}
- donne
- Remarque, dans cet exemple les numéro sont réalisés avec le
#
du début des lignes. C'est pas automatique, vous pouvez aussi commencer vos lignes avec:
ou*
(Aide:Syntaxe) .
== titres de section ==
, ou les les caractères « |
» et « =
», dans ce cas il faut utiliser {{début de colonnes{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}}}
et {{fin de colonnes{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}}}
| ![]() | {{#if: Quand vous faite des colonnes pour une grande section (et surtout si le contenu à découper en colonnes contient des Quand vous faite des colonnes pour une grande section (et surtout si le contenu à découper en colonnes contient des == titres de section == , ou les les caractères « | » et « = », dans ce cas il faut utiliser {{début de colonnes{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}}} et {{fin de colonnes{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}}} | }}
|}}![]()
- exemple
{{début de colonnes|nombre=2}} * [[Aide:Cadres]] * [[Aide:Catégories]] * [[Aide:Comment se déplacer]] * [[Aide:Couleur]] * [[Aide:MonBrouillon]] * [[Aide:Mots_magiques]] * [[Aide:Mumble]] * [[Aide:Onglets]] * [[Aide:Purge_du_cache]] * [[Aide:Redirection]] * [[Aide:Signature]] * [[Aide:Supprimer_une_page]] * [[Aide:Trucs_et_astuces]] * [[Aide:Utiliser_la_page_discussion]] {{fin de colonnes}}
- donne
Faire une liste horizontale avec des •
pour séparer les éléments
Utiliser le modèle{{°}}
(Le symbole ° de N°).
- exemple
[[Projet:Recherche]] • [[Projet:Mlab|Mlab]] • [[Projet:Cafet|Cafétéria]]
- donne
Encadrer un texte simplement
- Si vous voulez le mettre en forme plus expressément, utiliser le modèle
{{Cadre}}
- exemple
{{Cadre}}<center> [http://www.uoh.fr/front/sujet?id=16489599-0272-482d-a250-c4ea2f0ddcf9 Le projet de l'UOH] • [http://www.uoh.fr/front/sujet?id=a9ef792b-dafa-421f-a5b9-7b54a7ffedd8 Appel à projets du printemps 2014] • [http://www.uoh.fr/front/sujet?id=bdbba4bd-723e-4109-bc61-e4f4e1a607e7 Ressources en cours de production] • [http://www.uoh.fr/front/sujet?id=9ff67cda-8fb3-4c72-bc9f-a1160c9b0e11 Comment adhérer?] </center>{{Fin}}
- donne
Encadré simple 2
Ce modèle est paramétrable. Les paramètres sont les suivant : {{Encadré|alignement=|image=|lien=|fond=|largeur=|titre=|contenu=}}
- L'alignement par défaut est à droite. Si vous voulez modifier, écrire en anglais (left, center ou right).
- exemple simple
{{Encadré | fond = #FFF8F8 | titre = Un encadré | contenu = * bla bla bla bla bla bla bla bla bla bla bla bla * bla * bla }}
- donne
[[Image:{{{image}}}|40px|link={{{lien}}}]] | Un encadré | Un encadré
}} | ||
|
- et avec une image
{{Encadré | image = Logo.png | lien = Accueil | largeur = 100px | titre = Le titre | contenu = bla bla bla bla bla bla bla bla bla bla bla bla }}
- donne
![]() |
Le titre | Le titre
}} | ||
bla bla bla bla bla bla bla bla bla bla bla bla |
Colonnes avec séparateur (code pur, sans modèle)
- Avec 2 colonnes (width=50%)
{| style="background:transparent" |- valign=top | style="padding-right:5px" width=50%| === Colonne 1 === Colonne 1 | style="border-left:1px solid #c2dfff;padding-left:5px" | === Colonne 2 === Colonne 2 |}
- donne
Colonne 1Colonne 1 |
Colonne 2Colonne 2 |
- Avec 4 colonnes (width=25%)
- même code, changez
width=50%
parwidth=25%
, et ajoutez les deux colonnes supplémentaires (rappel, vérifier que le|}
est bien à la fin). - ça donne
Colonne 1Colonne 1 |
Colonne 2Colonne 2 |
Colonne 3Colonne 3 |
Colonne 4Colonne 4 |
Section déroulante
Les modèles {{Section déroulante début{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}}}
et {{Section déroulante fin{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}{{#ifeq:|x||}}}}
permettent de créer une section de contenu enroulée, ouverte en cliquant sur son titre :
- exemple
{{Section déroulante début |titre=Exemple de section déroulante }} {{Lorem ipsum}} {{Section déroulante fin}}
- donne
Exemple de section déroulante
Lorem ipsum dolor sit amet{{#ifexpr:9>1 | , consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.}}{{#ifexpr:9>2 | Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.}}{{#ifexpr:9>3 |
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.}}{{#ifexpr:9>4 |
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.}}
Section déroulante (groupe)
Lorsque plusieurs sections déroulantes sont utilisées à la suite, il est possible de les associer pour les doter automatiquement d'un lien « tout ouvrir / tout fermer » :
<div class="fr-collapsible-group"> <h2 class="fr-collapsible-group-toogle">Titre du groupe de sections</h2> {{Section déroulante début|niveau=3|titre=Section 1}} {{Lorem ipsum}} {{Section déroulante fin}} {{Section déroulante début|niveau=3|titre=Section 2}} {{Lorem ipsum}} {{Section déroulante fin}} {{Section déroulante début|niveau=3|titre=Section 3}} {{Lorem ipsum}} {{Section déroulante fin}} </div>
- donne
Titre du groupe de sections
Section 1
Lorem ipsum dolor sit amet{{#ifexpr:9>1 | , consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.}}{{#ifexpr:9>2 | Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.}}{{#ifexpr:9>3 |
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.}}{{#ifexpr:9>4 |
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.}}
Section 2
Lorem ipsum dolor sit amet{{#ifexpr:9>1 | , consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.}}{{#ifexpr:9>2 | Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.}}{{#ifexpr:9>3 |
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.}}{{#ifexpr:9>4 |
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.}}
Section 3
Lorem ipsum dolor sit amet{{#ifexpr:9>1 | , consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.}}{{#ifexpr:9>2 | Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.}}{{#ifexpr:9>3 |
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.}}{{#ifexpr:9>4 |
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.}}