Wikiccionari:Personalizar lo monobook

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

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).

CSS

Classes

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

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

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

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

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

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

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

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

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

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

Changer le logo

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

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

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)

• http://www.csszengarden.com/
• http://css-discuss.incutio.com/
• http://www.alistapart.com/
• http://www.positioniseverything.net/

Coins arrondis (anglés)

• Moz: voir ci-dessus
• http://www.vertexwerks.com/tests/sidebox/
• http://www.alistapart.com/articles/slidingdoors2/
• http://www.alistapart.com/articles/customcorners/
• http://alistapart.com/articles/customcorners2/
• http://www.alistapart.com/articles/mountaintop/
• http://www.virtuelvis.com/gallery/css/rounded/

Javascript

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

Changer les clés d'accès

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

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

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

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

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

O per tous les enlever :

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

Pas de sommaire

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

#toc {display:none}

Quelques ligams utiles

CSS

• http://www.le-webmestre.net/web/cours/html/cours_13.php
• http://www.allhtml.com/css/index.php
• http://www.commentcamarche.net/css/cssintro.php3
• http://fr.selfhtml.org/css/
• http://www.csszengarden.com/tr/francais/ Styles originaux ad nauseam

Java

• http://www.allhtml.com/java/index.php