Aide:Trucs et astuces

De Matrices
Aller à : Navigation, rechercher

Vous êtes ici: accueil >Aide >Trucs et astuces

  ► Les trucs et astuces améliorent vraiment l'usage du site. N'hésitez pas a y ajouter les vôtres !


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

Catégorie:Aide

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

Monitored by WikiApiary.png

Pour l'aligner à droite, ou la centré etc.. ajouter |right exemple : [[Fichier:Monitored_by_WikiApiary.png|60px|right]]

donne
Monitored by WikiApiary.png
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
  1. Aide:Cadres
  2. Aide:Catégories
  3. Aide:Comment se déplacer
  4. Aide:Couleur
  5. Aide:MonBrouillon
  6. Aide:Mots_magiques
  7. Aide:Mumble
  8. Aide:Onglets
  9. Aide:Purge_du_cache
  10. Aide:Redirection
  11. Aide:Signature
  12. Aide:Supprimer_une_page
  13. Aide:Trucs_et_astuces
  14. Aide:Utiliser_la_page_discussion
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
  1. Aide:Cadres
  2. Aide:Catégories
  3. Aide:Comment se déplacer
  4. Aide:Couleur
  5. Aide:MonBrouillon
  6. Aide:Mots_magiques
  7. Aide:Mumble
  8. Aide:Onglets
  9. Aide:Purge_du_cache
  10. Aide:Redirection
  11. Aide:Signature
  12. Aide:Supprimer_une_page
  13. Aide:Trucs_et_astuces
  14. Aide:Utiliser_la_page_discussion
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) .
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}} et {{fin de colonnes}}
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

Projet:Recherche • Mlab • Cafétéria

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
Le projet de l'UOH • Appel à projets du printemps 2014 • Ressources en cours de production • Comment adhérer?

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
Un encadré
  • bla bla bla bla bla bla bla bla bla bla bla bla
  • bla
  • bla
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
Logo.png 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 1

Colonne 1

Colonne 2

Colonne 2

Avec 4 colonnes (width=25%)
même code, changez width=50% par width=25%, et ajoutez les deux colonnes supplémentaires (rappel, vérifier que le |} est bien à la fin).
ça donne

Colonne 1

Colonne 1

Colonne 2

Colonne 2

Colonne 3

Colonne 3

Colonne 4

Colonne 4

Section déroulante

Les modèles {{Section déroulante début}} et {{Section déroulante fin}} 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, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. 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.

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.

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, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. 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.

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.

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, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. 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.

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.

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, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. 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.

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.

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.

Récupérée de « http://matrices.info/index.php?title=Aide:Trucs_et_astuces&oldid=30473 »