Aide:Personnaliser monobook

Une nouvelle de Wikinews, la source d'informations que vous pouvez écrire.

Le monobook est l'apparence par défaut employée dans les projets de la Wikimedia Foundation, et donc dans Wikinews. Les utilisateurs enregistrés peuvent, par ailleurs, opter pour six autres apparences dans leurs préférences utilisateur.

La typographie exacte du nom est « MonoBook », mais le nom est employé sans la moindre lettre capitale dans les URL.

Outre la modification de l'apparence, via une feuille de style dédiée (Special:Mypage/monobook.css), l'utilisateur enregistré peut faire appel, pour son seul usage, à des outils en JavaScript (Special:Mypage/monobook.js).

Les modifications se trouvent dans deux sous-pages utilisateur appelées monobook.css et monobook.js. Par exemple, pour une utilisateur ZZZ :

  • dans [[Utilisateur:ZZZ/monobook.css]] (feuilel de style)
  • dans [[Utilisateur:ZZZ/monobook.js]] (JavaScript).

Il vous suffit d'écrire quelques lignes de css/js dans chacune de ces pages (indépendantes l'une de l'autre, même si elles peuvent, dans certains cas spécifique, avoir une interaction), puis de recharger chacune d'entre elles dans le cache, avec les touches 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).

Couleur de fond des espaces de noms[modifier | modifier le wikicode]

Copier l'ensemble du contenu ci-dessous, en commençant par la ligne d'ouverture de commentaire /* jusqu'à la ligne de fermeture de commentaire */ et coller dans votre page monobook.css, puis recharger la page contenant la feuille de style, avec les touches Ctrl-F5.
/*
== Couleur de fond des espaces de noms ==

<source lang="css"> */

/* les nombre impairs représentent les espaces de discussion */
   '0' : '(principal)', '1' : 'Discuter'
   '2' : 'Utilisateur', '3' : 'Discussion Utilisateur'
   '4' : 'Wikinews',    '5' : 'Discussion Wikinews'
   '6' : 'Image',       '7' : 'Discussion Image'
   '8' : 'MediaWiki',   '9' : 'Discussion MediaWiki'
  '10' : 'Modèle',     '11' : 'Discussion Modèle'
  '12' : 'Aide',       '13' : 'Discussion Aide'
  '14' : 'Catégorie',  '15' : 'Discussion Catégorie'
 '102' : 'Transwiki', '103' : 'Discussion Transwiki'
 '104' : 'Page',      '105' : 'Discussion Page'
 '106' : 'Dossier',   '107' : 'Discussion Dossier'

/* Couleur par défaut */
#content                 { background : #F8FCFF; }  /* bleu ciel */
#p-cactions li           { background : #F8FCFF; }
#p-cactions li a         { background : #F8FCFF; }

/* Couleur de fond des articles */
.ns-0 * #content         { background : white; }
.ns-0 * #p-cactions li   { background : white; }
.ns-0 * #p-cactions li a { background : white; }

/* Couleur de fond des pages de discussion des articles */
.ns-1 * #content         { background : #FFFFEE; }
.ns-1 * #p-cactions li   { background : #FFFFEE; }
.ns-1 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond des pages Utilisateur */
.ns-2 * #content         { background : white; }
.ns-2 * #p-cactions li   { background : white; }
.ns-2 * #p-cactions li a { background : white; }

/* Couleur de fond des pages de discussion Utilisateur */
.ns-3 * #content         { background : #FFFFEE; }
.ns-3 * #p-cactions li   { background : #FFFFEE; }
.ns-3 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond pages Wikipédia  */
.ns-4 * #content         { background : #F4F4F4; }
.ns-4 * #p-cactions li   { background : #F4F4F4; }
.ns-4 * #p-cactions li a { background : #F4F4F4; }

/* Couleur de fond des pages de discussion Wikipédia */
.ns-5 * #content         { background : #FFFFEE; }
.ns-5 * #p-cactions li   { background : #FFFFEE; }
.ns-5 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond des pages Image */
.ns-6 * #content         { background : white; }
.ns-6 * #p-cactions li   { background : white; }
.ns-6 * #p-cactions li a { background : white; }

/* Couleur de fond des pages de discussion Image */
.ns-7 * #content         { background : #FFFFEE; }
.ns-7 * #p-cactions li   { background : #FFFFEE; }
.ns-7 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond pages MediaWiki  */
.ns-8 * #content         { background : #EEEEFF; }
.ns-8 * #p-cactions li   { background : #EEEEFF; }
.ns-8 * #p-cactions li a { background : #EEEEFF; }

/* Couleur de fond des pages de discussion MediaWiki */
.ns-9 * #content         { background : #FFFFEE; }
.ns-9 * #p-cactions li   { background : #FFFFEE; }
.ns-9 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond des pages Modèle */
.ns-10 * #content         { background : white }
.ns-10 * #p-cactions li   { background : white }
.ns-10 * #p-cactions li a { background : white }

/* Couleur de fond des pages de discussion Modèle */
.ns-11 * #content         { background : #FFFFEE; }
.ns-11 * #p-cactions li   { background : #FFFFEE; }
.ns-11 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond des pages Aide */
.ns-12 * #content         { background : #FFEEEE; }
.ns-12 * #p-cactions li   { background : #FFEEEE; }
.ns-12 * #p-cactions li a { background : #FFEEEE; }

