Aide:Personnaliser l'interface/Exemples

Une page de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
Monobook icon.svg
Personnaliser l'interface
Aide AideExemples
Aide Fonctions avancées
Aide Apparence vector
Wikimedia (en) User styles
CSS
page perso. common.css personnel
espace MediaWiki common.css
espace MediaWiki monobook.css commun
espace MediaWiki vector.css commun
(en) Catalogue of classes
Index des propriétés CSS2
JavaScript
page perso. common.js personnel
MediaWiki common.js commun
Projet Projet:JavaScript
Catégories Fonctions JavaScript
Cliquez ici pour purger le cache

Vous pouvez modifier chaque aspect de l'interface en utilisant votre propre JavaScript (JS) ou CSS. Cette page donne des exemples de personnalisation.

Les modifications se placent dans deux sous-pages de votre page d'utilisateur :

Il vous suffit d'écrire quelques lignes de CSS/JS dans ces pages dédiées, sauvegarder puis de recharger/actualiser le cache pour que cela prenne effet. Pour cela selon le navigateur web, cliquer simultanément sur une combinaison de touches (Mozilla / Konqueror / Firefox : Shift-Ctrl-R ; IE / Opera : Ctrl-F5, Safari : Cmd-R).

Le contenu de ces pages est visible par les autres utilisateurs, mais modifiable seulement par l'utilisateur titulaire du compte et les administrateurs.

CSS[modifier | modifier le code]

Le fichier à modifier est common.css.

Classes[modifier | modifier le code]

Les pages liste de suivi et modifications récentes utilisent deux classes : autocomment et new, liens cassés (voir le code source HTML de ces pages). Cela permet de spécifier des polices et des couleurs séparées pour chaque classe.

La page historique utilise les classes : autocomment, user et minor (pour les modifications mineures du code).

Dès lors la police spécifiée pour user s'appliquera à la page historique mais pas à liste de suivi et modifications récentes.

Échantillons[modifier | modifier le code]

Arrondir les coins[modifier | modifier le code]

Pour le skin monobook. Internet Explorer n'est compatible qu'à partir de la version 9.

Numéroter automatiquement les titres et sous-titres des articles[modifier | modifier le code]

Note : Fonction disponible dans "Préférences" / "préférences diverses" / "Afficher la numérotation des titres".

Menus monobook avec polices serif dans le cadre de contenu[modifier | modifier le code]

Tillwe (utilisateur sur w:en) a fait des essais de menus monobook avec des polices serif à en:User:Tillwe/monobook.css dont vous pouvez copier la première partie pour tester.

Déplacer les liens de catégorie[modifier | modifier le code]

Déplace les liens de catégorie dans le coin supérieur droit du cadre de contenu avec un fond gris -- Tillwe 21:22, 31 May 2004 (UTC)

Arrière-plan des pages spéciales[modifier | modifier le code]

Pas de couleur verte pour signaler les redirections[modifier | modifier le code]

Remplacer les boutons gris[modifier | modifier le code]

Le code suivant permet de pouvoir configurer les boutons « Consulter », « Rechercher », « Publier » et « Prévisualisation » (afin de récupérer, par exemple, les boutons blancs à bord bleu apparus avec MediaWiki 1.4 et disparus quelques mois plus tard), mais aussi les boîtes de saisie « recherche » et « résumé de modification », moyennant divers réglages sur les classes ou identificateurs qui leur correspondent.

Indentations sur fond jaune des pages de discussion[modifier | modifier le code]

Ne concerne que le Wikipédia francophone. Le code suivant permet de faire disparaître, sur les pages de discussion (Discuter, Discussion, + Le Bistro et sous-pages) le fond jaune des discussions indentées, ainsi que les lignes de bordure qui les accompagnent.

Centrer et changer la police des catégories[modifier | modifier le code]

Code pour changer l'alignement (center ou right) et la police des catégories.

Ici, l'alignement est centré et la police est Tahoma.

Modifier la police...[modifier | modifier le code]

Remplacer Comic Sans MS par la police voulue.

des titres des articles[modifier | modifier le code]

des boutons rechercher et consulter[modifier | modifier le code]

Mettre la liste des langues dans une boîte déroulante[modifier | modifier le code]

Pas de sommaire[modifier | modifier le code]

#toc {display:none}

Supprimer les bandeaux de série[modifier | modifier le code]

Pour les bandeaux verticaux (latéraux)

.WSerieV {display:none}

Pour les bandeaux horizontaux

.WSerieH {display:none}

Modifier {{article détaillé}}[modifier | modifier le code]

Ce code permet d'épurer l'apparence du modèle {{article détaillé}}, pour le faire ressembler à :

Article détaillé : Pissenlit.

ou encore simplement :

Article détaillé : Pissenlit.

Ceci affecte également les modèles {{Article connexe}}, {{Aide détaillée}} et {{Article principal}}. La manipulation est similaire pour la classe principal, utilisée par ce dernier.

Javascript[modifier | modifier le code]

Dans ce cas, la page à modifier est common.js. Pour une liste des fonctions les plus avancées consultez Aide:Personnaliser l'interface/Fonctions avancées.

Simple hyperlien[modifier | modifier le code]

Pour rajouter un raccourci dans votre boîte Outils personnelle du menu de gauche, utiliser la fonction suivante (l'exemple pointe vers le CNRTL) :

addOnloadHook(function() { addPortletLink('p-tb', 'http://www.cnrtl.fr/etymologie/', 'CNRTL', 'lien vers CNRTL');});

Optimisation de la barre de navigation[modifier | modifier le code]

Ajouter un bouton de recherche wikipédia + onglet Google[modifier | modifier le code]

En plus de l'onglet Google ce morceau de script ajoute un lien pour rechercher l'article dans n'importe quel wikipédia ainsi que dans commons (écrit com, common ou commons) et meta (marche aussi avec l'accent). Tapez le nom du wiki (ex: en, it, commons, meta) et cliquez sur le lien. Par défaut la recherche se fait dans en.wikipedia.org, pour le modifier il faut changer var whichWiki = "en" en ce que l'on veut.
Note: à présent on peut aussi rechercher pendant que l'on modifie l'article (le nom est retrouvé).

[Dernière modification le 27 novembre 2005 à 01:30 (CET) par GôTô ¬¬]

Personnaliser les caractères spéciaux[modifier | modifier le code]

Ajouter un lien au menu utilisateur (en haut à droite)[modifier | modifier le code]

Copier/coller le code dans common.js puis modifier:

  • nom de la page par l'adresse de la page souhaitée
  • Titre du lien par le titre souhaité

Quelques liens utiles[modifier | modifier le code]

CSS[modifier | modifier le code]

Coins arrondis (anglais)[modifier | modifier le code]

JavaScript[modifier | modifier le code]