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
[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).
CSS
[modificar]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}
Changer le logo
[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]- http://www.csszengarden.com/
- http://css-discuss.incutio.com/
- http://www.alistapart.com/
- http://www.positioniseverything.net/
Coins arrondis (anglés)
[modificar]- 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
[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]- 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