Centre des communautés
S'inscrire
Advertisement
Centre des communautés

Le Concepteur de thème est un outil d'administration facile à utiliser qui vous permet de personnaliser rapidement le thème et le logo de votre communauté. Vous pouvez en choisir un parmi plusieurs thèmes prédéfinis lorsque vous créez votre wiki pour la première fois, ou concevoir votre propre thème unique qui correspond au sujet de votre communauté pour les deux thèmes clair et sombre.

Pas à pas[]

  • En tant qu'administrateurs d'une communauté, vous pouvez trouver un lien vers le Concepteur de thème dans le menu déroulant dans le coin supérieur droit en passant la souris sur les trois points verticaux (⋮), dans le menu Mes outils de la barre d'outils ou dans le Tableau de bord administrateur. Vous pouvez également y accéder directement en vous rendant sur Spécial:ThemeDesigner sur votre wiki.
  • Il y a trois sections pour personnaliser le wiki :
    • Identité de la communauté : Permet de définir le nom du wiki et le logo de la communauté.
    • En-tête et arrière-plan : Permet de définir l'arrière-plan du wiki et de changer la couleur de la navigation locale.
    • Styles d'article : Permet de définir la couleur de l'arrière-plan et des liens des articles, ainsi que de changer la police de caractères des titres de section.
Mobile theme preview

Vous pouvez passer de l'aperçu pour ordinateur de bureau à l'aperçu pour mobile à l'aide des icônes situées dans le coin supérieur gauche de la fenêtre d'aperçu.

  • Toute modification apportée est immédiatement visible dans la fenêtre d'aperçu, ce qui vous permet de voir à quoi ressemblera votre thème avant de l'enregistrer, à la fois sur le bureau et sur le mobile. Vous pouvez basculer entre l'aperçu du bureau et celui du mobile en utilisant l'icône respective de l'écran de bureau et du smartphone dans le coin supérieur gauche de la fenêtre d'aperçu.
  • Les administrateurs peuvent personnaliser un thème clair et un thème foncé sur leur wiki, accessibles dans le Concepteur de thème par le biais d'onglets distincts, et choisir lequel des deux sera le thème par défaut de la communauté. Toutes les options sous les rubriques « En-tête et arrière-plan » et « Styles d'article » peuvent être définies par thème. Lorsque vous changez d'onglet, l'aperçu change également pour afficher le thème en cours de personnalisation.

Pour s'assurer que les thèmes répondent aux exigences en matière d'accessibilité, les administrateurs ne pourront pas sauvegarder un choix de thème qui a des avertissements de mauvais contraste. Voir ci-dessous pour plus de détails à ce sujet.

Lorsque vous avez terminé et que vous répondez aux exigences en matière de contraste, cliquez sur « Enregistrer » et votre nouveau thème sera instantanément visible par tous les utilisateurs.

Thème mobile[]

La modification du thème mobile est activée par défaut pour toutes les communautés de Fandom, à l'exception de celles qui présentent des problèmes de contraste de couleurs ou des wikis Gamepedia historiques utilisant du CSS mobiles personnalisé. Les wikis Gamepedia avec du CSS mobile n'auront jamais le thème mobile activé automatiquement, mais il peut être activé sur demande par un membre du Staff. Pour les wikis avec des problèmes de contraste, lors de l'ouverture du Concepteur de thème, les administrateurs verront une bannière en haut qui indique « Le thème mobile n'est pas encore activé pour ce wiki. Pour activer le thème mobile, veuillez résoudre les problèmes de contraste des couleurs et enregistrer vos modifications. ». Une fois que tous les problèmes de contraste sont résolus manuellement et que le thème est enregistré, le thème mobile sera activé automatiquement. Chaque fois que le thème mobile est nouvellement activé, les administrateurs verront une brève notification le confirmant.

Mobile theme - theming switch

Les utilisateurs peuvent facilement passer du thème clair au thème foncé

Afin de garantir une esthétique cohérente entre l'expérience de bureau et l'expérience mobile, les couleurs définies dans le Concepteur de thème pour l'arrière-plan, la navigation épinglée et l'en-tête, ainsi que les couleurs de lien et d'arrière-plan des articles seront les mêmes sur bureau et sur mobile. L'image d'arrière-plan et la police d'en-tête choisies pour chaque thème seront également les mêmes sur bureau et sur mobile.

Veuillez noter que toutes les options proposées par le Concepteur de thème pour bureau ne seront pas applicables au thème mobile, et que toute modification supplémentaire apportée au thème de bureau avec les CSS ne s'appliquera pas au mobile.

