Centre des communautés
Advertisement
Centre des communautés

Le guide de conversion de FandomDesktop est destiné à être une référence rapide pour convertir les anciens wikis de l'apparence Oasis et Hydra à l'apparence actuelle FandomDesktop.

Note: Le Tableau de bord administrateur a été activé pour les wikis Gamepedia sur FandomDesktop et peut être consulté sur Special:AdminDashboard.

Choisir de l'activer ou non[]

Pour choisir d'activer FandomDesktop, cliquez sur le lien dans la bannière qui vous invite à le faire ou allez dans Mes préférences et cliquez sur l'onglet Apparence. Sur cette page, vous aurez la possibilité de sélectionner Oasis/Hydra ou FandomDesktop. Lorsque vous sélectionnez FandomDesktop, vous disposez de préférences supplémentaires pour contrôler votre expérience.

Ce même onglet vous permet de choisir de revenir à l'ancienne apparence à des fins de test, alors que votre communauté se prépare à un déploiement complet au début de l'été.

Nouveaux fichiers CSS/JS personnalisé[]

  • MediaWiki:Fandomdesktop.css
  • MediaWiki:Fandomdesktop.js

Ni MediaWiki:Wikia.css ni MediaWiki:Wikia.js ne seront chargés sur FandomDesktop. Tout le code personnalisé doit être déplacé vers ces nouvelles feuilles de style.

Modifications de fonctionnalités[]

Tabber[]

La classe .tabber pour le conteneur des onglets est conservée.

Tous les autres noms de classe sont supprimés et remplacés par les classes du Fandom Design System : wds-tabs__tab pour les onglets et wds-tabs__content pour le contenu des onglets.

Mise en page de base[]

Migration depuis les wikis GP[]

    • le conteneur de page entière (avec la navigation) #pageWrapper est maintenant accessible par la classe .resizable-container, mais la navigation est maintenant en haut de la page
    • il y a maintenant l'enveloppe de la page principale avec la classe .page qui contient le conteneur de contenu et le rail de droite (si le rail de droite est présent, cet élément contient aussi la classe .has-right-rail)
    • il y a maintenant le conteneur de contenu principal avec la classe .page__main qui contient l'en-tête, le contenu et le pied de page de la page
    • le contenu de l'article #content ou .mw-body est maintenant accessible par l'id #content ou la classe .page-content
    • L'en-tête de la page est accessible par la classe .page-header
    • le pied de page est accessible par la classe .page-footer
    • Le rail de droite est accessible par l'id #WikiaRailWrapper ou par la classe .WikiaRail

