L'un des avantages, quand vous choisissez d'utiliser les infoboxes portables, c'est 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é.
C'est le « S » du milieu qui compte
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, vous vous simplifierez nettement la vie si vous prenez le temps de penser vos infoboxes comme un système holistique d'éléments stylistiques. Après tout, il ne suffit pas d'acheter les bons pinceaux et la bonne peinture pour devenir un artiste.
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 couleur ne fonctionnent plus. S'il existe a un nombre infini de couleurs, l'oeil humain n'en distingue facilement que quelques-unes.
Donc si vous voulez utiliser une système de codes couleur, faites-le de façon bien visible. Assignez des couleurs aux grands sujets 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 encore une autre aux desserts.
Wookiepedia, par exemple, a regroupé six infoboxes différentes sous un 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; }
En assignant astro à tous les corps célestes massifs ils utilisent les couleurs #004466 et #BBCCDD de façon efficace.
Mais vous pouvez encore vous simplifier davantage la vie si vous décidez de ne choisir qu'une seule couleur pour toutes vos 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, cela vous évitera de perdre du temps pour assurer leur maintenance dans les années à venir.
Assurez-vous de choisir des couleurs que tout le monde peut voir
De même, les gens doivent être en mesure de lire facilement vos infoboxes. C'est difficile quand le texte et le fond ne contrastent pas suffisamment. Ici, on vous explique les problèmes de contraste. Vous pouvez même utiliser un analyseur de contraste pour vous aider à choisir des couleurs faciles à lire.
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 !
Thèmes personnalisés[]
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, notamment le titre.
Reproduire un thème existant[]
Les infoboxes originales de The Walking Dead Wiki avaient un thème unique très travaillé que nous avons quasiment réussi à recréer dans 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 avoir besoin de style en ligne.
Effectuer des changements[]
Au contraire, Borderlands Wiki a choisi d'utiliser le thème Europa, l'un des deux thèmes par défaut des infoboxes portables. Europa utilise les couleurs présentes sur la communauté pour ajouter une touche personnelle aux infoboxes portables sans que vous ayez besoin d'écrire une seule ligne de code CSS. Il est optimal pour la lecture sur un ordinateur de bureau ou tablette, et, de manière générale, pour la navigation depuis n'importe quel nouvel appareil.
Bien entendu, vous pouvez modifier le thème Europe dans le CSS, et Borderlands Wiki a, par exemple, 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.
Conclusion[]
Si vous pouvez personnaliser chaque infobox individuellement, nous vous conseillons de le faire avec modération. Essayez de rendre le design de votre infobox le plus universel possible, 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 !
Nous sommes bien conscients des raisons d'une telle complexité. 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. Telles des 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...
Vous pouvez consulter l'article original ici (en anglais).
Cliquez ici pour suivre les blogs du Staff.
Nous expérimentons ! Apprenez-en plus sur les types d'événements et autres choses que nous avons fait jusqu'à présent ou que nous prévoyons de faire !
Vous souhaitez un accès à temps réel à vos camarades éditeurs et au staff ?
Rejoignez notre serveur Discord officiel pour les utilisateurs enregistrés !