Portable Infoboxes/Tips and tricks

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é.

## 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.

## Navigation optionnelle

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>
</navigation>

<navigation>
</navigation>

```

## Dérouler est facile

Contenu masqué par défaut

```
<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 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  :

```
.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 wikia 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

Janedoe

```
<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 :

1. 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 de `div:nth-of-type(1)`. Dans l'exemple choisi, « Ville » sera sélectionné en premier.
2. 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 utilisant `nav:nth-of-type(1)` ou `nav: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 \*/ { }

```

## Voir aussi

* Personnaliser une infobox portable (en anglais)
* Infoboxes portables/Bonnes pratiques

## Références

1. ↑ http://www.w3.org/Style/Examples/007/center.en.html