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

De Disposition de clavier bépo
mAucun résumé des modifications
Aucun résumé des modifications
 
(45 versions intermédiaires par 4 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
<includeonly><div id="{{{titre|}}}">
<includeonly><div id="{{{titre|}}}" class="cadre" style="font-size: 16px;">
<table style="margin-bottom:.5em; font-size:95%; text-align:left; padding:-2px; background:none" cellpadding="0" cellspacing="0" {{#if: {{{taille|}}}|width="{{{taille}}}"}}>
<table style="margin-bottom:.5em; font-size:95%; text-align:left; padding:-2px; background:none" cellpadding="0" cellspacing="0" {{#if: {{{taille|}}}|width="{{{taille}}}"}}>
<!-- 1 -->
<!-- 1 -->
<tr>
<tr>
<td rowspan="2" width="1%" style="background:#FFF; border:2px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}; border-bottom:0; padding-right:1em; -moz-border-radius-topright:5em">[[Image:cartella_{{#switch:{{{code couleur|{{{style|bleu}}} }}}|bleu=blu|gris=grigia|vert=verde|violet=viola|orange=arancione|rouge=rossa|blu}}.jpg]] <div style="font-size:130%; margin-top:-33px; padding-left:43px"> '''{{{titre| }}}'''</div><div style="font-size:130%; margin-top:-18px; padding-left:12px"> {{Lien sur image|lien={{{lien|}}}|image={{{logo|Crystal_Clear_app_xmag.png}}}|largeur={{{px|21}}}px|hauteur={{{px|21}}}px}}</div></td>
<td rowspan="2" style="background:#FFF; border:2px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}; border-bottom:0; padding-bottom:2px; padding-right:1em;">[[Image:cartella_{{#switch:{{{code couleur|bleu}}}|bleu=blu|gris=grigia|vert=verde|violet=viola|orange=arancione|rouge=rossa|blu}}.jpg|link=]] <div style="font-size:130%; margin-top:-33px; padding-left:43px">'''{{{titre| }}}'''</div><div style="font-size:130%; margin-top:-33px; padding-left:12px"> [[Image:{{{logo|Crystal_Clear_app_xmag.png}}}|{{{px|21}}}px]]</div></td>
<!-- 2 -->
<!-- 2 -->
<td colspan="2" height="10px"></td>
<td colspan="2" height="10px"></td>
Ligne 9 : Ligne 9 :
<!-- 6 -->
<!-- 6 -->
<tr>
<tr>
<td style="width:1px; -moz-border-radius-topright:5em; border:1px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}; border-left:0; background:{{Cadre/Couleur de fond|{{{code couleur|{{{style|bleu}}} }}} }}; border-bottom:2px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}; text-align:center; font-size:85%">{{#if: {{{lien|}}}|{{#if: {{{logo_editlien|}}}|{{Lien sur image|image={{{logo_editlien}}}|lien={{{lien}}}|largeur=20px|hauteur=20px}}|<nowiki>[</nowiki>[[{{{lien}}}|modifier]]<nowiki>]</nowiki>}}|}}</td>
<td style="width:1px; border:1px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}; border-left:0; padding-left:10px; background:{{Cadre/Couleur de fond|{{{code couleur|bleu}}} }}; border-bottom:2px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}; text-align:center; font-size:85%">{{#if: {{{lien|}}}|{{#if: {{{logo_editlien|}}}|[[Image:{{{logo_editlien}}}|21px|link={{{lien|}}}|alt={{{lien|}}}]]|<nowiki>[</nowiki>[[{{{lien}}}|modifier]]<nowiki>]</nowiki>}}|}}</td>  
 
<!-- 7 -->
<!-- 7 -->
<td style="border-bottom:2px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}"> &nbsp;&nbsp;&nbsp;</td>
<td style="border-bottom:2px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}"> &nbsp;&nbsp;&nbsp;</td>
</tr>
</tr>
<!-- 10 -->
<!-- 10 -->
<tr>
<tr>
<td colspan="3" style="z-index:0;padding:4px; background:#FFF; border:2px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}; border-top:0; border-bottom:0" width="50%" valign="top">{{#if: {{{hauteur_texte|}}}|<DIV ID="intro13213" style="z-index:0;height:{{{hauteur_texte|100px}}};left:8px;top:6px;overflow:auto"><DIV style="z-index:0;border:5px solid #FFFFFF;">|}}
<td colspan="3" style="padding:4px; background:#FFF; border:2px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}; border-top:0; border-bottom:0" width="50%" valign="top">{{#if: {{{hauteur_texte|}}}|<DIV ID="intro13213" style="height:{{{hauteur_texte|100px}}};overflow:auto"><DIV style="border:5px solid #FFFFFF;">|}}
{{{contenu}}}
{{{contenu}}}
{{#if: {{{hauteur_texte|}}}|</div></div>|}}</td>
{{#if: {{{hauteur_texte|}}}|</div></div>|}}</td>
</tr>
</tr>
<!-- 12 -->
<!-- 12 -->
<tr>
<tr>
<td colspan="3"><div style="-moz-border-radius-bottomright:1em; -moz-border-radius-bottomleft:1em; background:{{Cadre/Couleur de fond|{{{code couleur|{{{style|bleu}}} }}} }}; height:10px; border:1px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}; border-right:2px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}; border-left:2px solid {{Cadre/Couleur|{{{code couleur|{{{style|bleu}}} }}} }}">
<td colspan="3"><div style="background:{{Cadre/Couleur de fond|{{{code couleur|bleu}}} }}; height:10px; border:1px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}; border-right:2px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}; border-left:2px solid {{Cadre/Couleur|{{{code couleur|bleu}}} }}">
</div></td>
</div></td>
</tr>
</tr>
</table></div></includeonly><noinclude>
</table></div></includeonly><noinclude>
== Utilisation ==
== Utilisation ==
Ce modèle est utilisé pour faciliter la mise en page des page de portail et de projet.
son utilisation est à proscrire des articles.
;Syntaxe
{|align="center"
{|align="center"
|-
|-
Ligne 42 : Ligne 39 :
|logo=
|logo=
|logo_editlien=
|logo_editlien=
|px=
|px=}}
}}
</pre>||
</pre>
|}
* <code>titre</code> : titre du cadre (facultatif, vierge par défaut mais son absence provoque des problèmes d'affichage)
* <code>titre</code> : titre du cadre (facultatif, vierge par défaut mais son absence provoque des problèmes d'affichage)
* <code>taille</code> : largeur du cadre ; par exemple <code>50em</code>, <code>40%</code>, <code>200px</code> (facultatif, maximale par défaut)  
* <code>taille</code> : largeur du cadre ; par exemple <code>50em</code>, <code>40%</code>, <code>200px</code> (facultatif, maximale par défaut)  
* <code>contenu</code> : texte à insérer dans le corps du cadre.
* <code>contenu</code> : texte à insérer dans le corps du cadre.
* <code>lien</code> : nom de l'article à modifier (facultatif, vierge par défaut)  
* <code>lien</code> : nom de l'article à modifier <!-- (facultatif, vierge par défaut) -->
* <code>code couleur</code> : [[wp:Wikipédia:Jargon/Paramètre de couleur#Code couleur|code couleur]] du cadre : {{Cadre/Couleur|LISTE}} (facultatif, <code>bleu</code> par défaut)  
* <code>code couleur</code> : [[wp:Wikipédia:Jargon/Paramètre de couleur#Code couleur|code couleur]] du cadre : {{Cadre/Couleur|LISTE}} (facultatif, <code>bleu</code> par défaut)  
* <code>hauteur_texte</code> : force la hauteur du cadre, un ascenseur est affiché si le texte impose de dépasser cette hauteur (optionnel, pas d'ascenseur par défaut)
* <code>hauteur_texte</code> : force la hauteur du cadre, un ascenseur est affiché si le texte impose de dépasser cette hauteur (optionnel, pas d'ascenseur par défaut)
* <code>logo</code> : image du logo (facultatif, <code>Crystal_Clear_app_xmag.png</code> par défaut)
* <code>logo</code> : image du logo (facultatif, <code>Crystal_Clear_app_xmag.png</code> par défaut)
* <code>logo_editlien</code> : image du logo sur le lien (facultatif, texte '[modifier]' par défaut)
* <code>logo_editlien</code> : image du logo sur le lien (facultatif, texte '[modifier]' par défaut)
* <code>px</code> : taille du logo (facultatif, <code>21px</code> si rien)
* <code>px</code> : taille du logo (facultatif, <code>21px</code> si rien)
 
|}
== Exemple : ==
== Exemple==
{|
{|
|- width="50%"
|-
|<pre>
|<pre>
{{Cadre
{{Cadre
|titre=Installation…
|titre=[[Installation]]
|contenu=
|contenu=
Image d’exemple :
Image d’exemple :
[[Image:Dvorakfr-logo.png]]
[[Image:Dvorakfr-logo.png]]
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.
 
Lorem ipsum…
|code couleur=rouge
|code couleur=rouge
|hauteur_texte=300px
|hauteur_texte=
|logo=
|logo=Note.png
|logo_editlien=Méthodologie.png
|logo_editlien=Méthodologie.png
|px=21px
|px=21
|lien=Installation
|lien=http://bepo.fr}}
</pre>
</pre>
|width="50%"|
|width="60%"|
{{Cadre
{{Cadre
|titre=Installation…
|titre=[[Installation]]
|contenu=
|contenu=
Image d'exemple :
Image d’exemple :
[[Image:Dvorakfr-logo.png]]
[[Image:Dvorakfr-logo.png]]
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.
 
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.
|code couleur=rouge
|code couleur=rouge
|hauteur_texte=300px
|hauteur_texte=
|logo=
|logo=Note.png
|logo_editlien=Méthodologie.png
|logo_editlien=Méthodologie.png
|px=21px
|px=21
|lien=Installation
|lien=http://bepo.fr}}
}}
|}
|}


== Les différents codes couleur ==
== Codes couleur ==
{|style="background:none" width="100%" cellspacing="8" cellpadding="0"
{|style="background:none" width="100%" cellspacing="8" cellpadding="0"
|-
|-
Ligne 101 : Ligne 97 :
|-
|-
|}
|}
</noinclude>
</noinclude>

Dernière version du 4 avril 2023 à 10:39

Utilisation

{{Cadre
|titre=
|taille=
|contenu=
|lien=
|code couleur=
|hauteur_texte=
|logo=
|logo_editlien=
|px=}}
  • titre : titre du cadre (facultatif, vierge par défaut mais son absence provoque des problèmes d'affichage)
  • taille : largeur du cadre ; par exemple 50em, 40%, 200px (facultatif, maximale par défaut)
  • contenu : texte à insérer dans le corps du cadre.
  • lien : nom de l'article à modifier
  • code couleur : code couleur du cadre : bleu, rouge, vert, violet, orange, rouge (facultatif, bleu par défaut)
  • hauteur_texte : force la hauteur du cadre, un ascenseur est affiché si le texte impose de dépasser cette hauteur (optionnel, pas d'ascenseur par défaut)
  • logo : image du logo (facultatif, Crystal_Clear_app_xmag.png par défaut)
  • logo_editlien : image du logo sur le lien (facultatif, texte '[modifier]' par défaut)
  • px : taille du logo (facultatif, 21px si rien)

Exemple

{{Cadre
|titre=[[Installation]]
|contenu=
Image d’exemple :
[[Image:Dvorakfr-logo.png]]

Lorem ipsum…
|code couleur=rouge
|hauteur_texte=
|logo=Note.png
|logo_editlien=Méthodologie.png
|px=21
|lien=http://bepo.fr}}
Cartella rossa.jpg
Note.png
http://bepo.fr    

Image d’exemple : Dvorakfr-logo.png

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.

Codes couleur

Cartella blu.jpg
Crystal Clear app xmag.png
[modifier]    

{{Cadre|code couleur=bleu}}

Cartella rossa.jpg
Crystal Clear app xmag.png
[modifier]    

{{Cadre|code couleur=rouge}}

Cartella verde.jpg
Crystal Clear app xmag.png
[modifier]    

{{Cadre|code couleur=vert}}

Cartella viola.jpg
Crystal Clear app xmag.png
[modifier]    

{{Cadre|code couleur=violet}}

Cartella arancione.jpg
Crystal Clear app xmag.png
[modifier]    

{{Cadre|code couleur=orange}}

Cartella grigia.jpg
Crystal Clear app xmag.png
[modifier]    

{{Cadre|code couleur=gris}}