FANDOM


Vous concevez du code personnalisé pour votre communauté ou pour vous-même ? Cette page contient des informations détaillées pour vous aider dans les deux cas.

Pour un aperçu plus simple, consultez Aide:Personnalisation du CSS et JS.

Note : Le JavaScript de la communauté est activé à la demande en contactant le support de Fandom. Consultez Aide:Processus de vérification du JavaScript pour plus d'informations.

Aide-mémoire CSS et JS Modifier

Les tableaux ci-dessous résument la plupart des pages de personnalisation du CSS et du JS. Les choix les plus usuels sont surlignés en vert.

CSS
Feuille de style Emplacement Wikis concernées Utilisateurs concernés Apparences concernées
MediaWiki:Wikia.css ce wiki ce wiki tous les utilisateurs Défaut
MediaWiki:Common.css ce wiki ce wiki tous les utilisateurs dépend
MediaWiki:Chat.css ce wiki ce wiki tous les utilisateurs (Spécial:Chat)
Spécial:MaPage/common.css ce wiki ce wiki vous uniquement toutes
Spécial:MaPage/wikia.css ce wiki ce wiki vous uniquement Défaut
Spécial:MaPage/chat.css ce wiki ce wiki vous uniquement (Spécial:Chat)
w:Special:MyPage/global.css Community Central tous les wikis vous uniquement toutes
JavaScript
Fichier de script Emplacement Wikis concernés Utilisateurs concernés Apparences concernées
MediaWiki:Common.js ce wiki ce wiki tous les utilisateurs toutes
MediaWiki:Wikia.js ce wiki ce wiki tous les utilisateurs Défaut
MediaWiki:Chat.js ce wiki ce wiki tous les utilisateurs (Spécial:Chat)
Spécial:MaPage/common.js ce wiki ce wiki vous uniquement toutes
Spécial:MaPage/wikia.js ce wiki ce wiki vous uniquement Défaut
Spécial:MaPage/chat.js ce wiki ce wiki tous les utilisateurs (Spécial:Chat)
w:Special:MyPage/global.js Community Central tous les wikis vous uniquement toutes

Note : la disposition par défaut de Fandom est parfois appelée « Oasis », le nom de code original de cette mise en page, ou « Wikia » d'après le nom de la compagnie.

Vérification des erreurs de CSS et JS dans l'éditeurModifier

Lorsque l'éditeur de texte de Fandom est utilisé pour modifier le CSS ou le JS, sont activées la vérification des erreurs ("linting") et la coloration syntaxique :

  • Au fur et à mesure que vous saisissez du code, la page vous indiquera toute erreur de syntaxe trouvée
  • Veuillez noter que tout problème ne doit pas nécessairement être résolu ; la technologie du CSS (et même du JS) est en constante évolution et tous les navigateurs ne se comportent pas de la même façon : certains messages peuvent ne pas nécessiter d'action.

Problèmes courantsModifier

CSS issues
Problème Expllication
@import prevent parallel downloads, use <link> instead Les balises Link sont normalement utilisées pour importer du CSS. Toutefois, MediaWiki ne prend pas charge l'ajout de balises Link personnelles sans l'utilisation de JS, cetter erreur peut donc être ignorée.
Expected X but found Y Cela signifie que vous avez saisi une valeur incorrecte pour une propriété. Par exemple, dans 'color: truc;' truc est une valeur non valide pour la propriété color parce ce n'est pas un nom de couleur.
Use of !important !important doit être évité au maximum dans le CSS car cela rend la maintenance plus difficile et il est aussi plus difficile pour les utilisateurs de surcharger les paramètres dans leur CSS personel. La plupart du temps, utiliser le bon sélecteur vous permettra d'éviter d'utiliser !important.
Unknown property 'codename' Ben que l'outil ne reconnaisse pas tout le code CSS (comme le CSS en lui-même est une plateforme mise à jour en permanence), certains codes CSS peuvent toujours être lus quand ils sont implémentés pour un objet spécifique sur une page de Fandom (par exemple, mix-blend-mode: color-dodge;).

Notes Modifier

