Aide:Personnaliser l'interface

Aide de Wikipédia Gérer votre compte

Vous devez avoir un compte et y être connecté pour faire cette action.

Niveau avancé

En plus des choix possibles dans vos préférences (Aide:Préférences), et notamment des gadgets disponibles (Aide:Gadgets), chaque utilisateur enregistré dispose de pages permettant de personnaliser l'apparence des pages de Wikipédia et d'ajouter des outils pour faciliter l'interaction avec Wikipédia.

L'utilisateur peut personnaliser sa CSS avec les pages :

• Utilisateur:votre_pseudo/common.css
• Spécial:Mypage/vector.css
• Spécial:Mypage/timeless.css
• Spécial:Mypage/minerva.css.

Il peut aussi ajouter des scripts Javascript à travers les pages :

• Utilisateur:votre_pseudo/common.js
• Spécial:Mypage/vector.js
• Spécial:Mypage/timeless.js
• Spécial:Mypage/minerva.js

Personnaliser l'interface

Données clés

Aide • Exemples

Fonctions avancées

Apparence Vector

Apparence Timeless

Projet:Scripts et gadgets

(en) User styles

CSS

common.css personnel

Common.css commun

Monobook.css commun

Vector.css commun

(en) Catalogue of classes

Index des propriétés CSS2

JavaScript

common.js personnel

Common.js commun

Fonctions JavaScript

Cliquez ici pour purger le cache

À qui s'adresse cette page ?

Exemple d'apparence personnalisée

Ces fonctionnalités sont destinées aux utilisateurs voulant naviguer plus facilement au sein des pages, optimiser la recherche de contenu sur les différents projets Wikimedia, ou encore effectuant des tâches particulières et répétitives. C'est notamment le cas des wikipédiens qui passent du temps à faire de la maintenance des articles, mais aussi ceux qui ont des contraintes particulières d'accessibilité.

À quoi servent les pages de personnalisation ?

Le fait de créer un compte vous donne accès à de nouvelles fonctionnalités prévues par le logiciel MediaWiki (voir Aide:Préférences utilisateur), qui seront appliquées à chaque page, y compris ces pages de personnalisation.

Ainsi, vous pouvez par exemple ajouter dans votre sous page Utilisateur:MonIdentifiant/common.js les codes wiki ou HTML pré-écrits que vous avez choisis. Si vous utilisez souvent des formules mathématiques complexes, vous pouvez ainsi les ajouter sans avoir à les taper à chaque fois. Bref, common.js simplifie votre activité avec les scripts et vous permet (par exemple) d'adapter les couleurs de diverses parties des pages à votre goût.

Ces personnalisations modifient partiellement celles définies par les administrateurs pour tous les utilisateurs dans MediaWiki:Common.css pour l'apparence, ainsi que MediaWiki:Common.js pour les scripts.

Personnaliser l'apparence avec les CSS

Créez d'abord une sous-page de la forme Utilisateur:votre_pseudo/common.css. Le nom de la sous-page « common.css » ne prend pas de majuscule. Ensuite, pour personnaliser l'apparence, il vous faut connaître les rudiments des feuilles de style en cascade (CSS) et/ou prendre exemple sur MediaWiki:Common.css ou les common.css des autres utilisateurs. Vous pouvez consulter Aide:Personnaliser l'interface/Exemples#CSS, également.

Voici quelques exemples :

/* Changer la couleur de fond des articles */
.ns-0 * #content, .ns-0 * #p-cactions li, .ns-0 * #p-cactions li a {
    background:#FFEEEE; /* couleur rose comme les pages de discussion */
}
/* Afficher les liens déjà visités en vert */
a:visited {
    color:green;
}
.ns-0 #content { text-align: justify; } /* texte justifié dans les articles */

Vous pouvez prévisualiser (c'est d'ailleurs conseillé) l'apparence ainsi définie. Une fois satisfait, vous enregistrez, et devez recharger le cache (Mozilla / Konqueror / Firefox : Shift-Ctrl-R, IE / Opera : Ctrl-F5, Safari : Cmd-R) pour que les changements deviennent effectifs.

On peut choisir l'interface que l'on veut personnaliser. Par exemple, pour personnaliser l'interface mobile, on peut créer le script /minerva.css.