/* Couleur de fond des pages de discussion Aide */
.ns-13 * #content         { background : #FFEEEE; }
.ns-13 * #p-cactions li   { background : #FFEEEE; }
.ns-13 * #p-cactions li a { background : #FFEEEE; }

/* Couleur de fond des pages Catégorie */
.ns-14 * #content         { background : white; }
.ns-14 * #p-cactions li   { background : white; }
.ns-14 * #p-cactions li a { background : white; }

/* Couleur de fond des pages de discussion Catégorie */
.ns-15 * #content         { background : #FFFFEE; }
.ns-15 * #p-cactions li   { background : #FFFFEE; }
.ns-15 * #p-cactions li a { background : #FFFFEE; }

/* Couleur de fond des pages Transwiki */
.ns-102 * #content         { background : #EEFFEE; }
.ns-102 * #p-cactions li   { background : #EEFFEE; }
.ns-102 * #p-cactions li a { background : #EEFFEE; }

/* Couleur de fond des pages Discussion Transwiki */
.ns-103 * #content         { background : #F5FFEE; }
.ns-103 * #p-cactions li   { background : #F5FFEE; }
.ns-103 * #p-cactions li a { background : #F5FFEE; }

/*</source> */

Quelques coins arrondis[modifier | modifier le wikicode]

Copier l'ensemble du contenu ci-dessous, en commençant par la ligne d'ouverture de commentaire /* jusqu'à la ligne de fermeture de commentaire */ et coller dans votre page monobook.css, puis recharger la page contenant la feuille de style, avec les touches Ctrl-F5.
/*
== Quelques coins arrondis ==

<source lang="css"> */
/* Fenêtres arrondies (pour les navigateurs moz/firefox/gecko) */
/* Ces réglages, qui ne nuisent nullement à la navigation, provoquent toutefois */
/* des erreursavec les outils de validation du W3V (World Wide Web Consortium) */

.pBody {
   padding: 0.3em 0.1em;
   -moz-border-radius-topright: 0.5em;
}
.portlet h5 {
   background-color: #e0e3e6;
   border: thin solid silver;
   -moz-border-radius-topright: 0.5em;
}
#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topright: 0.5em;
  -moz-border-radius-topleft: 0.5em;
}
/*</source> */

Doublement des onglets en bas de page[modifier | modifier le wikicode]

1°) dans votre monobook.js (sous-page du type Utilisateur:ZZZ/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 (sous-page du type Utilisateur:ZZZ/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 projet Wikimedia[modifier | modifier le wikicode]

Si vous travaillez sur plusieurs projets Wikimedia (Wikiquote, Wikipédia, Wiktionnaire, etc.) vous pouvez unifier et synchroniser vos styles et n'avoir à mettre à jour que les pages de votre compte « principal ». En admettant que le Wikinews francophone soit le lieu où vous agissez en priorité, vous pouvez :

  • importer votre monobook.css depuis n'importe quel autre Wikinews en insérant là-bas, dans le monobook.css correspondant :
@import url(http://fr.wikinews.org/w/index.php?title=Utilisateur:Bidule/monobook.css&action=raw&ctype=text/css);
  • importer votre monobook.js depuis n'importe quel autre Wikinews en insérant là-bas, dans le monobook.js correspondant :
document.write('<SCRIPT SRC="http://fr.wikinews.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).

Quelques astuces CSS[modifier | modifier le wikicode]

Remplacer les boutons gris[modifier | modifier le wikicode]

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

}

Rendre plus discret le lien « Modifier »[modifier | modifier le wikicode]

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

Supprimer le logo et remonter d'autant les boîtes qui le suivent[modifier | modifier le wikicode]

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

Modifier la taille des caractères pour la balise <small>[modifier | modifier le wikicode]

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

ou

/* régler une autre taille de caractères pour la balise <small> */
small {font-size: 0.9em}

Supprimer les symboles graphiques pour les liens externes[modifier | modifier le wikicode]


/* 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}

Titres de pages identiques sur tous les Wikinews[modifier | modifier le wikicode]

Le Wikinews portugais a choisi une police « serif », tandis que les Wikinews espagnol et suédois, sans changer la famille de police, y ont ajouté les titres de pages en gras. Il est possible de rectifier, dans le fichier User:ZZZ/monobook.css (le préfixe User est reconnu sur tous les wikis), via le réglage suivant :

/* police des titres de page (à cause des Wikinews ES:, PT: et SV:) */
.firstHeading {font-family: sans-serif; font-weight: normal}

/* police des titres de niveau 1 (à cause du Wikinews PT: grrr...) */
h1, h1.simples {font-family: sans-serif; font-variant: normal}

ou encore, si vous avez déjà une sous-page Utilisateur:ZZZ/monobook.css, via le système d'importation de feuille de style décrit plus haut.

Liens externes[modifier | modifier le wikicode]

Ce qui précède n'est qu'un faible aperçu des centaines d'autres réglages possibles pour qui maîtrise « un peu » le langage de feuilles de styles (CSS).