Appliquer du CSS à une page en particulier
En utilisant les classes CSS, vous pouvez appliquer du CSS à une page en particulier. L'élément HTML <body> des articles de Fandom inclut un identifiant unique basé sur le nom de la page. Par exemple, sur cette page d'aide, la classe est :
page-Aide_CSS_et_JS_avancés
Le format général est page-[nom article] et les espaces, les deux-points et autres caractères spéciaux sont remplacés par des tirets bas.
Il y a d'autres classes appliquées à la balise body qui vous permettent d'appliquer le code par espace de noms, et plus. La fonctionnalité « inspecter » ou « afficher la source » du navigateur vous permettra de voir ce qui est disponible.
Appliquer du JS à une page en particulier
Dans MediaWiki:Common.js, utilisez l'instruction switch pour appliquer du JavaScript sur certaines pages :
switch (mw.config.get('wgPageName')) { 
    case 'nom de page': 
        // Le JS ici sera appliqué à la page «&nbsp;nom de page&nbsp;»
        break; 
    case 'autre page': 
        // Le JS ici sera appliqué à la page «&nbsp;autre page&nbsp;»
        break; 
}
Appliquer du CSS et du JS à des wikis en particulier
Si vous préférez conserver la plupart de vos CSS personnels à une seul endroit (global.css), il existe une classe au niveau de la balise body qui vous permettra de cibler des wikis en particulier.
Elle est basée d'après le nom de la base de donnée de la communauté, et non l'URL - elle portent bien souvent le même nom, mais pas toujours. Le format est le suivant :
wiki-[nom de la base de données]

Pour le JS, wgDBname peut être utilisé pour identifier une communauté en particulier.

Ordre de chargement
En général, l'ordre de chargement sur Fandom est d'abord le code du noyau, puis le code la communauté locale, puis enfin le code personnel.
Pour chaque niveau, l'ordre de chargement est le code « common », puis le code spécifique à l'apparence.
!important dans le CSS
En raison de l'ordre de chargement du CSS, vous pouvez parfois avoir besoin d'utiliser la propriété !important pour être sûr que la règle CSS est bien appliquée. !important devrait être évité quand cela est possible par l'utilisation de sélecteurs CSS spécifiques (voire trop spécifiques).
Problèmes de cache
Chaque fichier que vous téléchargez sur Internet est mis en cache. Normalement, c'est très bien, car cela réduit le trafic à la fois pour votre propre appareil et pour les serveurs de Fandom, mais cela peut devenir un problème lorsqu'il s'agit de tester des modifications de l'apparence. Cela peut prendre quelques heures avant que les modifications prennent effet, à moins d'utiliser les astuces suivantes :
Note : Après publication, il peut être nécessaire de purger le cache pour voir les modifications.
  • Chrome - Windows : Maintenez la touche Ctrl enfoncée et appuyez sur la touche F5 ; OS X : Maintenez les touches Cmd (⌘) et Shift (⇧) enfoncées et appuyez sur la touche R.
  • Safari - Maintenez la touche Shift (⇧) enfoncée et cliquez sur le bouton « Recharger » de la barre d'outils.
  • Firefox - Windows : Maintenez la touche Ctrl enfoncée et appuyez sur la touche F5 ; OS X : Maintenez les touches Cmd (⌘) et Shift (⇧) enfoncées et appuyez sur la touche R.
  • Internet Explorer : Maintenez la touche Ctrl enfoncée et appuyez sur la touche F5 (ou cliquez sur le bouton « Actualiser »).
Il se peut que vous ayez à actualiser chaque page que vous avez ouverte récemment pour y voir les modifications.
Bouts de code JavaScript populaires
Pour avoir une idée de scripts écrits par les autres que vous pourriez trouver utiles ou que vous voudriez essayer, consultez la liste des améliorations JS sur l'Open Source Library de Fandom.
JavaScript en double
Beaucoup de scripts peuvent rencontrer des problèmes s'ils sont lancés plusieurs fois sur la même page. Assurez-vous que vous ne mettiez qu'un bout de code spécifique dans un seul de ces fichiers. Ne collez pas le même code sur plusieurs fichiers car il y a des risques de conflits et cela pourrait entraîner des erreurs pour vous ou les autres visiteurs.

Voir aussi Modifier

Plus d'aideModifier

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA  .