Le thème par défaut choisi, clair ou sombre, sera également le thème par défaut pour le mobile. Toutefois, tout comme sur bureau, chaque utilisateur pourra choisir son propre thème de manière personnelle. Les choix de thèmes personnels que l'on fait sur mobile se reportent sur le bureau et vice versa. Vous trouverez plus d'informations sur les thèmes clairs et sombres ici.

Identité de la communauté[]

Cette section permet de personnaliser le nom de la communauté, le logo, le favicon et l'image du site. Ces paramètres sont indépendants des thèmes clair/sombre et s'afficheront de la même manière sur les deux.

Theme designer
  • Nom de la communauté : Vous verrez le nom de la communauté dans l'en-tête à côté du logo. Notez que cela ne change pas le nom de site du wiki.
  • Logo de la communauté  Le logo de la communauté est un complément graphique au nom de la communauté. Les utilisateurs peuvent revenir à la page d'accueil du wiki en cliquant sur le logo sur n'importe quelle page.
    • Les logos ne peuvent être que des fichiers .png et ne doivent pas dépasser le poids de 1 Mio et la taille de 500 × 500 pixels.
    • Le logo est stocké dans Fichier:Site-logo.png.
    • Utiliser dans la navigation épinglée : Permet d'inclure le logo à l'extrême gauche de l'écran de navigation, visible après avoir fait défiler la page vers le bas.
  • Image de favicon : Les favicons sont de petites icônes qui apparaissent en haut de votre navigateur, et sont fréquemment utilisées dans les onglets et les marque-pages.
    • Les favicons ne peuvent être que des fichiers .ico ou .png et doivent faire entre 16 × 16 et 256 × 256 pixels en taille. Pour en savoir plus sur les favicons cliquez ici.
    • Le favicon est stocké dans Fichier:Site-favicon.ico.
  • Image du site communautaire : Cette image représentera la communauté à travers Fandom et apparaîtra à différents endroits, y compris dans les recherches et les profils. Il est donc recommandé d'utiliser une image de haute qualité, car elle apparaîtra en plusieurs tailles sur différents navigateurs et appareils.
    • L'image du site peut être au format .png ou .jpg, et la taille recommandée est de 600 × 450 pixels avec une taille minimale de 200 px x 200 pixels. La taille maximale du téléchargement est de 1 Mio.
    • L'image est stockée dans Fichier:Site-community-image.

En-tête et arrière-plan[]

L'arrière-plan est la zone située en dehors de la zone de contenu et apparaît sur toutes les pages de votre wiki. Il peut s'agir d'une couleur unie, d'une image ou les deux à la fois.

Concepteur de thème - en-tête et arrière-plan
  • Image d'arrière-plan : si vous souhaitez que votre wiki ait une image d'arrière-plan, cliquez dans cette zone pour en importer une. Les types de fichiers acceptés sont .jpg, .png et .gif. La taille maximale du fichier est de 1 Mio.
    • Aide:Arrière-plan contient de plus amples informations et recommandations concernant la création d'une image de fond personnalisée pour votre communauté.
    • Sous la zone d'import, il y a une option pour que l'image d'arrière-plan choisie soit affichée sur le mobile comme image d'en-tête. Si cette option n'est pas cochée, elle n'apparaîtra pas sur le thème mobile. Lorsque vous activez le thème mobile, la valeur par défaut est de ne pas afficher l'arrière-plan.
    • Affichage de l'image contrôle si l'image couvre tout l'écran ou seulement la zone d'en-tête au-dessus de l'article. L'arrière-plan peut être personnalisé avec une image d'en-tête (recommandée 2880 × 656 pixels) ou de plein écran (recommandée 2880 px carré).
    • Style d'image d'arrière-plan contient diverses options pour l'affichage de l'image.
      • Couverture : étire la plus petite dimension de l'image autant que nécessaire pour remplir tout l'écran (équivalent à la règle CSS background-size:cover).
      • Mosaïque : cette option répète l'image d'arrière-plan sur toute la page, avec la possibilité de le faire horizontalement, verticalement ou les deux.
      • Ajustement : l'image sera alignée sur la zone sélectionnée, et la plus grande dimension de l'image sera étirée pour s'adapter (équivalent à la règle CSS background-size:contain).
    • Opacité de l'image définit le degré de transparence de l'image d'arrière-plan par rapport à la couleur de fond. Plus le pourcentage est faible, plus l'image devient transparente, ce qui est utile pour permettre un meilleur contraste des éléments. Vous pouvez également ajuster la couleur du texte de l'en-tête de la communauté pour obtenir ce résultat.

