Comment les infoboxes portables peuvent changer votre style

One of the opportunities that comes with switching to portable infoboxes is that you can reconsider the way your **whole community** looks. That may sound daunting, but it can be highly rewarding. As the most dominant element on most pages, infoboxes are usually where the readers' eyes are drawn — and so they are naturally part of the stylistic core of any community.
Ce qu'il y a de bien quand vous choisissez d'utiliser pour les infoboxes portables ce que cela vous donne l'occasion de repenser l'apparence de votre communauté toute entière. Cela peut sembler intimidant, mais aussi s'avérer payant. En tant qu'élément dominant de la plupart des pages, les infoboxes attirent souvent l'oeil des lecteurs, et sont donc au coeur du style de votre communauté.

 Fichier:CSSLogo.png
It's easy to forget that the central "S" in "CSS" stands for ***style***. We just go around, picking colors out of a hat, choosing styles at random. But, particularly when it comes to infoboxes, your life will be exceptionally easier if you take your time and consider your infoboxes a holistic ***system*** of design elements. After all, knowing which brushes to buy and which paint to use makes you smart, but it doesn't necessarily make you an artist.
On peut facilement oublier que le S qui se situe au centre de « CSS » signifie ***style***. Nous avons tendance à choisir des couleurs et des styles au hasard, mais quand il s'agit d'infoboxes, votre vie sera bien plus simple si vous prenez le temps de penser vos infoboxes comme une combinaison d'éléments de style. Après tout, il ne suffit pas d'acheter le bons pinceaux et la bonne peinture pour être un artiste.

It's fun to make each infobox have its own color and to attempt some sort of "color-coding" with them. But the more your community grows, the bigger the chance that your color-coding won't work any longer. There may be an almost infinite number of colors out there, but there are really only a few that the human eye can usefully distinguish.
Il est amusant de donner une couleur propre à chaque infobox et d'instaurer une sorte de code couleur dans vos infoboxes. Mais plus votre communauté grandit, plus vous avez de chances que ces codes couleurs ne fonctionnent plus. S'il existe a un nombre infini de couleurs, l'oeil humain n'en distingue facilement que quelques-unes.

So if you’re going to do color-coding of some kind, paint with a very broad brush. Assign colors to ***huge*** topics, not smaller slices of knowledge. For instance, you’ll probably want to have just one color for all foods — not a color for meats, a color for vegetables, *and* a color for desserts.
Donc si vous voulez utiliser une sorte de code couleur, faites-le de façon bien visible. Assigner des couleurs aux grands thèmes et non à de petites différences. Par exemple, vous pouvez donner une couleur spécifique aux aliments, mais pas une couleur spécifique à la viande, une autre aux légumes, et une aux desserts.

Notice how Wookieepedia have grouped six infoboxes under the single theme of `astro`:
Wookiepedia, par exemple, a regroupé six infoboxes sous ule seul thème `astro` :

```
	/* Constellation, Galaxy, Nebula, Sector, System, Trade_route */
	.pi-theme-astro .pi-title { background-color: #004466; }
	.pi-theme-astro .pi-navigation { background-color: #004466; }
	.pi-theme-astro .pi-navigation a { color: white; }
	.pi-theme-astro .pi-header { background-color: #BBCCDD; }

```

By assigning `astro` to *all* massive space objects, they're using colors

1. `004466` and
2. `BBCCDD` to convey useful *meaning*.

En assignant `astro` à tous les corps célestes massifs ils utilisent les couleurs

1. `004466` et
3. `BBCCDD` de façon efficace.

But consider this. Your life can be **even simpler** if you choose to make ***all*** your infoboxes have the ***same*** color — preferably one that is chromatically related to your navigation bar. Taking the time to create a single, *killer* style for your infoboxes will reduce your maintenance time for years to come.
Mais vous pouvez encore vous simplifier la vie si vous décidez de ne choisis ***qu'une seule*** couleur pour ***toutes*** vous infoboxes, de préférence une couleur allant de pair avec votre barre de navigation. Prenez le temps de créer un seul style *vraiment unique* pour vos infoboxes vous évitera de perdre du temps dans les années à venir.

 Fichier:ColorEye.png
Likewise, people must be able to ***read*** your infobox. This is harder to do if there's little contrast between the color of the text and the background. Here's a well-illustrated demonstration of color contrast issues. You'll also want to use a color contrast analyzer to help you make highly-readable color choices.
De même, les gens doivent être capables de ***lire*** vos infoboxes. C'est difficile quand le texte et le fond ne contrastent pas suffisamment. Voici un exemple flagrant de problèmes de contraste. Vous pouvez même utiliser un analyseur de contraste pour vous aider à choisir des couleurs faciles à lire.

