Utilisateur:Maimonid/Modèles/boîteSoft/Documentation

Ceci est la page de documentation de Utilisateur:Maimonid/Modèles/boîteSoft [modifier] [purger].

Cette sous-page contient les instructions et les catégories de son utilisateur d'origine et elle n'est pas destinée à être visualisée directement.

Cette documentation concerne

le modèle {{BoîteSoft}}
le modèle {{BoîteSoft/début}} (qui s’utilise avec {{BoîteSoft/fin}}) et permet de mettre un contenu plus varié.

Recommandations (voir Aide:Boîte déroulante et autres modèles déroulants) :

Ne pas utiliser de boîteSoft à l’intérieur d’une boîte déroulante
Utiliser {{BoîteSoft/début}} pour mettre un tableau dans une boite déroulante.

Utilisation : pour {{BoîteSoft}}

{{boîteSoft|titre=TITRE|contenu=CONTENU}}
OU
{{boîteSoft
 |titre=TITRE
 |contenu=CONTENU
 |alignB = ALIGNB
 |margeGauche  = MARGEGAUCHE
 |margeGaucheT  = MARGEGAUCHET
 |margeDroite = MARGEDROITE
 |margeDroiteT = MARGEDROITET
 |margeGaucheInterne = MARGEGAUCHEINTERNE
 |margeGaucheInterneT = MARGEGAUCHEINTERNET
 |margeDroiteInterne = MARGEDROITEINTERNE
 |margeDroiteInterneT = MARGEDROITEINTERNET
 |margeHaut = MARGEHAUT
 |margeHautT = MARGEHAUTT
 |margeBas = MARGEBAS
 |margeBasT = MARGEBAST
 |align=ALIGN
 |alignT=ALIGNT
 |arrondi = ARRONDI
 |arrondiT = ARRONDIT
 |hauteur = HAUTEUR
 |hauteurT = HAUTEURT
 |largeur=LARGEUR
 |largeurT=LARGEURT
 |couleurBordure = COULEURBORDURE
 |couleurBordureT = COULEURBORDURET
 |couleurFond = COULEURFOND
 |couleurFondT = COULEURFONDT 
 |épaisseurBordure = ÉPAISSEURBORDURE
 |épaisseurBordureT = ÉPAISSEURBORDURET
 |couleurF = COULEURF
 |couleurTexte = COULEURTEXTE
 |couleurTexteT = COULEURTEXTET
 |poidsFonte = POIDSFONTE
 |poidsFonteT = POIDSFONTET
 |tailleFonte = TAILLEFONTE
 |tailleFonteT = TAILLEFONTET
 |styleFonte = STYLEFONTE
 |styleFonteT = STYLEFONTET 
 }}

Utilisation : pour {{BoîteSoft/début}}

{{boîteSoft/début|titre=TITRE[|paramètres]}}
Contenu
{{boîteSoft/fin}}

Paramètres nécessaires

paramètre effet valeurs possibles

titre Titre affiché de la boîte Totalement libre, mais le caractère « | » par exemple ne passe pas.

contenu Texte contenu dans la boîte Totalement libre, mais certains caractères spéciaux ne passent pas, comme la barre verticale. Utiliser dans ce cas :
{{Boîte déroulante/début}} contenu {{Boîte déroulante/fin}}.

Paramètres facultatifs

paramètre effet valeur par défaut valeurs possibles

Positionnement

alignB positionnement global de la boîte left left, right, center

margeGauche indentation de la partie inférieure (état déplié) 0px dimension (px, em, %) . Cela inclut la bordure de la partie supérieure

margeGaucheT indentation gauche de la partie supérieure (titre) 0px dimension (px, em, %). Cela inclut la bordure de la partie supérieure

margeDroite indentation droite de la partie inférieure (état déplié) 0px dimension (px, em, %). Cela inclut la bordure de la partie supérieure

margeDroiteT indentation droite de la partie supérieure (titre) 0px dimension (px, em, %). Cela inclut la bordure de la partie supérieure

margeHaut espace vertical entre partie supérieure et inférieure (état déplié) 0px dimension (px, em, %)

margeHautT espace vertical précédant la partie supérieure 0px dimension (px, em, %)

margeBas espace vertical après la partie inférieure (état déplié) 0px dimension (px, em, %)

margeBasT espace vertical après la partie supérieure (état plié) 0px dimension (px, em, %)

align positionnement du contenu à l'intérieur de la partie inférieure (état déplié) left left, center, right

alignT positionnement du titre à l'intérieur de la partie supérieure left left, center, right

margeGaucheInterne indentation gauche du contenu de la partie inférieure (état déplié) 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du contenu, fixée par align