Migration depuis les wikis Fandom[]

    • Le conteneur de la page entière (avec la navigation) .WikiaPage est maintenant accessible par la classe .resizable-container
    • Le conteneur de la page principale (avec le rail de droite) .WikiaPageContentWrapper est maintenant accessible par la classe .page (si le rail de droite est présent, cet élément contient également la classe .has-right-rail). Il contient le conteneur de contenu et le rail de droite
    • Le conteneur de contenu principal #WikiaMainContentContainer ou .WikiaMainContentContainer est maintenant accessible par la classe .page__main. Il contient l'en-tête, le contenu et le pied de page de la page
    • Le contenu de l'article #content ou .WikiaArticle est maintenant accessible par la classe #content ou .page-content.
    • L'en-tête de page (accessible par #PageHeader ou .page-header) est maintenant accessible par la classe .page-header
    • le pied de page est accessible par la classe .page-footer
    • Le rail de droite (accessible par #WikiaRailWrapper ou .WikiaRail) est désormais accessible par la classe .right-rail-wrapper

Infobox portable[]

Changement visuels[]

  • La bordure autour du conteneur des infoboxes est ajoutée par défaut

L'arrière-plan par défaut des titres (.pi-title) et des en-têtes (.pi-header) est défini sur accent color (--theme-accent-color) et la couleur de la police est calculée dynamiquement et définie sur --theme-accent-label-color. Pour certaines personnalisations, cela peut rendre illisible le libellé de l'en-tête (ou du titre).

Solution recommandée :

.portable-infobox {
  --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;
}

Modification des balises pour les onglets[]

  • Les balises HTML pour les onglets des panels et des collection d'images ont été complètement modifiées, ce qui signifie qu'aucune personnalisation actuelle des onglets n'est appliquée ou supportée.

Anciennes balises pour les collections d'image (en simplifié) :

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        LÉGENDE
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OU VIDÉO
      </a>
    </figure>
  </div>
</div>

Nouvelles balises pour les collections d'image (en simplifié) :

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs"> 
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          LÉGENDE
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OU VIDÉO
      </a>
    </figure>
  </div>
</div>

Anciennes balises pour les panels (en simplifié) :

<section class="pi-item pi-panel pi-border-color">
  EN-TÊTE
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          LIBELLÉ
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      CONTENU
    </div>
  </div>
</section>

Nouvelles balises pour les panels (en simplifié) :

<section class="pi-item pi-panel pi-border-color wds-tabber">
  EN-TÊTE
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          LIBELLÉ
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    CONTENU
  </div>
</section>

Variables CSS disponibles pour la personnalisation des Infoboxes Portables[]

.portable-infobox {
  --pi-background: /* COULEUR D'ARRIÈRE-PLAN PRINCIPAL */
  --pi-secondary-background: /* COULEUR D'ARRIÈRE-PLAN DES TITRES ET EN-TÊTE */
  --pi-secondary-background--label: /* COULEUR DU TEXTE DES TITRES ET EN-TÊTE */
  --pi-border-color: /* COULEUR DE BORDURE */
}

Exemple :

.portable-infobox {
  --pi-background: rgba(var(--theme-sticky-nav-dynamic-color-1--rgb), 0.05);
  --pi-secondary-background: var(--theme-sticky-nav-background-color);
  --pi-secondary-background--label: var(--theme-sticky-nav-text-color);
  --pi-border-color: var(--theme-border-color);
}

Image d'arrière-plan de la communauté[]

Le nouveau Concepteur de thème fournit quelques possibilités étendues pour personnaliser l'apparence de l'image d'arrière-plan de la communauté. Cependant, si vous souhaitez porter vos personnalisations CSS/JS existantes de l'arrière-plan, il y a un nouveau nom de classe : .fandom-community-header__background.

Fonctionnalités qui changent en comparaison avec Oasis[]

Galeries[]

Les galeries sur FandomDesktop sont basées sur la solution de galerie native de MediaWiki.

Il y a deux changements majeurs dans la syntaxe des galeries :

  • Pour déterminer le style de la galerie, vous devrez utiliser mode au lieu de la propriété type. Afin d'assurer la rétrocompatibilité avec toutes les galeries créées sur Oasis, la propriété type est toujours supportée. Cependant, il est encouragé de créer de nouvelles galeries en utilisant la nouvelle propriété mode.
  • Le support de certaines propriétés de galeries a été interrompu. Voir ci-dessous pour la liste complète :

Attributs de l'élément <gallery>[]

Traditionnel
type Supporté temporairement Devrait être remplacé par l'attribut « mode » équivalent.
widths Supporté
columns Non supporté Peut être remplacé par l'attribut « perrow » équivalent.
perrow Supporté
position Non supporté
spacing Non supporté
orientation Non supporté
captionposition Non supporté captionposition="within" peut être remplacé par mode="packed-overlay" proposant une apparence similaire
captionalign Non supporté
captiontextcolor Non supporté
bordersize Non supporté
bordercolor Non supporté
hideaddbutton Non supporté
caption Supporté
Diaporama
widths Supporté
crop Non supporté
showrecentuploads Non supporté
position Non supporté
Carrousel
orientation Supporté

Notes additionnels :

  • Les images des galeries Fandom sont « frameless » (sans cadre) par défaut, alors que les images dans les galeries MW sont affichées dans un cadre épais. Afin de préserver le même aspect d'une galerie, il faut soit le gérer par un style personnalisé, soit ajouter le mode="nolines" à toutes les galeries dans le cadre de la migration.

Fonctionnalités changent en comparaison avec Hydra/HydraDark[]

Galeries[]

Nouveau mode de galerie - diaporama[]

Les communautés Gamepedia disposeront désormais d'un nouveau mode de galerie de type diaporama.

Utilisation :

<gallery mode="slider">
Image.jpg
Image2.jpg
...
</gallery>

Les galeries de type diaporama acceptent un attribut supplémentaire appelé orientation, qui prend les valeurs bottom (bas ; par défaut) ou right (droite) et détermine la position de la navigation du diaporama.

Variables du thème[]

Dans l'apparence FandomDesktop, les utilisateurs ont accès à de nouvelles variables représentant les couleurs du thème. Ces variables seront accessibles en CSS.

Exemple de valeur hexa : #ffffff

Exemple de valeur de couleur Rouge, Vert, Bleu : 0,0,0

Nom de variable Description
--theme-accent-color Couleur d'accentuation tirée du Concepteur de thème, présentée sous forme de valeur hexadécimale
--theme-accent-color--hover Couleur d'accent tirée du Concepteur de thème, assombrie ou éclaircie de 20 %, selon le thème, présentée sous forme de valeur hexadécimale
--theme-accent-color--rgb Couleur d'accentuation tirée du Concepteur de thème, présentée comme un groupe de valeurs Rouge, Vert, Bleu.
--theme-accent-dynamic-color-1 Couleur dynamique-1 pour accentuation. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-accent-dynamic-color-1--rgb Composants rgb de la couleur dynamique-1 pour accentuation. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-accent-dynamic-color-2 Couleur dynamique-2 pour accentuation. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-accent-dynamic-color-2--rgb Composants rgb de la couleur dynamique-2 pour accentuation. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-accent-label-color Couleur de texte accessible à utiliser avec l'arrière-plan --theme-accent-color, présentée sous forme de valeur hexadécimale
--theme-alert-color Couleur d'alerte (rougeâtre), ajustée pour un contraste approprié par rapport au fond de la page, présentée sous forme de valeur hexadécimale
--theme-alert-color--hover Couleur d'alerte (rougeâtre) ajustée pour un contraste approprié par rapport au fond de la page, assombrie ou éclaircie de 20 %, selon le thème, présentée sous forme de valeur hexadécimale
--theme-alert-color--rgb Couleur d'alerte (rougeâtre), ajustée pour un contraste approprié par rapport à l'arrière-plan de la page, présentée comme un groupe de valeurs Rouge, Vert, Bleu
--theme-alert-label Couleur de texte accessible à utiliser avec l'arrière-plan --theme-alert-color, présentée sous forme de valeur hexadécimale
--theme-body-background-color La couleur d'arrière-plan du corps est tirée du Concepteur de thème, présentée sous forme de valeur hexadécimale
--theme-body-background-image URL de l'image d'arrière-plan, provenant du Concepteur de thème, présentée sous forme de chaîne de caractères
--theme-body-dynamic-color-1 Couleur dynamique-1 pour le corps de la page. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-body-dynamic-color-1--rgb Composants rgb de la couleur dynamique-1 pour le corps de la page. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-body-dynamic-color-2 Couleur dynamique-2 pour le corps de la page. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-body-dynamic-color-2--rgb Composants rgb de la couleur dynamique-2 pour le corps de la page. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-body-text-color Couleur de texte accessible à utiliser avec l'arrière-plan --body-background-color, présentée sous forme de valeur hexadécimale
--theme-body-text-color--hover Couleur de texte accessible à utiliser avec l'arrière-plan --body-background-color, foncée ou éclaircie de 20 %, selon le thème, présentée sous forme de valeur hexadécimale
--theme-border-color Couleur de bordure accessible calculée sur la base de --theme-page-background-color, présentée sous forme de valeur hexadécimale
--theme-border-color--rgb Couleur de bordure accessible calculée sur la base de --theme-page-background-color, présentée sous la forme d'un groupe de valeurs Rouge, Vert, Bleu
--theme-link-color La couleur de lien provient du Concepteur de thème, présentée sous forme de valeur hexadécimale
--theme-link-color--hover Couleur de lien extraite du Concepteur de thème, assombrie ou éclaircie de 20 %, selon le thème, présentée sous forme de valeur hexadécimale
--theme-link-color--rgb Couleur de lien tirée du Concepteur de thème, présentée comme un groupe de valeurs Rouge, Vert, Bleu
--theme-link-dynamic-color-1 Couleur dynamique-1 pour les liens. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-link-dynamic-color-1--rgb Composants rgb de la couleur dynamique-1 pour les liens. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-link-dynamic-color-2 Couleur dynamique-2 pour les liens. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-link-dynamic-color-2--rgb Composants rgb de la couleur dynamique-2 pour les liens. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-link-label-color Couleur de texte accessible à utiliser avec l'arrière-plan --theme-link-color, présentée sous forme de valeur hexadécimale
--theme-message-color Couleur du message (bleuâtre), ajustée pour un contraste approprié par rapport au fond de la page, présentée sous forme de valeur hexadécimale
--theme-message-label Couleur de texte accessible à utiliser avec le fond --theme-message-color, présentée sous forme de valeur hexadécimale
--theme-page-accent-mix-color Mélange d'une couleur de fond de page et d'une couleur d'accentuation avec un ratio de 50-50
--theme-page-background-color La couleur de fond de la page (article) provient du Concepteur de thème, présentée sous forme de valeur hexadécimale
--theme-page-background-color--rgb La couleur d'arrière-plan de la page (article) provient du Concepteur de thème et se présente sous la forme d'un groupe de valeurs Rouge, Vert, Bleu
--theme-page-background-color--secondary Couleur secondaire calculée sur la base de --theme-page-background-color, légèrement mélangée à de la couleur blanche ou noire, selon le thème, présentée sous forme de valeur hexadécimale
--theme-page-dynamic-color-1 Couleur dynamique-1 pour l'arrière-plan des pages (articles). Voir la section Couleurs dynamiques pour plus d'informations.
--theme-page-dynamic-color-1--rgb Composants rgb de la couleur dynamique-1 pour l'arrière-plan des pages (articles). Voir la section Couleurs dynamiques pour plus d'informations.
--theme-page-dynamic-color-2 Couleur dynamique-2 pour l'arrière-plan des pages (articles). Voir la section Couleurs dynamiques pour plus d'informations.
--theme-page-dynamic-color-2--rgb Composants rgb de la couleur dynamique-2 pour l'arrière-plan des pages (articles). Voir la section Couleurs dynamiques pour plus d'informations.
--theme-page-text-color Couleur de texte pour une page. Alias pour --theme-page-dynamic-color-2.
--theme-page-text-color--hover Couleur du texte au survol d'une page
--theme-page-text-color--rgb Composants RVB de la couleur du texte de la page
--theme-page-text-mix-color Mélange d'une couleur d'arrière-plan et d'une couleur dynamique-2 avec un ratio de 50-50
--theme-sticky-nav-background-color Couleur de fond de la navigation épinglée. Cette couleur peut être définie dans le Concepteur de thème.
--theme-sticky-nav-dynamic-color-1 Couleur dynamique-1 pour l'arrière-plan de la navigation épinglée. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-sticky-nav-dynamic-color-1--rgb Composants rgb de la couleur dynamique-1 pour l'arrière-plan de la navigation épinglée. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-sticky-nav-dynamic-color-2 Couleur dynamique-2 pour l'arrière-plan de la navigation épinglée. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-sticky-nav-dynamic-color-2--rgb Composants rgb de la couleur dynamique-2 pour l'arrière-plan de la navigation épinglée. Voir la section Couleurs dynamiques pour plus d'informations.
--theme-sticky-nav-text-color Couleur du texte pour la navigation épinglée. Alias pour --theme-sticky-nav-dynamic-color-1
--theme-sticky-nav-text-color--hover Couleur du texte au survol d'une navigation épinglée
--theme-success-color La couleur de succès (verdâtre), ajustée pour un contraste approprié par rapport à l'arrière-plan de la page, présentée sous forme de valeur hexagonale
--theme-success-color--rgb Couleur de succès (verdâtre), ajustée pour un contraste approprié par rapport à l'arrière-plan de la page, présentée comme un groupe de valeurs Rouge, Vert, Bleu
--theme-success-label Couleur de texte accessible à utiliser avec l'arrière-plan --theme-success-color, présentée sous forme de valeur hexadécimale
--theme-warning-color Couleur d'avertissement (jaunâtre), ajustée pour un contraste approprié par rapport au fond de la page, présentée sous forme de valeur hexadécimale
--theme-warning-label Couleur de texte accessible à utiliser avec l'arrière-plan --theme-warning-color, présentée sous forme de valeur hexadécimale

Couleurs dynamiques[]

Les couleurs dynamiques sont établies sur la base de leur arrière-plan. Elles sont calculées pour atteindre le meilleur rapport de contraste possible.

  • dynamic-color-1 est noir fandom (#0E191A) pour les fonds clairs et blanc (#FFFFFF) pour les fonds sombres.
  • dynamic-color-2 est gris foncé (#3A3A3A) pour les fonds clairs et gris clair (#E6E6E6) pour les fonds sombres.

Alias de variables[]

Nom de variable Alias pour
--theme-accent-label-color --theme-accent-dynamic-color-1
--theme-body-text-color --theme-body-dynamic-color-1
--theme-link-label-color --theme-link-dynamic-color-1
--theme-page-text-color --theme-page-dynamic-color-2
--theme-sticky-nav-text-color --theme-sticky-nav-dynamic-color-1

Sélecteurs spécifique au thème[]

Vous pouvez également spécifier chaque thème pour les cas où vous avez besoin d'un comportement différent basé purement sur le choix du thème.

  • .theme-fandomdesktop-light est pour les éléments qui sont thématisés pour le thème clair.
  • .theme-fandomdesktop-dark est pour les éléments qui sont thématisés pour le thème sombre.

Plus d'aide

Advertisement