logo université de Strasbourg logo CNRS logo INSA Strasbourg logo ENGEES

Service informatique

« Modèle:Boite » : différence entre les versions

De Service informatique
Aller à la navigation Aller à la recherche
(Page créée avec « <!--- Ce portail utilise un modèle pour chaque section. Vous ne devez donc pas (sauf exception) éditer cette page directement, mais la sous-page concernée. Pour rajout... »)
 
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
<noinclude>
<!---
Ceci est un modèle pour faciliter la création de boîtes (flottant à gauche ou à droite ou encore centrées).
Ce portail utilise un modèle pour chaque section.
Vous ne devez donc pas (sauf exception) éditer cette page directement,
mais la sous-page concernée.


Pour rajouter une case au portail, copiez/collez l'un des modèles "Composant",
placez le ou vous voulez le voir apparaitre (en haut, frame gauche ou droite, en bas)
et modifiez les paramètres en fonction de vos besoins.


=== Description du modèle ===
Note : pas de sommaire (toc), pas de bouton "modifier" ajouté à chaque titre de section.
-->
<!-- DÉBUT DE L'EN-TÊTE DE PAGE -->
{{Composant de portail |
titre=Portail {{{Titre du portail|PARAMÈTRE TITRE DU PORTAIL MANQUANT. CONSULTEZ [[Aide:Créer un portail]] POUR CONNAÎTRE LES PARAMÈTRES CORRECTS}}} |
tailleTitre=150% |
partie={{{Titre du portail|#}}}/Introduction |
couleur1={{{couleur1|yellow}}}|
couleur2={{{couleur2|green}}}|
couleurTitre={{{couleurTitre|#000}}}|
bordure=#8888aa;}}
<!-- FIN DE L'EN-TÊTE DE PAGE -->


Pour utiliser ce mécanisme :
<div style="width:55%;float:left;"> <!-- DÉBUT DU CADRE GAUCHE -->
# ''inclure'' ce modèle ;
{{Composant de portail |
# ''inclure'' le contenu de la boîte ;
titre=Lumière sur... |
# terminer en incluant le modèle pour la fin de la boîte.
partie={{{Titre du portail}}}/Lumière sur... |
tailleTitre=100% |
couleur1={{{couleur1}}} |
couleur2={{{couleur2}}}|
couleurTitre={{{couleurTitre|#000}}}|
bordure=#8888aa;}}


La manière la plus simple de commencer, inclure ceci dans une page wiki, sur la droite le résultat:
{{Composant de portail |
titre=Sélection d'articles |
partie={{{Titre du portail}}}/Sélection |
tailleTitre=100% |
couleur1={{{couleur1}}} |
couleur2={{{couleur2}}}|
couleurTitre={{{couleurTitre|#000}}}|
bordure=#8888aa;}}


{{Boite
{{Composant de portail |
| titre=titre boîte
titre=Le saviez-vous ? |
| bordure=orange
tailleTitre=100% |
| fond=lavender
partie={{{Titre du portail}}}/Le saviez-vous ? |
| flotte=right
couleur1={{{couleur1}}} |
| couleurTitre=gold
couleur2={{{couleur2}}}|
| largeur=39%}}
couleurTitre={{{couleurTitre|#000}}}|
Contenu de la boîte
bordure=#8888aa;}}
</div> <!-- FIN DU CADRE GAUCHE -->


Dans lequel on peut mettre les élément ''wiki'' habituels...
<div style="width:44%;float:right;"><!-- DÉBUT DU CADRE DROITE -->
{{BoiteFin}}
{{Composant de portail |
titre=Image du mois |
tailleTitre=100% |
partie={{{Titre du portail}}}/Image du mois |
couleur1={{{couleur1}}} |
couleur2={{{couleur2}}}|
couleurTitre={{{couleurTitre|#000}}}|
bordure=#8888aa;}}


{{Boite | flotte=left | largeur=59%}}
{{Composant de portail |
<pre>
titre=Les catégories |
<nowiki>{{Boite
tailleTitre=100% |
| titre=Nouvelle boîte
partie={{{Titre du portail}}}/Catégories |
| bordure=orange
couleur1={{{couleur1}}} |
| fond=lavender
couleur2={{{couleur2}}}|
| flotte=left
couleurTitre={{{couleurTitre|#000}}}|
| couleurTitre=gold
bordure=#8888aa;}}
| largeur=39%}}
Contenu de la boîte


Dans lequel on peut mettre
{{Composant de portail |
les éléments ''wiki'' habituels...
titre=Voir aussi|
{{BoiteFin}}</nowiki>
tailleTitre=100% |
</pre>
partie={{{Titre du portail}}}/Voir aussi |
{{BoiteFin}}
couleur1={{{couleur1}}} |
<br style="clear: both" />
couleur2={{{couleur2}}}|
couleurTitre={{{couleurTitre|#000}}}|
bordure=#8888aa;}}
</div> <!-- FIN DU CADRE DROITE -->


{{Pied de portail}}


=== Options ===
__NOTOC__ __NOEDITSECTION__

<noinclude>
Diverses options sont possibles, en voici la liste complète:
<!-- Clés sans accents pour conserver l'ordre dans la catégorie -->
* titre=test de boîte
[[Catégorie:Boite à outils Portail|Creer un portail]]
* couleur=green, couleur du texte
</noinclude><includeonly>
{{Boite
[[Catégorie:Portail|{{{Titre du portail}}}]]
| titre=Couleurs
[[Catégorie:Page de portail ou de projet thématique||{{{Titre du portail}}}]]
| bordure=teal
<!-- Insert portal template interwikis here -->
| fond=silver
</includeonly>
| arrondi=20px
| flotte=right
| couleurTitre=magenta
| largeur=49%}}
Vous pouvez trouver ici une liste de couleurs possibles: [http://fr.wikipedia.org/wiki/Couleurs_du_Web]
{{BoiteFin}}
* fond=rgb(0, 155, 0), couleur de fond
* flotte=left, quel côté [left, right, both]
* largeur=49%, taille de la boîte, en % ou px
* bordure=red, couleur de bordure de la boîte
* bordureTaille=1px, taille de la bordure [10px, 1%, thin]
* bordureStyle=solid, type de la bordure [outset, inset, ridge]
* aligne=left, de quel côté est aligné le texte [left, center, right]
{{Boite
| titre=Images
| bordure=LimeGreen
| fond=LawnGreen
| arrondi=5px
| flotte=right
| couleurTitre=Green
| largeur=30%
| icon=Relire.png}}
Accessibles ici: [[Special:Liste_des_images]]
{{BoiteFin}}
* tailleTexte=normal, taille du texte [12px, 100%, larger, small, ...]
* arrondi=0px, taille de l'arrondi, que pour firefox et safari [10px, 1em]
* icon=Together.png, image à placer sur la droite de la boîte
* iconTaille=32px, taille de l'icône à placer sur la droite
* espace_padding=0.2em 0.2em, espace de bordure de cellule

Utile ! Pour ajouter un espace entre deux boîtes successives, il suffit de faire :
<nowiki><br style="clear: both; margin: 1em;" /></nowiki>
(adapter la taille de l'espacement en changeant la valeur du ''em'').


=== Exemple concret ===

Voici un test ''live'' de boîtes :

{{Boite|titre=Comment s'inscrire ? |bordure=tomato|fond=papayawhip|flotte=left|couleurTitre=peachpuff|largeur=39%}}
* Aller sur la [http://www.april.org/wws/arc/transcriptions liste Transcriptions]
* S'inscrire/s'abonner
* Puis échanger des mails entre membres du groupe
{{BoiteFin}}

{{Boite|titre=Comment participer ? |bordure=mediumpurple|fond=lavenderblush|flotte=right|couleurTitre=thistle|largeur=59%
|icon=togetherApril.png|iconTaille=64px}}
* Où trouver les [[vidéos à transcrire|vidéos les plus récentes]], [http://www.april.org/media/ les anciennes.]
* Où trouver les [[Fichiers audio à transcrire|fichiers audio.]]
* Lorsque le choix est fait, le texte transcrit ou la relecture finie, envoyer un mail à la [mailto:transcriptions@april.org liste]
{{BoiteFin}}

<br style="clear: both" />
'''Sauts de ligne:''' attention, un double saut de ligne avant une boîte peut entraîner un décalage de celle ci vers le bas, car wikimedia génère des lignes vides.

'''Remarque:''' un modèle "robox" existait déjà au sein de mediawiki, mais utilisait un mécanisme technique qui n'est pas accessible pour les personnes avec des problèmes de vue (utilisation de "table" html plutôt que de "div").


=== Faire apparaître la boîte dans la table des matières ===

Par défaut, et dans un soucis de flexibilité, la boite n'apparaît pas dans la table des matières, mais il est tout à fait possible de le faire en utilisant les balises <nowiki><h2></h2></nowiki> pour un titre de niveau 2. Généralement, on mettra ces balises autour du titre comme ceci :

{{Boite|titre=<h4>Comment mettre un titre dans le TOC ?</h4> |bordure=tomato|fond=papayawhip|flotte=left
|couleurTitre=peachpuff|largeur=39%}}
Comme ceci.
{{BoiteFin}}

<br style="clear: both" />
code :

<nowiki>
{{Boite|titre=<h4>Comment mettre un titre dans le TOC ?</h4>
|bordure=tomato|fond=papayawhip|flotte=left
|couleurTitre=peachpuff|largeur=39%}}
Comme ceci.
{{BoiteFin}}</nowiki>




</noinclude><div class="boite"
style="
clear: {{{flotte}}};
width: {{{largeur}}};
margin: 0 auto 1em auto;
float: {{{flotte|none}}};
color: {{{couleur|black}}};
background-color: {{{fond}}};
text-align: {{{aligne|left}}};
font-size: {{{tailleTexte|normal}}};
-moz-border-radius: {{{arrondi|0px}}};
-webkit-border-radius: {{{arrondi|0px}}};
border: {{{bordureType|solid}}} {{{bordureTaille|thin}}} {{{bordure}}};">
<div class="titre" style="
display: {{#ifeq: {{{titre|none}}} | none | none | ''}};
-webkit-border-radius: {{{arrondi|0px}}};
-moz-border-radius: {{{arrondi|0px}}};
border-bottom: solid 1px {{{bordure}}};
background-color: {{{couleurTitre}}};
padding: {{{espace_padding|0.2em 0.2em}}};
font-size: 120%;
font-weight: bold">{{#ifeq:{{{icon|default}}}|default||[[Image:{{{icon|Namespace Wikipedia.svg}}}|{{{iconTaille|32px}}}|right]]}}{{{titre|}}}
</div>
<div style="padding: 0.2em 0.5em">
<noinclude>[[Catégorie:Modèle]]</noinclude>

Version du 21 octobre 2013 à 12:16

Ceci est un modèle pour faciliter la création de boîtes (flottant à gauche ou à droite ou encore centrées).


Description du modèle

Pour utiliser ce mécanisme :

  1. inclure ce modèle ;
  2. inclure le contenu de la boîte ;
  3. terminer en incluant le modèle pour la fin de la boîte.

La manière la plus simple de commencer, inclure ceci dans une page wiki, sur la droite le résultat:

titre boîte

Contenu de la boîte

Dans lequel on peut mettre les élément wiki habituels... 

{{Boite
  | titre=Nouvelle boîte
  | bordure=orange
  | fond=lavender
  | flotte=left
  | couleurTitre=gold
  | largeur=39%}}
Contenu de la boîte

Dans lequel on peut mettre
les éléments ''wiki'' habituels...
{{BoiteFin}}



Options

Diverses options sont possibles, en voici la liste complète:

  • titre=test de boîte
  • couleur=green, couleur du texte
Couleurs

Vous pouvez trouver ici une liste de couleurs possibles: [1]

  • fond=rgb(0, 155, 0), couleur de fond
  • flotte=left, quel côté [left, right, both]
  • largeur=49%, taille de la boîte, en % ou px
  • bordure=red, couleur de bordure de la boîte
  • bordureTaille=1px, taille de la bordure [10px, 1%, thin]
  • bordureStyle=solid, type de la bordure [outset, inset, ridge]
  • aligne=left, de quel côté est aligné le texte [left, center, right]
Fichier:Relire.png
Images

Accessibles ici: Special:Liste_des_images

  • tailleTexte=normal, taille du texte [12px, 100%, larger, small, ...]
  • arrondi=0px, taille de l'arrondi, que pour firefox et safari [10px, 1em]
  • icon=Together.png, image à placer sur la droite de la boîte
  • iconTaille=32px, taille de l'icône à placer sur la droite
  • espace_padding=0.2em 0.2em, espace de bordure de cellule

Utile ! Pour ajouter un espace entre deux boîtes successives, il suffit de faire : 

<br style="clear: both; margin: 1em;" />

(adapter la taille de l'espacement en changeant la valeur du em).


Exemple concret

Voici un test live de boîtes :

Comment s'inscrire ?
  • Aller sur la liste Transcriptions
  • S'inscrire/s'abonner
  • Puis échanger des mails entre membres du groupe
Fichier:TogetherApril.png
Comment participer ?


Sauts de ligne: attention, un double saut de ligne avant une boîte peut entraîner un décalage de celle ci vers le bas, car wikimedia génère des lignes vides.

Remarque: un modèle "robox" existait déjà au sein de mediawiki, mais utilisait un mécanisme technique qui n'est pas accessible pour les personnes avec des problèmes de vue (utilisation de "table" html plutôt que de "div").


Faire apparaître la boîte dans la table des matières

Par défaut, et dans un soucis de flexibilité, la boite n'apparaît pas dans la table des matières, mais il est tout à fait possible de le faire en utilisant les balises <h2></h2> pour un titre de niveau 2. Généralement, on mettra ces balises autour du titre comme ceci :

Comment mettre un titre dans le TOC ?

Comme ceci.


code : 

 {{Boite|titre=<h4>Comment mettre un titre dans le TOC ?</h4>
 |bordure=tomato|fond=papayawhip|flotte=left
 |couleurTitre=peachpuff|largeur=39%}}
 Comme ceci.
 {{BoiteFin}}



Récupérée de « https://sysinfo.icube.unistra.fr/index.php?title=Modèle:Boite&oldid=3098 »