Les choix de couleurs suivants seront appliqués aux thèmes « bureau » et « mobile » :

  • Couleur d'arrière-plan de la communauté : définit une couleur de fond unie pour le wiki.
  • Couleur d'arrière-plan de la navigation épinglée : définit la couleur de fond de la navigation épinglée, visible en haut de l'écran après le défilement vers le bas. La couleur du texte est automatiquement déterminée pour le contraste.
  • Couleur d'en-tête de la communauté : définit la couleur du texte de la navigation d'en-tête de la communauté. Choisissez une couleur qui contraste suffisamment avec l'image et la couleur d'arrière-plan, sinon vous ne pourrez pas enregistrer votre thème.

Styles d'article[]

Concepteur de thème - styles d'article

Les choix suivants seront appliqués aux deux thèmes bureau et mobile :

  • Police des titres : permet de modifier la police de caractères des titres des articles. La police par défaut est « Rubik », mais d'autres options « Work Sans », « Lora », « Roboto Slab », « BioRhyme » et « Inknut Antiqua » sont également disponibles.
  • Couleur d'accentuation : Sur ordinateur, la couleur d'accentuation est utilisée sur les boutons principaux (remplis) et secondaires (soulignés), la barre d'accès rapide (QuickBar), le compteur de commentaires sur les pages d'articles/blogs, les infoboxes : en-tête, en-tête et bordure de section et la barre verticale sur les notices du site. Sur les mobiles, elle est utilisée sur les boutons, les bordures des infobox, le midlight (la couleur derrière une en-tête/titre de texte), et sur le commutateur à bascule.
  • Couleur de lien : est la couleur de la plupart des liens. Essayez de choisir quelque chose qui présente un bon contraste avec le fond de l'article, qui se distingue du texte normal, et évitez les couleurs rouges car les liens rouges indiquent des pages inexistantes.
  • Couleur d'arrière-plan de l'article : est la couleur de fond de la zone de contenu principale. La couleur du texte sera automatiquement déterminée pour un meilleur contraste.
    • En changeant cette couleur, vous modifiez également la couleur de fond des menus déroulants (tels que les boutons déroulants de la navigation et « Modifier »).

Historique du thème[]

Concepteur de thème - historique
  • Chaque fois qu'un thème est enregistré à l'aide du bouton « Enregistrer », une entrée est créée dans cette liste. La liste est unique pour le thème clair et le thème foncé.
  • Si vous voulez voir ou revenir à une version précédente, vous pouvez le faire dans le Concepteur de thème. Cliquez sur une version précédente et elle se chargera dans le mode de prévisualisation.
  • Seules les 10 dernières versions sont sauvegardées. En minimisant le nombre de fois où vous enregistrez en effectuant toutes vos modifications en une seule fois, l'historique restera informatif et utilisable.

Avertissements de contraste[]

L'objectif est de fournir un contraste suffisant entre le texte et son arrière-plan pour qu'il puisse être lu par les personnes ayant une vision modérément faible. Pour garantir la conformité, le bouton « ENREGISTRER » du Concepteur de thème reste grisé tant que des erreurs de contraste existeront pour une ou plusieurs des couleurs choisies sur l'un ou l'autre des thèmes, et un message d'erreur mettant en évidence le problème sera présent au-dessus du bouton ENREGISTRER. Ce n'est que lorsque tous les problèmes de contraste pour les thèmes clair et sombre sont résolus que le message d'erreur près du bouton ENREGISTRER disparaîtra et vous pourrez enregistrer vos modifications.

Theme Designer - contrast errors

Les surlignages rouges indiquent des erreurs de contraste dans le Concepteur de thème, par couleur et par thème.

Lorsque les erreurs sont actives, chaque couleur affectée est mise en évidence par un cadre rouge autour de la couleur choisie, et le texte de l'erreur s'affiche en rouge avec un signe d'erreur octogonal devant lui. Les avertissements de contraste, quant à eux, sont indiqués par un cadre orange autour de la couleur concernée, et le texte d'avertissement s'affiche en orange avec un triangle d'avertissement devant lui. Si l'erreur est causée par des choix de couleur sur l'autre thème, c'est-à-dire le thème clair lorsque vous regardez le thème foncé, ou vice versa, un encadré rouge sera présent autour de l'onglet du thème pour attirer l'attention. Si le seul problème sur l'autre thème est un avertissement, le cadre autour de l'onglet du thème sera orange.