If you're looking for design inspiration, and even specific coding ideas, go to communities that currently have portable infoboxes in action. Read their CSS and try to make sense out of it. Audition their code on a test wiki that you create. Then, when you're comfortable manipulating the portable infobox CSS, use it on your own community. The worst that could happen is that you'll make an easily-fixable mistake!
Si vous cherchez de l'inspiration en matière de style, voire des idées de code, allez sur les communautés qui utilisent les infoboxes portables. Lisez leur CSS et essayez de le comprendre. Tentez de copier leur code sur votre wiki test. Puis, quand vous vous sentez à l'aise avec le CSS des infoboxes portables, utilisez ce code sur votre propre communauté. Au pire, vous ferez une erreur facilement réparable !

## Tailored themes

Recently, Wikia worked with two communities with different theme experiences. In one case, our goal was to match as closely as possible the existing theme. In another, we broke with the established theme in order to establish something more readable, particularly in the title bar.
Récemment, Wikia a travaillé avec deux communautés pour expérimenter des thèmes. Dans la première, nous avons tenté de recréer le plus fidèlement possible le thème existant. Dans la deuxième, nous avons changé le thème pour le rendre plus lisible, surtout le titre.

### Reproducing what's already there

The Walking Dead Wiki was given a crafted, bespoke theme for their portable infoboxes that matched most of their original infoboxes. Some of the templates on their community were imported from other sites and did not consistently match the rest. However, once the new theme was set up in the site CSS, all infoboxes defaulted to it — without requiring inline code.

### Reproduire ce qui existe

Les infoboxes originales de The Walking Dead Wiki avaient un thème unique très travaillé que nous avons réussi à recréer pour leurs nouvelles infoboxes portables. Certains de leurs modèles avaient été importés depuis d'autres communautés et n'étaient pas consistants avec le reste. Cependant, une fois leur nouveau thème défini dans le CSS du wiki, celui-ci s'est appliqué à toutes leurs infoboxes, sans aucun style en ligne.

 Fichier:Tyreese-nPI.png   Fichier:Tyreese-PI.png

### Making some changes

By contrast, Borderlands Wiki elected to enlist Europa, one of the two default themes for portable infoboxes. It uses a community's existing color scheme to provide a tailored feel without writing any CSS code. It's optimized for the desktop and tablet experiences, with plenty of touch-friendly padding
for navigation on emerging devices.

### Effectuer des changements

Au contraire, Borderlands Wiki a choisi d'utiliser le thème Europa, l'un des deux thèmes par défaut pour les infoboxes portables. Ce thème s'inspire des couleurs utilisées sur la communauté pour les infoboxes portables sans que vous ayez besoin d'écrire une seule ligne de code CSS. Il est optimisé pour la lecture sur un ordinateur de bureau ou une tablette, et pour la navigation depuis n'importe quel nouvel appareil de manière générale.

Of course, Europa can be modified by CSS, and Borderlands Wiki chose to tweak things a bit from the true Europa default. But in doing so, they didn't give up any of Europa’s native responsiveness.
Bien entendu, vous pouvez modifier le thème Europe dans le CSS, et Borderlands Wiki a notamment choisi de modifier légèrement le thème par défaut. Mais en le modifiant, ils n'ont perdu aucun des avantages d'Europa.

 Fichier:HB-nPI.png   Fichier:HB-PI.png

### Conclusion

While you absolutely can style each and every infobox individually, you should use your power wisely. Try to make as much of your infobox design universal — applicable to every individual infobox. If you don't, you'll end up with a very complicated CSS that'll be much harder to maintain. Here's an example of a really complicated set of Themes — over 2000 lines long!

### Conclusion

Si vous pouvez personnaliser chaque infobox individuellement, nous vous conseillons de le faire avec modération. Essayez de rendre l'apparence de votre infobox la plus possible universelle, applicable à chaque infobox individuelle. Si ce n'est pas le cas, vous finirez par avoir un CSS très compliqué et difficile à maintenir.
Voici un exemple de thèmes différents très compliqués, qui nécessitent plus de 2000 lignes de code CSS !

It's completely understandable why this has happened. Over time, communities add more and more infoboxes. And a team that worked on the community in 2009 might have totally different stylistic ideas to yours. Like modern cities built atop ancient ones, the deeper you go into the past, the more different styles you'll find. Thus, the adoption of portable infoboxes is a great time to clear away all the old styles to come up with something fresh, bold and unified. Otherwise, you'll end up maintaining tons of other people's ideas of What Looks Cool.
Mais nous comprenons pourquoi c'est arrivé. Au fil du temps, les communautés ajoutent de plus en plus d'infoboxes. Et l'équipe qui a travaillé sur une communauté en 2009 avait peut-être des idées très différentes de vous en matière style. Comme les villes modernes construites par-dessus d'anciennes cités, plus vous remontez loin, plus vous trouverez de styles différents. Opter pour les infoboxes portables vous permettra de vous débarrasser des vieux styles et de créer quelque chose de nouveau et d'unique. À moins que vous ne préféreriez conserver les goûts et les couleurs d'autres personnes...

Modèle:Blog footer