Voir la source de Aide:Personnaliser l'interface

{{En-tête Aide
| titre = 
| arianelien =Gérer
| ariane =Gérer votre compte
| arianelien2 =
| ariane2 =
| voiravant = 
| descriptif =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 : 
* ''[[Spécial:Mypage/common.css|Utilisateur:{{Param|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 : 
* ''[[Spécial:Mypage/common.js|Utilisateur:{{Param|votre_pseudo}}/common.js]]''
* [[Spécial:Mypage/vector.js]]
* [[Spécial:Mypage/timeless.js]]
* [[Spécial:Mypage/minerva.js]]
| voiraussi = 
| techno =
| technolien =
| statut =enregistré
| difficulté =avancé
| avertissement =
| raccourci =
}}
{{Palette Personnaliser l'interface}}

== À qui s'adresse cette page ? ==
[[Fichier:Article avec CSS personnalisé (2016-01-29 14h46).png|vignette|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édia:Wikipédiens|wikipédiens]] qui passent du temps à faire de la [[Projet:Maintenance|maintenance]] des articles, mais aussi ceux qui ont des contraintes particulières d'[[accessibilité]].

== À quoi servent les pages de personnalisation ? ==

Le fait de [[Aide:Compte utilisateur|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 [[Langage de script|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 '''[[Spécial:Mypage/common.css|Utilisateur:{{Param|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 :

<syntaxhighlight lang="css">
/* 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 */
</syntaxhighlight>

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 [[Spécial:MyPage/minerva.css|/minerva.css]].
 
On peut par exemple personnaliser l'apparence des boutons sur mobile :
 
<syntaxhighlight lang="css">
.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;
}
</syntaxhighlight>

== Personnaliser les scripts avec Javascript ==

{{Article détaillé|Projet:Scripts et gadgets}}
De même que pour les CSS, il vous faut d'abord créer une sous-page de la forme '''[[Spécial:Mypage/common.js|Utilisateur:{{Param|votre_pseudo}}/common.js]]'''. Le nom de la sous-page « common.js » ne prend pas de majuscule. Vous pouvez ensuite insérer des [[Langage de script|scripts]] pré-existants du '''[[Projet:Scripts et gadgets]]''' en marquant dans votre common(.js) :
<syntaxhighlight lang="javascript">
 obtenir('NomDuScript');
</syntaxhighlight>
ou créer vos propres scripts en [[JavaScript]] (et si vous voulez utiliser [[Document Object Model|DOM]] ou [[Ajax (informatique)|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 :
{{Cadre code|Ajouter un lien dans le menu de gauche|
<syntaxhighlight lang="javascript">
mw.loader.using( 'mediawiki.util', function () {
    $( function () {
        mw.util.addPortletLink( 'p-tb', '/wiki/Aide:Bac_à_sable', 'Bac à sable' );
    } );
} );
</syntaxhighlight>
}}
Cela fonctionne pour les autres sections du menu de gauche, ainsi que pour la barre personnelle et le menu « Plus ▾ ». Il faut remplacer <code>'p-tb'</code> par :
* <code>'p-personal'</code> : 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, <code>mw.util.addPortletLink( 'p-personal', '/wiki/Aide:Bac_à_sable', 'Bac à sable', null, null, null, '#pt-preferences' )</code> ajoutera le lien juste avant « Préférences ».
* <code>'p-cactions'</code> : menu « Plus ▾ » avec l'habillage par défaut (Vector) ou barre d'onglets avec l'habillage Monobook
* <code>'p-navigation'</code> : pour la section ''Navigation'' du menu
* <code>'p-Contribuer'</code> : pour la section ''Contribuer'' du menu
* <code>'p-search'</code> : pour la section ''Rechercher'' du menu
* <code>'p-lang'</code> : 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 :
{{Cadre code|Ajouter une boîte avec l'habillage par défaut Vector|
<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>
}}

{{Cadre code|Ajouter une boîte avec l'habillage Monobook|
<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>
}}

Ce script ajoute une nouvelle « Boîte perso » à votre gauche. (Merci à [[Utilisateur:FredB|FredB]]. Inspiré du monobook de [[Utilisateur:FoeNyx|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 [[Aide:Syntaxe#Commentaire invisible|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.
{{Cadre code|Ajouter un bouton|
<syntaxhighlight lang="javascript">
$( 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.
                    }
                }
            }
        }
    } );
} );
</syntaxhighlight>
}}
Cet exemple est issu de la [[mw:Extension:WikiEditor/Toolbar customization|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 : [[Fichier:Button_bold.png|23px|link=]][[Fichier:Button_italic.png|23px|link=]][[Fichier:Button_underline.png|23px|link=]].
{{Cadre code|Ajouter un bouton|
<syntaxhighlight lang="javascript">
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)
        );
    });
}
</syntaxhighlight>
}}

==== 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 [[Spécial:Ma page/vector.js|vector.js]] ou votre [[Spécial:Ma page/common.js|common.js]] :<syntaxhighlight lang="javascript">
obtenir('OldSearchBox');
</syntaxhighlight>

== Pages de personnalisation globales ==
{{Article connexe|meta:Global user pages/fr{{!}}Pages d’utilisateur 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 <code>mw.loader.load</code>. Par exemple, pour activer le gadget OngletPurge sur tous les wikis, ajoutez le code suivant dans votre page [[meta:Special:MyPage/global.js|global.js]] :
<syntaxhighlight lang="javascript">
mw.loader.load('//fr.wikipedia.org/w/index.php?title=MediaWiki:Gadget-OngletPurge.js&action=raw&ctype=text/javascript');
</syntaxhighlight>

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.
* [[Projet:Charte graphique/Minerva|Personnalisation de l'interface mobile Minerva]]

[[Catégorie:Aide:Personnaliser l'interface| ]]