Cette page contient des conseils, astuces, exemples, CSS et contournements pour les Infoboxes portables. N'hésitez pas à consulter les pages d'aide Infoboxes portables/CSS et Infoboxes portables/wikitexte pour comprendre comment chaque élément peut être utilisé et personnalisé.
Convertir les infoboxes[]
Article principal : Convertir les infoboxes
Les fonctions parseur[]
Les fonctions parseur, et le Lua, peuvent être utilisés dans les balises « <default> » ou « <format> », tout comme n'importe quelle autre balise qui permet l'utilisation du wikitexte. Néanmoins, elles ne doivent pas être utilisées en-dehors de ces balises, car elles empêchent l'infobox de s'afficher.
[]
Même si les balises « <navigation> » n'ont pas de sous-balises <default> ou <format>, vous pouvez utiliser des paramètres variables pour qu'ils s'affichent uniquement quand un paramètre est renseigné, ou quand il a une valeur spécifique. Le premier exemple ci-dessous utilise la fonction parseur #ifeq qui permet de vérifier si le paramètre « affichegalerie » est activé. Si c'est le cas, il affiche un lien ; si ce n'est pas le cas, rien n'apparaît, et aucun rang de navigation n'est créé. Le deuxième exemple permet seulement de vérifier que « affichegalerie » n'est pas vide.
<navigation>
{{#ifeq: {{{affichegalerie}}} | oui | [[Accueil|Galerie]] |}}
</navigation>
<navigation>
{{#if: {{{affichegalerie|}}} | [[Accueil|Galerie]] |}}
</navigation>
Dérouler/Enrouler[]
<infobox>
<group collapse="closed"> <header>Dérouler est facile</header>
<data> <default>Contenu masqué par défaut</default></data>
</group>
</infobox>
Commentaires[]
Les infoboxes portables utilisent le XML, les règles habituelles pour les commentaires ne les concernent donc pas vraiment. Voici une astuce pour masquer des portions ou ajouter des commentaires :
<infobox>
<group >
<header>Tony stark </header>
<data><default>War machine</default></data>
<data><default>Iron Man</default></data>
<!--commentaire>
Cette partie est cachée
<header>Hope</header>
<data><default>Dark Goddess </default></data>
<data><default>Lady death</default></data>
</commentaire-->
</group>
</infobox>
Formatage[]
Voici des codes que les administrateurs peuvent insérer dans le CSS de leurs wikis. Pour en savoir plus, consultez w:c:communaute:Aide:Infoboxes/CSS.
Formater du texte[]
Vous pouvez utiliser le CSS (voir ici) pour centrer un texte ou le formater verticalement. Ce formatage de données peut être formaté en utilisant ce code [1] :
.portable-infobox .pi-data {
height: 10em; /*définit la hauteur*/
display: flex;
align-items: center; /*aligne les éléments ou le texte verticalement*/
justify-content: center ; /*aligne les éléments ou le texte horizontalement*/
}
Formatage des images[]
Redimensionnement automatique[]
Une méthode qui permet d'adapter à toutes les tailles d'images est d'utiliser simplement ceci :
.pi-theme-name .pi-image-thumbnail {
width: 100%;
height:auto;
}
Dans des infoboxes redimensionnées[]
Si vous utilisez une largeur non standard pour votre infobox (via .pi-theme-name { width: 123px; }), vous aurez également besoin de redimensionner les images dans le CSS. Vous pouvez le faire via la classe .pi-image-thumbnail, comme ceci :
.pi-theme-name .pi-image-thumbnail {
max-width: 123px; //en général, utilisez la même largeur que pour votre infobox, les bordures en moins
height: auto; //converse le ratio de l'image
}
Cependant, cela peut entraîner des images plus hautes que souhaité. Si vous ne voulez pas qu'elles remplissent la largeur totale de l'infobox, vous pouvez aussi limiter la hauteur de la même façon pour vous assurer qu'une certaine valeur ne soit pas dépassée et que la ratio de l'image soit maintenu :
.pi-theme-name .pi-image-thumbnail {
max-width: 123px;
max-height: 123px;
width: auto;
height: auto;
}
Formatage du titre[]
Personnaliser le texte du titre se fait de la même façon que pour n'importe quel autre texte, il s'agit surtout d'utiliser la classe appropriée. Par exemple :
.pi-theme-name .pi-title {
font-family:formalscrp421 bt;
font-weight:bold;
color:blue;
}
fera que les titres de toutes les infoboxes sur le wiki ressemblent à ça.
Groupes[]
Les groupes sont particulièrement polyvalents dans les infoboxes portables. Ils peuvent être déroulants, ou encore changer l'apparence de l'information. Si une infobox contient de nombreuses informations, il vaut mieux les mettre dans des groupes déroulants :
<infobox>
<group layout="horizontal">
<data source="pommes"/>
<data source="poires"/>
<data source="mangues"/>
</group>
<group layout="horizontal">
<data source="avocats"/>
<data source="raisins"/>
<data source="tomates"/>
</group>
<group collapse="closed">
<header>Nourriture saine</header>
<data source="pommes_de_terre"/>
<data source="fruits_de_la_passion"/>
<data source="ananas"/>
</group>
Paramètres multiples[]
Pour le même champ[]
<infobox>
<data source="women">
<default>{{{ladies|Janedoe}}}</default>
</data>
</infobox>
CSS[]
Personnaliser une ligne entière de données[]
Si le style en ligne est possible pour certains éléments, cela ne suffit pas pour atteindre une donnée et son titre ensembles – par exemple pour changer la couleur de fond d'une ligne entière. Car chaque ligne <data> consiste en une valeur (et son <format> s'il en a un) dans un <div>, dans un autre <div>. Et donc, pour le remplir complètement, vous devez viser le <div> de plus haut niveau avec la couleur de fond souhaitée. Pour y parvenir, vous devez déterminer quel div de votre infobox viser.
Allez de haut en bas, vérifiez le code de votre infobox et comptez chaque balise <data> jusqu'à ce que vous atteigniez celle que vous voulez styliser. Ne prenez pas en compte les balises <title>, <image> ou <navigation>, car elles ne sont pas contenues dans les éléments div. Pour cet exemple, supposez que vous ayez un titre, une image, puis trois balises de données dans cet ordre : « Âge », « Sexe » et « Ville ».
- Important: Si votre infobox contient des balises de données qui n'ont pas de valeur par défaut, elles n'apparaîtront pas si elles restent vides, et l'ordre de vos rangs changera. Voir des solutions possibles pour régler ce problème ci-dessous.
Une fois que vous connaissez le nombre de div en partant du haut de l'infobox, vous pouvez utiliser le code suivant, en remplaçant le 1 dans div:nth-of-type(1) avec la valeur appropriée (dans notre exemple, 1 pour « Âge », 2 pour « Sexe » et 3 pour « Ville »).
.pi-theme-name div:nth-of-type(1) {
background-color: #000000;
}
Le code ci-dessus sélectionnera la première ligne en entier (« Âge »), en-tête compris. Pour n'atteindre que le div contenant la valeur, utilisez :
.pi-theme-name div:nth-of-type(1) div:first-of-type {
background-color: #000000;
}
Le div:first-of-type en plus à la fin sélectionne le conteneur entre le rang entier et le contenu, afin que le titre ne soit pas affecté. Notez que first-of-type (ou nth-of-type(1)) est toujours utilisé pour cette sélection, peu importe le rang que vous visez.
Évidemment, cette astuce peut être utilisée pour ajouter n'importe quelle propriété aux éléments qui sont difficiles à styliser en ligne, comme les listes. Vous pouvez même aller encore plus loin en utilisant les sélecteurs CSS pour n'affecter que certaines listes d'éléments, ou certains éléments (li:nth-child(2n+2)), uniquement le premier, etc., grâce à une simple déclaration.
Comment procéder pour les champs optionnels[]
Si votre infobox contient des champs optionnels sans valeur par défaut, déterminer la position d'un rang/div peut s'avérer impossible et provoquer la stylisation non souhaitée d'autres rangs. Mais selon l'ordre de votre contenu, il existe plusieurs façons d'éviter que cela se produise :
- Placez votre ligne en bas ou presque de votre infobox. Si vous ne savez pas avec certitude combien de lignes se trouvent avant ais que vous savez exactement combien de lignes la suivront, vous pouvez déterminer sa position en comptant en partant du bas. Pour cela, visez-la en utilisant
div:nth-last-of-type(1)au lieu dediv:nth-of-type(1). Dans l'exemple choisi, « Ville » sera sélectionné en premier. - Selon votre contenu, il peut être préférable d'utiliser les balises
<navigation>pour les entrées difficiles à identifier. Comme elles utilisent des éléments HTML<nav>au lieu des divs, vous pouvez les compter séparément et éventuellement déterminer leur position peu importe le contenu optionnel, à moins que vous n'utilisiez plusieurs navs qui risqueraient de ne pas s'afficher. Sélectionnez-les en utilisantnav:nth-of-type(1)ounav:nth-last-of-type(1)selon le cas.
Commencer un modèle pour personnaliser une infobox portable[]
Voici quelques sélecteurs CSS que vous pouvez utiliser pour personnaliser une infobox portable.
Saisissez le code suivant dans votre MediaWiki:Wikia.css et ajoutez des styles où vous le souhaitez :
/* Le nouveau style est invoqué en ajoutant theme="votretheme" à la balise <infobox> */
.pi-theme-votretheme.pi-background { } /* fond global */
.pi-theme-votretheme.pi-image { } /* alignement de la zone d'image */
.pi-theme-votretheme.pi-image-thumbnail { /* pour ajuster l'image */
/* max-width: 123px; Taille de l'image, en général utilisez la même la rgeur que l'infobox, les bordures en moins */
/* max-height: 123px; (si nécessaire) */
/* width: auto; (si nécessaire) */
/* height: auto; Conserve le ratio de l'image */
}
.pi-theme-votretheme{ } /* général : bordures, couleurs, police, etc. */
.pi-theme-votretheme.pi-item-spacing { } /* espacement entre les éléments */
.pi-theme-votretheme.pi-title { } /* espacement, marge, police, ... du titre */
.pi-theme-votretheme.pi-caption { } /* police, couleur, ... des légendes */
.pi-theme-votretheme.pi-group { } /* bordure, ... des groupes */
.pi-theme-votretheme.pi-border-color { } /* couleur de bordure des groupes et données */
.pi-theme-votretheme.pi-header { } /* alignement, bordure, ... des en-têtes */
.pi-theme-votretheme.pi-secondary-font { } /* police des en-têtes et libellés */
.pi-theme-votretheme.pi-secondary-background { } /* fond de l'en-tête */
.pi-theme-votretheme.pi-data { } /* div entourant les libellés et valeurs */
.pi-theme-votretheme.pi-data-label { } /* alignement, sauts de ligne, ... des libellés */
{
/* flex-basis: 50%; */ /* Modifie le ratio en largeur gauche/droite des colonnes */
}
.pi-theme-votretheme.pi-data .pi-secondary-font { } /* rend la police des bloc de données différente de celle pour les en-têtes */
.pi-theme-votretheme.pi-data-value { } /* champ valeur (colonne de droite) */
.pi-theme-votretheme.pi-data-value:not(:first-child) { } /* espacement/marge entre les colonnes de données */
{
/* padding-left: 0; */ /* Ce que vous pensez être le mieux */
/* margin-left: 4px; */
}
.pi-theme-votretheme.pi-font { } /* police des valeurs */
.pi-theme-votretheme.pi-horizontal-group { } /* styles des tableaux pour les groupes alignés horizontalement */
.pi-theme-votretheme.pi-horizontal-group-item { } /* espacement/marge des cellules */
.pi-theme-votretheme.pi-horizontal-group .pi-data-label { } /* libellés pour les groupes alignés horizontalement */
.pi-theme-votretheme.pi-horizontal-group-item { } /* cellules des tableaux pour les groupes alignés horizontalement */
.pi-theme-votretheme.pi-navigation { } /* balise <nav> */
.pi-theme-votretheme.pi-item /* à peu près tout est impacté par cette classe, faites bien attention */ { }