Aide:Personnaliser l'interface

Aide de Wikipédia Gérer votre compte

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

modifier

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é.

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.

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;
}

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.

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

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 :

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

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 :

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.wikipedia.org/wiki/Wikipédia:Le_Bistro">Le Bistro</a></li>' +
        '   </ul>' +
        ' </div>' +
        '</div>');
}
$(nouvelleBoite);

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.wikipedia.org/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)

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.

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.

$( function () {
    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
        'section': 'advanced',
        'group': 'insert',
        'tools': {
            buttonId: {
                label: 'Insérer un commentaire',             // Infobulle
                type: 'button',
                icon: '//upload.wikimedia.org/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.

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

if (['edit', 'submit'].includes(mw.config.get('wgAction'))) {
    mw.loader.using('ext.gadget.MonobookToolbar', function () {
        MonobookToolbar.addButton(
            "//upload.wikimedia.org/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)
        );
    });
}

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');

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.wikipedia.org/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.

• 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