Wiktionnaire:Personnaliser le monobook

Beaucoup d'aspects du site peuvent être modifiés personnellement dans les pages :

Note : Le monobook était l’apparence du site par défaut il y a quelque temps ; ce n’est plus le cas aujourd’hui, où l’apparence par défaut est vector (vous pouvez visualiser cela dans l’onglet Apparence de vos préférences). Le mieux encore peut être d’ajouter toutes les personnalisations du site dans Spécial:MaPage/common.css et Spécial:MaPage/common.js, qui permettront de personnaliser le site à votre guise (selon les conseils de cette page) quelle que soit l’apparence utilisée (vector, monobook, etc.).

Voir notamment les aspects spécifiques au Wiktionnaire, permettant par exemple de ne pas voir les exposants dans les traductions (en construction).

Explications générales

En utilisant l'apparence monobook (voir préférences), vous pouvez dorénavant modifier chaque aspect de l'interface spécifiée à http://fr.wiktionary.org/style/monobook/main.css et à MediaWiki:Monobook.css en utilisant votre propre Javascript ou CSS.

Les modifications se trouvent dans deux sous-pages de votre page d'utilisateur appelées monobook.css et monobook.js. Par exemple à [[Utilisateur:Dupont/monobook.css]] pour la sous-page de l'utilisateur Dupont. Il vous suffit d'écrire quelques lignes de css/js dans cette page, et recharger/actualiser la page (CTRL-F5).

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

CSS

Classes

Les pages liste de suivi et modifications récentes utilisent deux classes : autocomment and new, liens cassés (voir le 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 and minor (pour les modifications mineures du code).

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

Échantillons

/* placer un gris léger comme couleur d'arrière-plan dans les cadres de contenu */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* pour mettre autre chose à la place du fond monobook */
body { background: Purple; }

/* changer la couleur des zones pre  */
pre { background: White }

/* changer le logo */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }

/* pas de logo, les boites sont remontées d'autant */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* supprimer l'icône à côté du nom d'utilisateur */
li#pt-userpage { background: none }

/* Rendre plus discret le lien "modifier" */
.editsection {font-size: 0.8em; color: gray}
.editsection a {color: gray; margin: 0.5em}

/* utiliser la configuration du navigateur comme préférences pour la taille du texte et la police */
body, #globalWrapper { font: inherit !important; }

/* toujours souligner les liens */
a { text-decoration: underline; }

/* changer la couleur des onglets non sélectionnés */
#p-cactions ul li a { background: #C7FDC7; }

/* changer la couleur des onglets sélectionné */
#p-cactions ul li.selected a { background: white; }

/* changer la couleur de bordure des onglets sélectionnés */
#p-cactions li.selected { border-color: #aaaaaa; }