On peut par exemple personnaliser l'apparence des boutons sur mobile :

.mw-revision, .mw-ui-button {
background: #FFFFFF;
box-shadow: 0 0 0.2em #999999;
border-radius: 0.2em;
margin: 0.5em 0.5em 1em 0.5em;
}

Personnaliser les scripts avec Javascript

De même que pour les CSS, il vous faut d'abord créer une sous-page de la forme Utilisateur:votre_pseudo/common.js. Le nom de la sous-page « common.js » ne prend pas de majuscule. Vous pouvez ensuite insérer des scripts pré-existants du Projet:Scripts et gadgets en marquant dans votre common(.js) :

 obtenir('NomDuScript');

ou créer vos propres scripts en JavaScript (et si vous voulez utiliser DOM ou AJAX ou autre), ou reprendre et personnaliser certains scripts.

Vous pouvez prévisualiser (c'est d'ailleurs conseillé) le résultat des scripts et ainsi voir s'il fonctionnent bien sur votre ordinateur. Quand vous avez fini, vous enregistrez, et devez recharger le cache (Mozilla / Konqueror / Firefox : Shift-Ctrl-R, IE / Opera : Ctrl-F5, Safari : Cmd-R) pour que les changements deviennent effectifs.

Note : avant la création du Projet:Scripts et gadgets, les scripts étaient éparpillés un peu partout, entre autres Aide:Personnaliser monobook, Aide:Monobook/Fonctions avancées, ainsi que des sous-pages utilisateurs.

Quelques opérations simples

Voici une liste de fonctions de base qui peuvent servir à élaborer des fonctions plus complexes.

Ajouter un lien dans le menu ou la barre personnelle

Que dois-je ajouter dans ma page common.js pour créer un lien vers Aide:Bac à sable dans la section « Outils » du menu de gauche ?

Réponse :

Code : Ajouter un lien dans le menu de gauche

mw.loader.using( 'mediawiki.util', function () {
    $( function () {
        mw.util.addPortletLink( 'p-tb', '/wiki/Aide:Bac_à_sable', 'Bac à sable' );
    } );
} );

Cela fonctionne pour les autres sections du menu de gauche, ainsi que pour la barre personnelle et le menu « Plus ▾ ». Il faut remplacer 'p-tb' par :

• 'p-personal' : barre utilisateur en haut à droite. Par défaut, le lien est placé en dernier après « Se déconnecter », ce qui est peu pratique. Le septième paramètre de addPortletLink permet de l'insérer ailleurs. Par exemple, mw.util.addPortletLink( 'p-personal', '/wiki/Aide:Bac_à_sable', 'Bac à sable', null, null, null, '#pt-preferences' ) ajoutera le lien juste avant « Préférences ».
• 'p-cactions' : menu « Plus ▾ » avec l'habillage par défaut (Vector) ou barre d'onglets avec l'habillage Monobook
• 'p-navigation' : pour la section Navigation du menu
• 'p-Contribuer' : pour la section Contribuer du menu
• 'p-search' : pour la section Rechercher du menu
• 'p-lang' : pour la section Autres langues du menu

Ajouter une boîte de liens à gauche

Que dois-je ajouter dans ma page common.js pour me retrouver avec le lien Wikipédia:Le Bistro dans la boîte de liens ?

Réponse :

Code : Ajouter une boîte avec l'habillage par défaut Vector

function nouvelleBoite() {
    $('#mw-panel').append(
        '<div class="portal" id="p-boite-perso">' +
        ' <h3>Boîte perso</h3>' +
        ' <div class="body">' +
        '   <ul>' +
        '     <li><a href="//fr.wiki.x.io/wiki/Wikipédia:Le_Bistro">Le Bistro</a></li>' +
        '   </ul>' +
        ' </div>' +
        '</div>');
}
$(nouvelleBoite);

Code : Ajouter une boîte avec l'habillage Monobook

function nouvelleBoite() {
    $('#column-one').append(
        '<div class="portlet" id="p-boite-perso">' +
        ' <h3>Boîte perso</h3>' +
        ' <div class="pBody">' +
        '   <ul>' +
        '     <li><a href="//fr.wiki.x.io/wiki/Wikipédia:Le_Bistro">Le Bistro</a></li>' +
        '   </ul>' +
        ' </div>' +
        '</div>');
}
$(nouvelleBoite);

