Aide:Personnaliser l'interface
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 :
Aide • Exemples |
Fonctions avancées |
Apparence Vector |
Apparence Timeless |
Projet:Scripts et gadgets |
(en) User styles |
common.css personnel |
Common.css commun |
Monobook.css commun |
Vector.css commun |
(en) Catalogue of classes |
Index des propriétés CSS2 |
common.js personnel |
Common.js commun |
Fonctions JavaScript |
À qui s'adresse cette page ?
modifierCes 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 ?
modifierLe 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
modifierCré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
modifierDe 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
modifierVoici une liste de fonctions de base qui peuvent servir à élaborer des fonctions plus complexes.
Ajouter un lien dans le menu ou la barre personnelle
modifierQue 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
Ajouter une boîte de liens à gauche
modifierQue 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)
Ajouter des boutons à ma barre de modifications
modifierVoir 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
modifierUtilisez 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.
Barre d'outils classique
modifierUtilisez 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)
);
});
}
Obtenir l'ancien champ de recherche
modifierIl 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
modifierSi 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.
Voir aussi
modifier- 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