Le message pour chaque couleur est unique et explique pourquoi il s'agit d'un problème. Vous déclenchez ce message en cliquant sur la couleur mise en évidence comme ayant un problème. Pour chaque problème de contraste, trois couleurs sur le spectre adjacent à celle choisie qui respectent le rapport de contraste minimum seront présentées afin de donner aux administrateurs un moyen facile de résoudre le problème. Cette fenêtre contextuelle restera ouverte pendant la recherche d'une nouvelle couleur et le message d'erreur ou d'avertissement réapparaîtra si vous changez la couleur pour quelque chose qui ne répond pas aux exigences de contraste. Une fois qu'une bonne solution de couleur est trouvée, cliquez sur le « X » ou à l'extérieur du fenêtre modale pour la faire disparaître.

Les rapports de contraste minimums requis contraste (basés sur WCAG 2.x AA) sont :

Couleur du lien vs fond de l'article - 4.5[]

Si le problème réside dans la couleur des liens sur la couleur d'arrière-plan choisie, vous lirez : « Les liens affichés dans cette couleur risquent d'être difficiles à lire. Nous vous recommandons de choisir une autre couleur pour un meilleur contraste avec la couleur d'arrière-plan. »

Soulignements des liens[]

Certaines suggestions de couleurs pour les liens afin de résoudre ce problème de contraste peuvent rendre la couleur du lien plus proche ou trop proche de la couleur du texte, qui est automatiquement définie sur Fandom en fonction de la couleur de fond de l'article (#3a3a3a sur le thème clair et #e6e6e6 sur le thème foncé). Ceci peut confondre les liens avec du texte ordinaire et les rendre plus difficiles à lire. Pour remédier à cela, lorsque la couleur du lien choisi présente un contraste inférieur à 1,5 avec le corps du texte environnant, les liens seront soulignés automatiquement pour les distinguer correctement. Le soulignement disparaît dès qu'une couleur de lien présentant le contraste approprié est sélectionnée, qui peut être vu en temps réel dans la fenêtre de prévisualisation. Veuillez noter que le soulignement n'apparaîtra que pour les liens dans le corps du texte des pages wiki et qu'il ne sera pas présent dans des zones telles que la barre de navigation, la barre de droite, la table des matières, les modèles ou les pages de catégories.

Couleur d'arrière-plan de la communauté vs couleur de l'en-tête de la communauté - 4.5[]

Lorsque la couleur d'arrière-plan de la communauté et la couleur de l'en-tête de la communauté ne présentent pas un contraste suffisant, elles peuvent rendre la navigation locale illisible. Si le contraste est insuffisant, le message d'erreur sera le suivant : « Les liens et le texte affichés sur cette couleur d'arrière-plan seront difficiles à lire pour certains utilisateurs. Veuillez choisir une autre couleur afin d'obtenir un meilleur contraste avec la couleur d'en-tête de la communauté, ou sélectionnez l'une des couleurs recommandées ci-dessous. »

Veuillez noter que lorsqu'une image d'arrière-plan est présente, cette erreur ne s'affichera pas, dû au fait que les erreurs de contraste ne prennent pas en compte les couleurs de l'image d'arrière-plan pour les corrections de couleur suggérées et les problèmes de contraste sont donc couverts par l'image. Cependant, il existe une option permettant de ne pas afficher l'image d'arrière-plan sur mobile, donc si une image n'est pas utilisée, les problèmes de contraste seront encore perceptibles sur la vue mobile. Dans ce cas, nous vous recommandons de résoudre l'erreur de contraste en utilisant la fenêtre d'aperçu mobile plutôt que l'aperçu de bureau.

Les rapports de contraste minimums recommandés sont :

Couleur d'accentuation vs couleur de fond des articles - 3.0[]

Étant donné que la couleur d'accentuation définit les couleurs de divers éléments du wiki, comme les boutons, les éléments de l'infobox et de la barre d'accès rapide (QuickBar) et qu'elle est donc parfois affichée par-dessus la couleur d'arrière-plan de l'article, un mauvais choix de contraste peut la faire se fondre dans l'arrière-plan. Si cela se produit, le message d'erreur suivant s'affiche : « Cette couleur s'affichera sur la couleur d'arrière-plan de l'article et risque d'être difficile à voir. Veuillez choisir une autre couleur ou sélectionner l'une des couleurs recommandées ci-dessous. ». Il s'agit simplement d'une recommandation, et non d'une exigence stricte, de sorte que vous pourrez toujours enregistrer votre thème sans avoir à ajuster la couleur d'accentuation.

Gardez à l'esprit qu'une seule couleur de chaque paire doit être modifiée afin de respecter les directives en matière de contraste. Si vous ne parvenez pas à résoudre les problèmes de contraste de manière satisfaisante, veuillez contacter le Représentant de Wiki affecté à votre communauté, ou en son absence, veuillez contacter un Représentant de Wiki sur Discussions.

Lecture complémentaire[]

Plus d'aide

Advertisement