Ce script ajoute une nouvelle « Boîte perso » à votre gauche. (Merci à FredB. Inspiré du monobook de FoeNyx)

Ajouter des boutons à ma barre de modifications

Voir aussi Aide:Barre d'outils d'édition.

Que dois-je ajouter à ma page common.js pour ajouter dans ma barre de modifications un bouton supplémentaire ? Voici un exemple qui crée un bouton pour insérer des commentaires.

Barre d'outils améliorée

Utilisez cette version si l'option « Activer la barre d’outils améliorée » est cochée dans vos préférences (c'est le cas par défaut). Le bouton ainsi créé est accessible en déroulant la section « Avancé » de la barre d'outils.

Code : Ajouter un bouton

$( function () {
    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
        'section': 'advanced',
        'group': 'insert',
        'tools': {
            buttonId: {
                label: 'Insérer un commentaire',             // Infobulle
                type: 'button',
                icon: '//up.wiki.x.io/wikipedia/commons/thumb/a/ae/Emoji_u1f516.svg/26px-Emoji_u1f516.svg.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: '<!--',                         // Texte inséré avant le curseur.
                        peri: 'Insérez un commentaire ici',  // Texte à remplacer.
                        post: '-->'                          // Texte inséré après le curseur.
                    }
                }
            }
        }
    } );
} );

Cet exemple est issu de la documentation de l'extension WikiEditor, qui indique également comment créer d'autres sections dans la barre d'outils.

Barre d'outils classique

Utilisez cette version si les boutons de votre barre d'outils ont l'aspect suivant : .

Code : Ajouter un bouton

if (['edit', 'submit'].includes(mw.config.get('wgAction'))) {
    mw.loader.using('ext.gadget.MonobookToolbar', function () {
        MonobookToolbar.addButton(
            "//up.wiki.x.io/wikipedia/commons/thumb/a/ae/Emoji_u1f516.svg/26px-Emoji_u1f516.svg.png",
            "Insérer un commentaire",      // Infobulle
            "<!--",                        // Texte inséré avant le curseur
            "-->",                         // Texte inséré après le curseur
            "Insérez un commentaire ici",  // Texte à remplacer
            "bouton-inserer-commentaire"   // Nom de bouton (texte arbitraire)
        );
    });
}

Obtenir l'ancien champ de recherche

Il est possible de revenir à l'ancien champ de recherche, avec un bouton « Lire » pour rechercher directement un article et un bouton « Rechercher » pour effectuer une recherche par mot-clé, en ajoutant le code suivant dans votre vector.js ou votre common.js :

obtenir('OldSearchBox');

Pages de personnalisation globales

Si vous contribuez à plusieurs éditions linguistiques de Wikipédia ou à d'autres projets (Wiktionnaire, Wikisource...), vous pouvez placer vos feuilles de style et scripts sur Meta-Wiki afin qu'ils soient chargés sur tous les wikis de Wikimedia Foundation :

• meta:Special:MyPage/global.css pour le CSS ;
• meta:Special:MyPage/global.js pour le JavaScript.

Sur ces pages globales, vous pouvez importer un gadget de n'importe quel wiki à l'aide de mw.loader.load. Par exemple, pour activer le gadget OngletPurge sur tous les wikis, ajoutez le code suivant dans votre page global.js :

mw.loader.load('//fr.wiki.x.io/w/index.php?title=MediaWiki:Gadget-OngletPurge.js&action=raw&ctype=text/javascript');

Cependant, il n'est pas garanti que tous les gadgets disponibles sur un wiki donné fonctionnent sur d'autres wikis.

Voir aussi

• Si vous souhaitez avoir l'interface de Wikipédia avec textes blancs sur fond noir, les extension de navigateur suivantes peuvent être utilisées :
  • Dark Mode pour Opera
  • Dark Reader pour Google Chrome et Mozilla Firefox

• Projet:JavaScript/Liste des fonctions disponibles : fonctions JavaScript à ajouter au common.js.
• Aide:Personnaliser l'interface/Exemples : exemples de code pour common.css.
• Personnalisation de l'interface mobile Minerva