margeGaucheInterneT indentation gauche du titre 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du titre, fixée par alignT

margeDroiteInterne indentation droite du contenu de la partie inférieure (état déplié) 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du contenu, fixée par align

margeDroiteInterneT indentation droite du titre 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du titre, fixée par alignT

Hauteur, largeur, épaisseur, forme

hauteurT hauteur de la partie supérieure (titre) 1.6 em dimension dimension (px, em, %). Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables

largeur largeur de la partie inférieure 100% dimension (px, em, %)

largeurT largeur de la partie supérieure (titre) 100% dimension (px, em, %)

épaisseurBordure épaisseur bordure de la partie inférieure 1px dimension (px, em, %) , peut être mis à 0px

épaisseurBordureT épaisseur bordure de la partie supérieure 0px dimension (px, em, %)

arrondi arrondi des angles 0px (désactivé) Les angles peuvent apparaître arrondis si le navigateur le permet.
Visible sur les navigateurs Mozilla, non visible sur Internet Explorer.
Valeur conseillée : 0.6em, s’exprime en pt, px ou em

Fonte

tailleFonte taille de la fonte du contenu small medium, small etc. (cf. attributs css)

tailleFonteT taille de la fonte du titre small medium, small etc. (cf. attributs css)

poidsFonte poids de la fonte du contenu normal normal, bold etc. (cf. attributs css)

poidsFonteT taille de la fonte du titre normal normal, small etc. (cf. attributs css)

styleFonte style de la fonte du contenu normal normal, italic etc. (cf. attributs css)

styleFonteT style de la fonte du titre normal normal, small etc. (cf. attributs css)

Couleurs

couleurBordure

couleur de la bordure boîte inférieure dépliée

#AAAAAA

Expression de couleur valide
exemples : black, #C080FF, …

Table des couleurs

Page d’aide principale : Aide:Couleurs

Nom de la couleur	Rendu	Hexadécimal
AliceBlue		`#F0F8FF`
AntiqueWhite		`#FAEBD7`
Aqua		`#00FFFF`
Aquamarine		`#7FFFD4`
Azure		`#F0FFFF`
Beige		`#F5F5DC`
Bisque		`#FFE4C4`
Black		`#000000`
BlanchedAlmond		`#FFEBCD`
Blue		`#0000FF`
BlueViolet		`#8A2BE2`
Brown		`#A52A2A`
BurlyWood		`#DEB887`
CadetBlue		`#5F9EA0`
Chartreuse		`#7FFF00`
Chocolate		`#D2691E`
Coral		`#FF7F50`
CornflowerBlue		`#6495ED`
Cornsilk		`#FFF8DC`
Crimson		`#DC143C`
Cyan		`#00FFFF`
DarkBlue		`#00008B`
DarkCyan		`#008B8B`
DarkGoldenrod		`#B8860B`
DarkGray		`#A9A9A9`
DarkGreen		`#006400`
DarkKhaki		`#BDB76B`
DarkMagenta		`#8B008B`
DarkOliveGreen		`#556B2F`
DarkOrange		`#FF8C00`
DarkOrchid		`#9932CC`
DarkRed		`#8B0000`
DarkSalmon		`#E9967A`
DarkSeaGreen		`#8FBC8F`
DarkSlateBlue		`#483D8B`
DarkSlateGray		`#2F4F4F`
DarkTurquoise		`#00CED1`
DarkViolet		`#9400D3`
DeepPink		`#FF1493`
DeepSkyBlue		`#00BFFF`
DimGray		`#696969`
DodgerBlue		`#1E90FF`
FireBrick		`#B22222`
FloralWhite		`#FFFAF0`
ForestGreen		`#228B22`
Fuchsia		`#FF00FF`
Gainsboro		`#DCDCDC`
GhostWhite		`#F8F8FF`
Gold		`#FFD700`
Goldenrod		`#DAA520`
Gray		`#808080`
Green		`#008000`
GreenYellow		`#ADFF2F`
Honeydew		`#F0FFF0`
HotPink		`#FF69B4`
IndianRed		`#CD5C5C`
Indigo		`#4B0082`
Ivory		`#FFFFF0`
Khaki		`#F0E68C`
Lavender		`#E6E6FA`
LavenderBlush		`#FFF0F5`
LawnGreen		`#7CFC00`
LemonChiffon		`#FFFACD`
LightBlue		`#ADD8E6`
LightCoral		`#F08080`
LightCyan		`#E0FFFF`
LightGoldenrodYellow		`#FAFAD2`
LightGreen		`#90EE90`
LightGrey		`#D3D3D3`
LightPink		`#FFB6C1`
LightSalmon		`#FFA07A`
LightSeaGreen		`#20B2AA`
LightSkyBlue		`#87CEFA`
LightSlateGray		`#778899`
LightSteelBlue		`#B0C4DE`
LightYellow		`#FFFFE0`
Lime		`#00FF00`
LimeGreen		`#32CD32`
Linen		`#FAF0E6`
Magenta		`#FF00FF`
Maroon		`#800000`
MediumAquamarine		`#66CDAA`
MediumBlue		`#0000CD`
MediumOrchid		`#BA55D3`
MediumPurple		`#9370DB`
MediumSeaGreen		`#3CB371`
MediumSlateBlue		`#7B68EE`
MediumSpringGreen		`#00FA9A`
MediumTurquoise		`#48D1CC`
MediumVioletRed		`#C71585`
MidnightBlue		`#191970`
MintCream		`#F5FFFA`
MistyRose		`#FFE4E1`
Moccasin		`#FFE4B5`
NavajoWhite		`#FFDEAD`
Navy		`#000080`
OldLace		`#FDF5E6`
Olive		`#808000`
OliveDrab		`#6B8E23`
Orange		`#FFA500`
OrangeRed		`#FF4500`
Orchid		`#DA70D6`
PaleGoldenrod		`#EEE8AA`
PaleGreen		`#98FB98`
PaleTurquoise		`#AFEEEE`
PaleVioletRed		`#DB7093`
PapayaWhip		`#FFEFD5`
PeachPuff		`#FFDAB9`
Peru		`#CD853F`
Pink		`#FFC0CB`
Plum		`#DDA0DD`
PowderBlue		`#B0E0E6`
Purple		`#800080`
Red		`#FF0000`
RosyBrown		`#BC8F8F`
RoyalBlue		`#4169E1`
SaddleBrown		`#8B4513`
Salmon		`#FA8072`
SandyBrown		`#F4A460`
SeaGreen		`#2E8B57`
Seashell		`#FFF5EE`
Sienna		`#A0522D`
Silver		`#C0C0C0`
SkyBlue		`#87CEEB`
SlateBlue		`#6A5ACD`
SlateGray		`#708090`
Snow		`#FFFAFA`
SpringGreen		`#00FF7F`
SteelBlue		`#4682B4`
Tan		`#D2B48C`
Teal		`#008080`
Thistle		`#D8BFD8`
Tomato		`#FF6347`
Turquoise		`#40E0D0`
Violet		`#EE82EE`
Wheat		`#F5DEB3`
White		`#FFFFFF`
WhiteSmoke		`#F5F5F5`
Yellow		`#FFFF00`
YellowGreen		`#9ACD32`