/* styliser la boite de recherche et ses boutons */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* couleur des liens standard */
a { color: #0000FF; }
a:visited { color: #7F007F; }
a:active, a.new { color: #FF0000; }
a.interwiki, a.external { color: #3366BB; }
a.stub { color: #772233; }

/* désactiver les petits caractères de la balise <small> AJOUTÉS dans les pages */
small {font-size: 1em}

Arrondir les coins avec Mozilla

/* arrondir quelques coins, seulement possible avec mozilla/firefox/et autres navigateurs spéciaux */
#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
}
#content { 
  -moz-border-radius-topleft: 1em; 
  -moz-border-radius-bottomleft: 1em;
}
div.pBody {
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
}

/* Arrondir quelques boutons */
#wpSave, #wpSave:hover {-moz-border-radius: 1em}
#wpPreview, #wpPreview:hover {-moz-border-radius: 1em}
.searchButton, .searchButton:hover {-moz-border-radius: 1em}

/* coins arrondis pour les vignettes + effet de relief */
div.thumb div {
    border: 1px solid #999;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    -moz-border-radius: 0.6em
}

/* coins arrondis pour les zones de texte préformaté */
pre {-moz-border-radius: 0.6em}

/* coins arrondis pour les tables */
table {-moz-border-radius: 0.6em}

Règles d'impression

/*
** placer toutes les règles d'impression dans un bloc d'impression @media.
*/

/* économiser du papier en employant de toutes petites polices */
@media print {
    #footer,
    #content,
    body { font-size: 8pt !important; }
    h1 { font-size: 17pt }
    h2 { font-size: 14pt }
    h3 { font-size: 11pt }
    h4 { font-size: 9pt }
    h5 { font-size: 8pt }
    h6 { 
        font-size: 8pt;
        font-weight: normal;
    }
}

/* niveau avancé: il est possible d'utiliser :before et :after pour imprimer le href complet arpès le lien (pas nécessaire avec la version actuelle) : */
@media print {
  #content a:link:after, 
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

Transformer la barre utilisateur en boite

Testé pour fonctionner avec Camino et Safari (avec Opéra, la boîte s'insère malencontreusement derrière le logo ...)

/* transformer la barre utilisateur en boite */
#p-personal {
    position:relative;
    z-index:3;
    width: 11.6em;
}

#p-personal .pBody {
    width: 10.8em;
    border: none;
    margin: 0 0 0.5em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0.8em 0.3em .5em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0.3em 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    margin-bottom: 0.1em;
}

/* supprime l'icône à côté du nom d'utilisateur */
li#pt-userpage { background: none }

Voir le monobook main.css pour l'ensemble des styles par défaut.

Menus monobook avec polices serif dans le cadre de contenu

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

Déplacer les liens de catégorie

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)


/******************************************************************/
/* moving catlinks to the right                                   */
/******************************************************************/

/* déplace la boite du lien de catégorie */
#catlinks {  
  position:absolute;
  z-index:1;
/* border:1px solid #aaaaaa; 
  background:#fafaff; */
  right:1em; 
  top:-0.25em;
  width:10.5em;
  float:right;
  margin: 0.2em;
  padding:0.2em;
}

/* format le lien de catégorie lui-même */
p.catlinks {
  color:#aaaaaa;
  font-family:sans-serif;
  font-size:67%;
  line-height:1.5em;
  text-align:left;
  text-indent:0;
  text-transform:none;
  white-space:normal;
  margin:0.2em;
}

/* format du lien */
p.catlinks a {
  color:#888888;
}

Symboles graphiques de liens externes


/* supprimer l'affichage des symboles graphiques de lien externe */
#bodyContent a[href ^="http://"] {background: url(); padding-right: 0}
#bodyContent a[href ^="gopher://"] {background: url(); padding-right: 0}
#bodyContent a[href ^="https://"], .link-https {background: url(); padding-right: 0}
#bodyContent a[href ^="mailto:"], .link-mailto {background: url(); padding-right: 0}
#bodyContent a[href ^="news://"] {background: url(); padding-right: 0}
#bodyContent a[href ^="ftp://"], .link-ftp {background: url(); padding-right: 0}
#bodyContent a[href ^="irc://"], .link-irc {background: url(); padding-right: 0}

Notification de message plus discrète


/* Affichage plus discret de la notification de message */
.usermessage {background-color: transparent; border: 0; font-weight: normal;
margin: 0 0 1em 0; padding: 0 0 0.5em 0; border-bottom: 1px solid #999}

Arrière-plan des pages spéciales


/* Classes à modifier, pour qui ne veut pas de couleur pour les pages spéciales... */
/* .ns-6, .ns-10 et .ns-14 actuellement non modifiées dans /wiki/MediaWiki:Monobook.css */

/* Articles puis pages de discussion des articles */
.ns-0 * #content, .ns-0 * #p-cactions li, .ns-0 * #p-cactions li a {background: #ffffff}
.ns-1 * #content, .ns-1 * #p-cactions li, .ns-1 * #p-cactions li a {background: #ffffff}

/* Pages Utilisateur, puis pages de discussion Utilisateur */
.ns-2 * #content, .ns-2 * #p-cactions li, .ns-2 * #p-cactions li a {background: #ffffff}
.ns-3 * #content, .ns-3 * #p-cactions li, .ns-3 * #p-cactions li a {background: #ffffff}

/* Pages Wikipédia, puis pages de discussion Wikipédia */
.ns-4 * #content, .ns-4 * #p-cactions li, .ns-4 * #p-cactions li a {background: #ffffff}
.ns-5 * #content, .ns-5 * #p-cactions li, .ns-5 * #p-cactions li a {background: #ffffff}

/* Pages Image, puis pages de discussion Image */
.ns-6 * #content, .ns-6 * #p-cactions li, .ns-6 * #p-cactions li a {background: #ffffff}
.ns-7 * #content, .ns-7 * #p-cactions li, .ns-7 * #p-cactions li a {background: #ffffff}

/* Pages MediaWiki, puis pages de discussion MediaWiki */
.ns-8 * #content, .ns-8 * #p-cactions li, .ns-8 * #p-cactions li a {background: #ffffff}
.ns-9 * #content, .ns-9 * #p-cactions li, .ns-9 * #p-cactions li a {background: #ffffff}

/* Pages Modèle, puis pages de discussion Modèle */
.ns-10 * #content, .ns-10 * #p-cactions li, .ns-10 * #p-cactions li a {background: #ffffff}
.ns-11 * #content, .ns-11 * #p-cactions li, .ns-11 * #p-cactions li a {background: #ffffff}

/* Pages Aide, puis pages de discussion Aide */
.ns-12 * #content, .ns-12 * #p-cactions li, .ns-12 * #p-cactions li a {background: #ffffff}
.ns-13 * #content, .ns-13 * #p-cactions li, .ns-13 * #p-cactions li a {background: #ffffff}

/* Pages Catégorie, puis pages de discussion Catégorie */
.ns-14 * #content, .ns-14 * #p-cactions li, .ns-14 * #p-cactions li a {background: #ffffff}
.ns-15 * #content, .ns-15 * #p-cactions li, .ns-15 * #p-cactions li a {background: #ffffff}

Changer le logo

Remplacer <URL> par l'adresse du logo, par exemple "/upload/7/7e/Wiki_original.png" (sans ").

div#p-logo a { background-image: url(<URL>) !important; }

Mettre la première lettre de chaque paragraphe en double hauteur

/* Mettre la première lettre de chaque paragraphe en double taille */
div#bodyContent p:first-letter 
{
   font-size: 200%; 
   float: left;
}

/* Désactiver la double taille pour la ligne de catégorie et le sommaire*/
div#catlinks p:first-letter, table#toc p:first-letter 
{ 
   font-size: 100%;  
   float: none; 
}

Remplacer les boutons gris

Le code suivant permet de pouvoir configurer les boutons « Consulter », « Rechercher », « Sauvegarder » 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 leurs correspondent.

/* hide this from ie/mac and konq2.2 */
@media All {

   head:first-child+body input {
       visibility: visible;
       border: 1px solid #2f6fab;  
       color: #000000 ;
       background-color: white;
       vertical-align: middle;
       padding: 0.2em;
   }

}

Liens CSS (anglais)

Coins arrondis (anglais)

Javascript

Dans ce cas, la page à modifier est nommée monobook.js.

Changer les clés d'accès

La configuration js par défaut est à forbidden, vous pouvez la personnaliser en changeant quelques éléments de 'ta' array. Par exemple :

ta['ca-nstab-main'] = new Array('c','View the content page');

Remplacez 'c' pour modifier la clé d'accès. Pour désactiver tous les accès et tooltips, écrivez

ta = false;

dans votre monobook.js.

Déplacer les catégories vers le haut

Le code suivant déplace la boite de lien catégorie en haut de l'article. Naturellement, vous pouvez ajouter quelques lignes dans .CSS pour rendre l'apparence plus jolie :

function catsattop() {
  var cats = document.getElementById('catlinks');
  var bc = document.getElementById('bodyContent');
  bc.insertBefore(cats, bc.childNodes[0]);
}

Doublement des onglets en bas de page

1°) dans votre monobook.js

function morelinks() {
 var tabs = document.getElementById('p-cactions').cloneNode(true);
 tabs.id = 'mytabs';
 var listitems = tabs.getElementsByTagName('LI');
 for (i=0;i<listitems.length;i++) {
   if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id;
 }
 document.getElementById('column-content').appendChild(tabs);
}
if (window.addEventListener) window.addEventListener("load",morelinks,false);
else if (window.attachEvent) window.attachEvent("onload",morelinks);

2°) dans votre monobook.css

