Wikiccionari:Personalizar lo monobook

Un article de Wikiccionari.
Besonh de revirada   Aqueste tèxt o de tèxt en comentari a besonh d'èsser revirat (entièrament o non). Se coneissètz la lenga utilizada, esitetz pas ! Mercé pel Wikiccionari!.

Beaucoup d'aspects del site peuvent être modifiés personnellement dans les paginas :

  • [[Utilizaire:Dupont/monobook.css]]
  • [[Utilizaire:Dupont/monobook.js]]

(Dupont est à remplacer per votre nom d'utilizaire)

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

Explications générales[modificar]

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

Les modifications se trouvent dans deux sous-paginas de votre pagina d'utilizaire appelées monobook.css e monobook.js. Per exemple à [[Utilizaire:Dupont/monobook.css]] per la sospagina de l'utilizaire Dupont. Il vous suffit d'écrire quelques lignes de css/js dans cette pagina, e recharger/actualiser la pagina (CTRL-F5).

Le contenu de ces paginas est visible per les autres utilizaires, mais modifiable seulement per l'utilizaire titulaire del compte (e les administrateurs).

Classes[modificar]

Les paginas liste de suivi e modifications récentes utilisent deux classes : autocomment and new, ligams cassés (voir le source HTML de ces paginas). Cela permet de spécifier des polices e des couleurs séparées per chaque classe.

La pagina historique utilise les classes : autocomment, user and minor (per les modifications mineures del code).

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

Échantillons[modificar]

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

/* per mettre autre chose à la place del 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 boitas sont remontées d'autant */
#p-logo { display: none }
#column-one { padding-top: 0; }

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

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

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

/* toujours souligner les ligams */
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 boita de recèrca e ses boutons */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* couleur des ligams 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 paginas */
small {font-size: 1em}

Arrondir les coins amb Mozilla[modificar]

/* arrondir quelques coins, seulement possible amb mozilla/firefox/e 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 per 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 per les zones de texte préformaté */
pre {-moz-border-radius: 0.6em}

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

Règles d'impression[modificar]

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

/* économiser del 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 e :after per imprimer le href complet arpès le ligam (pas nécessaire amb la version actuelle) : */
@media print {
  #content a:link:after, 
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

Transformer la barre utilizaire en boita[modificar]

Testé per fonctionner amb Camino e Safari (amb Opéra, la boita s'insère malencontreusement derrière le logo ...)

/* transformer la barre utilizaire en boita */
#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é del nom d'utilizaire */
li#pt-userpage { background: none }

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

Menus monobook amb polices serif dans le cadre de contenu[modificar]

Tillwe (utilizaire sur w:en) a fait des essais de menus monobook amb des polices serif à [1] dont podètz copier la première partie per tester.

Déplacer les ligams de categoria[modificar]

Déplace les ligams de categoria dans le coin supérieur droit del cadre de contenu amb un fond gris -- Tillwe 21:22, 31 May 2004 (UTC)


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

/* déplace la boita del ligam de categoria */
#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 ligam de categoria lui-même */
p.catlinks {
  color: #aaaaaa;
  font-family: Verdana,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 del ligam */
p.catlinks a {
  color:#888888;
}

Symboles graphiques de ligams externes[modificar]


/* supprimer l'affichage des symboles graphiques de ligam 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[modificar]


/* 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 paginas especialas[modificar]


/* Classes à modifier, per qui ne veut pas de couleur per les paginas especialas... */
/* .ns-6, .ns-10 e .ns-14 actuellement non modifiées dans /wiki/MediaWiki:Monobook.css */

/* Articles puèi paginas 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}

/* Paginas Utilizaire, puèi paginas de discussion Utilizaire */
.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}

/* Paginas Wikipèdia, puèi paginas 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}

/* Paginas Imatge, puèi paginas de discussion Imatge */
.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}

/* Paginas MediaWiki, puèi paginas 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}

/* Paginas Modèl, puèi paginas de discussion Modèl */
.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}

/* Paginas Ajuda, puèi paginas de discussion Ajuda */
.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}

/* Paginas Categoria, puèi paginas de discussion Categoria */
.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}

[modificar]

Remplacer <URL> per l'adresse del logo, per 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[modificar]

/* 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 per la ligne de categoria e le sommaire*/
div#catlinks p:first-letter, table#toc p:first-letter 
{ 
   font-size: 100%;  
   float: none; 
}

Remplacer les boutons gris[modificar]

Le code suivant permet de pouvoir configurer les boutons « Consulter », « Recercar », « Sauvegarder » e « Prévisualisation » (afin de récupérer, per exemple, les boutons blancs à bord bleu apparus amb MediaWiki 1.4 e disparus quelques mois plus tard), mais aussi les boitas de saisie « recèrca » e « résumé de modification », moyennant divers réglages sur les classes o 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;
   }

}

Ligams CSS (anglés)[modificar]

Coins arrondis (anglés)[modificar]

Javascript[modificar]

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

Changer les clés d'accès[modificar]

La configuration js per défaut est à [2], podètz la personnaliser en changeant quelques éléments de 'ta' array. Per exemple :

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

Remplacez 'c' per modifier la clé d'accès. Per désactiver tous les accès e tooltips, écrivez

ta = false;

dans votre monobook.js.

Déplacer les categorias vers le haut[modificar]

Le code suivant déplace la boita de ligam categoria en haut de l'article. Naturellement, podètz ajouter quelques lignes dans .CSS per 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 pagina[modificar]

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 utilizaires 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[modificar]

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

  • 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=Utilizaire: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=Utilizaire:Bidule/monobook.js&action=raw&ctype=text/javascript"><\/SCRIPT>');

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

Sommaire moins encombrant[modificar]

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

Enlever les numéros dans le sommaire[modificar]

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

O per tous les enlever :

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

Pas de sommaire[modificar]

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

#toc {display:none}

Quelques ligams utiles[modificar]

CSS[modificar]

Java[modificar]