couleurBordureT couleur de la bordure partie supérieure transparent

couleurFond couleur fond du contenu transparent

couleurFondT couleur fond du titre transparent

couleurF couleur fond de la flèche transparent

couleurTexte couleur texte du contenu black

couleurTexteT couleur texte du titre black

Un modèle alternatif existe, composé de deux morceaux indissociables : {{BoîteSoft/début}} et {{BoîteSoft/fin}}, le premier accepte les mêmes paramètres que {{BoîteSoft}}, la différence est que le contenu peut être arbitraire (alors que {{Boîte déroulante}} ne permet pas de caractères | dans le contenu).

Exemples

Exemple 1 :

Hello World! Ouvrez moi !

I am a soft scroll box. Autrement dit, je suis configurée par défaut afin d'offrir discrètement une boîte déroulante, en évitant de couper l'exposé général des idées. Si cela est désiré, le modèle « boîte déroulante » peut aussi convenir. En fait, comme on va le voir, on peut me configurer de façon à ce que je présente un aspect similaire à celui du modèle « boîte déroulante » (mais j'ai beaucoup plus de paramètres de configuration).Modèle:BoîteSoft/fin

Exemple 2 :

Rien n'empêche de m'encadrer

I'm still a soft scroll box.
Bien entendu, on peut inclure autant de lignes qu'on voudra.
Encore une ligne, comme ça, pour dire.
Notons que le cadre de la partie inférieure peut être supprimé (ou plus exactement son épaisseur réglée à 0px).Modèle:BoîteSoft/fin

Exemple 3 :

Je peux aussi être globalement positionnée sur la droite

La fonte du titre et du texte peut être contrôlée par les paramètres « tailleFonte/tailleFonteT »,«poidsFonte/poidsFonteT» et « styleFonte/styleFonteT ».
Comme on le voit ici, les largeurs de la partie supérieure et de la partie inférieure sont réglables, tout comme le sont les épaisseur de leur bordure.Modèle:BoîteSoft/fin

Exemple 4 :

ou globalement centrée

I am not always soft, I can also be very eccentric.
La couleur du titre, du fond de la partie supérieure, du texte et du fond de la partie inférieure sont contrôlables il en est de même des couleurs des bordures des deux parties de la boîte, et de la couleur de la flèche.Modèle:BoîteSoft/fin

Exemple 5 :

Plus généralement, l'indentation de la partie supérieure est contrôlable

Et il en est de même de l'indentation de la partie inférieure. Notons que ces indentation s'effectue relativement à l'alignement global de la boîte.
ATTENTION : si l'indentation + la largeur de la boîte est supérieure à la longueur de la ligne de la page html, la boîte sort des limites du texte de la page. Il faut donc avoir soin d'éviter ce cas : soit en fixant une indentation relative x (en %), et en prenant garde que la largeur de la boîte n'excède pas 100-x, soit en fixant une largeur de boîte suffisamment petite pour que la boîte ne sorte pas des limites.Modèle:BoîteSoft/fin

Exemple 6 :

Les espaces me précédant et me suivant peuvent être réglés

Au moyen des paramètres « margeHautT/margeBasT » en ce qui concerne la boîte pliée. L'espace entre la partie supérieure et la partie inférieure (quand elle est dépliée) peut être contrôlée au moyen du paramètre « margeHaut », et l'espace entre la partie inférieure (quand elle est dépliée) et le texte la suivant peut être contrôlé au moyen du paramètre « margeBas ».Modèle:BoîteSoft/fin

Exemple 7 :

Mon titre peut être centré au milieu de la boîte

Les angles des deux parties de la boîte peuvent être plus ou moins arrondis, selon la valeur des paramètre « arrondi » et « arrondiT »Modèle:BoîteSoft/fin

Exemple 8 :

ou reporté sur la droite

Les largeurs des deux parties de la boîte sont indépendantes l'une de l'autre. On peut les contrôler au moyen des paramètres «largeur» et «largeurT». Si les largeurs des deux parties de la boîte sont égales, mais les épaisseurs de leur bordure inégales, il en résulte une différence de longueur des deux boîtes, un effet probablement indésirable. C'est une conséquence du langage html qui ne permet pas de mélanger les dimension relatives (%) avec les dimensions absolues (px, em. etc.). Dans le cas où ou un tel mixage d'épaisseurs serait nécéssaire, il faut donc ruser, par exemple en employant des grandeurs relatives pour régler l'épaisseur des bordures, et en calculant préalablement le déficit (égal à 2 fois la différence de la bordure la plus fine avec la plus épaisse).Modèle:BoîteSoft/fin

Exemple 9 :

En fait, l'indentation de mon titre peut être contrôlée

Au moyen des paramètres « margeGaucheInterneT » ou « margeDroiteInterneT ». Similairement, les paramètres « margeGaucheInterne » ou « margeDroiteInterne » permettent de contrôler l'indentation du texte de la partie inférieure, comme dans ce cas.Modèle:BoîteSoft/fin

Template Data

Ce modèle permet de mettre un texte dépourvu de barre verticale dans une boîte déroulante

Paramètres du modèle
Paramètre		Description	Type	État
Titre	`titre`	Titre de la boîte	Chaîne	obligatoire
Contenu	`contenu`	Texte à mettre en boîte	Chaîne	obligatoire
Alignement du contenu	`align`	left, right, center ou justify ? Par défaut left	Chaîne	facultatif
Alignement du titre	`alignT`	left, right, center ou justify ? Par défaut center	Chaîne	facultatif
Alignement de la boîte	`alignB`	left, right, center ou justify ? Par défaut left	Chaîne	facultatif
Label	`label`	Texte du lien de droite Par défaut Dérouler/Enrouler	Chaîne	facultatif
Hauteur	`hauteur`	Hauteur de la boîterepliée Par défaut 1.6em	Chaîne	facultatif
Largeur	`largeur`	Largeur de la boîterepliée Par défaut 100%	Chaîne	facultatif
Couleur titre	`couleurTexteT`	Couleur du titre Par défaut black	Chaîne	facultatif
Titre en gras	`thinning`	Yes ou no Par défaut no	Chaîne	facultatif
Couleur fond titre	`couleurFondT`	Couleur du fond de titre Par défaut #EFEFEF	Chaîne	facultatif
Couleur fond boîte	`couleurFondB`	Couleur de fond de la boîte Par défaut #FFFFFF	Chaîne	facultatif
Couleur fond contenu	`couleurFond`	Couleur de fond du contenu Par défaut white	Chaîne	facultatif
Couleur bordure	`couleurBordure`	Couleur de la bordure Par défaut #AAAAAA	Chaîne	facultatif

Voir aussi