#mytabs {
   margin: -0.3em 0 0  11.5em;
   white-space:nowrap;
   line-height: 1.1em;
   overflow: visible;
   border-collapse: collapse;
   padding: 0 0 0 1em;
   list-style: none;
   font-size: 95%;
}
#mytabs .hiddenStructure { display: none; }
#mytabs li {
   display: inline;
   border: 1px solid #aaaaaa;
   border-top: none;
   padding: 0.1em 0 0 0;
   margin: 0 0.3em 0 0;
   overflow: visible;
   background: White;
}
#mytabs li.selected {
   border-color: #fabd23;
   padding: 0.2em 0 0 0;
}
#mytabs li a {
   background-color: White;
   color: #005189;
   border: none;
   padding: 0.3em 0.8em 0 0.8em;
   text-decoration: none;
   text-transform: lowercase;
   position: relative;
   margin: 0;
}
#mytabs li.selected a { z-index: 3; }
#mytabs .new a { color:#ba0000; }
#mytabs li a:hover {
   z-index: 3;
   text-decoration: none;
}
#mytabs h5 { display: none; }
#mytabs li.istalk { margin-right: 0; }
#mytabs li.istalk a { padding-right: 0.5em; }
#mytabs-ca-addsection a { 
   padding-left: 0.4em;
   padding-right: 0.4em;
}
/* offsets to distinguish the tab groups */
li#mytabs-ca-talk { margin-right: 1.6em; }
li#mytabs-ca-watch { margin-left: 1.6em; }

/* comment out if bottom tabs should be rounded as well in moz */
/* utile aux seuls utilisateurs des divers Mozilla */
/* #mytabs li, #mytabs li a { 
 -moz-border-radius-bottomleft: 1em;
 -moz-border-radius-bottomright: 1em;
}*/

Importer monobook.css/.js d'un autre Wiki

Si vous travaillez sur plusieurs Wikis, vous pouvez unifier et synchroniser vos styles et n'avoir à mettre à jour que les pages de votre compte « principal ». En admettant que le Wiktionary francophone soit le lieu où vous agissez en priorité, vous pouvez :

importer votre monobook.css depuis n'importe quel Wiki en insérant là-bas, dans le monobook.css correspondant :

@import url(http://fr.wiktionary.org/w/index.php?title=Utilisateur:Bidule/monobook.css&action=raw&ctype=text/css);

importer votre monobook.js depuis n'importe quel Wiki en insérant là-bas, dans le monobook.js correspondant :

document.write('<SCRIPT SRC="http://fr.wiktionary.org/w/wiki.phtml?title=Utilisateur:Bidule/monobook.js&action=raw&ctype=text/javascript"><\/SCRIPT>');

"Bidule" étant à remplacer par votre nom d'utilisateur. En n'oubliant pas, le cas échéant, de transformer les caractères accentués et en remplaçant les espaces de votre nom d'utilisateur par _ (underscore).

Sommaire moins encombrant

Voir w:Wikipédia:Personnaliser monobook#Sommaire moins encombrant

Enlever les numéros dans le sommaire

/* Suppression des numéros dans le sommaire (sauf langue) */
.ns-0 .toclevel-2 span.tocnumber { display:none;}
.ns-0 .toclevel-3 span.tocnumber { display:none;}
.ns-0 .toclevel-4 span.tocnumber { display:none;}
.ns-0 .toclevel-5 span.tocnumber { display:none;}

Ou pour tous les enlever :

/* Suppression des numéros dans le sommaire */
.ns-0 span.tocnumber { display:none;}

Pas de sommaire

Il faut ajouter dans Utilisateur:Toto/monobook.css :

#toc {display:none}

Quelques liens utiles

CSS