Personnalisation

Les utilisateurs peuvent personnaliser de nombreux éléments de l'interface, incluant les polices, la position des liens, les couleurs, etc.

Une première étape de personnalisation est de choisir une apparence dans les préférences. Cette apparence peut ensuite être personnalisée en utilisant des pages CSS et JavaScript personnalisées, dans des sous-pages de la page utilisateur.

La première partie explique le fonctionnement de la personnalisation. Ceci dit, il n'y a pas besoin d'être un expert en CSS, il suffit souvent de recopier les exemples donnés dans la seconde partie.

Sommaire

1 Généralités
2 CSS
- 2.1 CSS en sous-page ou en fichier local
- 2.2 Sélecteurs CSS
3 Personnaliser l'apparence Monobook
4 Personnaliser les messages
- 4.1 Les messages affichés à l'écran
- 4.2 Les messages (mails) envoyés par mediawiki aux utilisateurs
5 Headline text
6 Voir aussi

Généralités

Quand l'utilisateur sélectionne une apparence dans ses préférences, la feuille CSS correspondante est appliquée. Pour modifier l'apparence, l'utilisateur devra éditer sa page CSS personnelle et utiliser les sélecteurs [1] : éléments HTML, classes et identificateurs (id) spécifiés dans le code HTML. Chaque apparence propose différents éléments à modifier, qu'il est possible de voir en regardant le code source HTML.

Par exemple, sur la Wikipédia francophone, les feuilles par défaut sont dans :

Le nom du répertoire style est spécifié durant l'installation dans LocalSettings.php.

Les feuilles personnelles sont appelées monobook.css et monobooks.js pour l'apparence Monobook (ou standard.css et standard.js pour l'apparence Classic, etc.), comme sous-pages de la page utilisateur.

Quand vous éditez ces pages, la prévisualisation fonctionne de façon un peu spéciale : elle permet de voir quels changements vont survenir sur l'apparence de la page, si vous utilisez l'apparence correspondante. Tous les éléments ne peuvent pas toujours être prévisualisés, selon le navigateur utilisé. Après la sauvegarde, il faut forcer les changements à apparaître en rechargeant la page (Ctrl-R, ou F5, selon les navigateurs).

Le code source HTML contiendra des lignes comme :

<script type="text/javascript"
src="/w/wiki.phtml?title=Utilisateur:username/monobook.js&action=raw&ctype=text/javascript">
</script>
@import "/style/Monobook.css";
@import "/w/wiki.phtml?title=Utilisateur:username/monobook.css&action=raw&ctype=text/css";

pour définir le CSS au niveau global, et les pages CSS et JS personnelles pour cette apparence.

CSS

CSS en sous-page ou en fichier local

En plus de ce qui précède, ou alternativement, un fichier CSS local peut être donné au navigateur. Cette feuille s'applique à toute page Web, pas seulement celles d'un projet MediaWiki. Cependant, certains noms de classe peuvent être plus spécifiques à MediaWiki. Cette feuille ne peut donc pas être utilisée pour différencier deux projets MediaWiki distincts.

Sélecteurs CSS

Les sélecteurs CSS, exprimés en terme d'éléments, de classes et d'identificateurs pour chaque apparence, sont par exemple :

:link : lien comme Aide:Contenu (Voir la note plus bas)
:link:link
:link:visited : lien visité
:link#contentTop
:link.external : lien externe, comme http://www.google.fr
:link.extiw : Lien interwiki dans la page, comme fr:exemple
:link.image : lien vers la page de description d'une image, comme Image:Exemple.jpg
:link.internal : Lien vers l'image elle-même comme Media:Fleur_de_lys.jpg
:link.new
body.ns-0, ..., body.ns-15 : Espaces de nom
div#bodyContent
div#column-content
div#editsection
div#globalWrapper
div#tocindent
div.tocline
h1.firstHeading
h2
h3
img.tex : Image TeX
small : Texte écrit petit comme exemple
table.toc

a et :link

Une erreur courante consiste à utiliser "a" à la place de ":link" pour les liens. Si le second s'applique seulement aux liens, "a" s'applique aux liens comme aux ancres (comme <a name="signet">.

Les liens internes normaux ne sont pas dans la classe internal (c'était le cas, plus dans les versions récentes), et sont stylisés avec :link et :link:visited.

Pour les liens interlangue :

#p-lang a

le style peut aussi dépendre de la valeur d'une variable, par exemple avec les sélecteurs :

:link[title ="Utilisateur:Nom d'utilisateur"]
:link[title ="Nom de page"]
:link[href ="URL complète"]

pour changer la couleur ou mettre en évidence les liens vers certains utilisateurs (ou soi-même), les liens vers certaines pages (comme la mise en gras des pages suivies sur les modifications récentes). Ceci ne marche pas avec Internet Explorer.

La liste de suivi et les modifications récentes utilisent deux classes :

autocomment
exemple
new (voir plus bas)

La page d'historique utilise la classe autocomment et les classes :

user
minor

Ainsi la police donnée pour user s'applique dans l'historique mais pas dans la liste de suivi ou les Modifications récentes.

Page d'édition

Boîte d'édition : textarea#wpTextbox1

exemple 1

Boîte de résumé d'édition : input#wpSummary

exemple 2

Principaux blocs de style

column-content : Espace global entre les marges du contenu.
content : La boîte à fond blanc et à la fine bordure qui contient le contenu principal.
firstHeading : La classe du titre de la page.
bodyContent : Le contenu principal.
contentSub : Le nom du wiki juste en-dessous du titre.

La classe p- est le style utilisé par les blocs autour du contenu principal, en l'occurence pour l'apparence monobook :

p-cactions : identificateur pour la liste d'onglets au-dessus du contenu principal.
p-personal : identificateur pour la liste de liens "personnels" (enregistrement, page personnelle, déconnexion...).
p-logo : identificateur pour le bloc contenant le logo en haut à gauche.
p-navigation : identificateur pour le bloc avec les liens de navigation.
p-search : le bloc avec les boutons de recherche.
p-tb : le bloc avec la boîte à outils.

Le bas de la page inclut les blocs avec les identificateurs suivants :

footer : bloc général du pied de page.
f-poweredbyico : l'icône à droite avec la mention de MediaWiki.
f-list : la liste des textes en bas de la page.

Paramètres de modèle

Une classe ou un identificateur peut être un paramètre d'un modèle, mais pas un élément.

Personnaliser l'apparence Monobook

L'apparence "Monobook" est utilisée sur de nombreux wiki, nous présentons donc quelques exemples d'utilisation. Certains de ces exemples utilisent l'adresse de Wikipédia, il suffit de remplacer "fr.wikipedia.org" par l'adresse de votre site.

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

monobook.css

Couleur des liens

a { color: #0000FF; }
a:visited { color: #552277; }
a:active, a.new { color: #FF0000; }
a.interwiki, a.external { color: #3366BB; }
a.stub { color: #772233; } // ébauches

Polices et apparence des liens

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

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

Transformer la barre utilisateur en boîte de côté

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

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

Ajustements de la barre latérale

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

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

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

/* titres des boîtes  "BALogiciels", "boîte à outils" et "autres langues" en gras */
.portlet h5 {font-weight: bold}

/* suppression du titre "rechercher" */
#p-search h5 {display: none}

/* suppression du bouton "Consulter" */
input[value = "Consulter"] {display: none}

/* non-affichage de certains liens du menu : page au hasard, aide financière, suivi des liens */
#n-randompage, #n-sitesupport {display: none}

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

Doublement des onglets en bas de page

Attention, pour utiliser ceci, il faut aussi insérer le code correspondant dans monobook.js (voir plus bas). Marche avec Mozilla, mais pas avec Internet Explorer.

#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: #1100FF;
   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;
}
/* Décalage pour distinguer les groupes d'onglets */
li#mytabs-ca-talk { margin-right: 1.6em; }
li#mytabs-ca-watch { margin-left: 1.6em; }

Arrondir les coins (Mozilla)

Ces lignes arrondissent les coins de différents cadres et boutons, et ne marchent qu'avec Mozilla. Dans certains cas, certains problèmes d'affichage peuvent apparaître (comme avec les vignettes d'image).

/* Onglets du haut */
#p-cactions ul li   {-moz-border-radius-topleft: 0.4em; -moz-border-radius-topright: 0.4em}
#p-cactions ul li a {-moz-border-radius-topleft: 0.4em; -moz-border-radius-topright: 0.4em}

/* Onglets du bas (si activés) */
#mytabs ul li       {-moz-border-radius-bottomleft: 0.4em; -moz-border-radius-bottomright: 0.4em}
#mytabs ul li a     {-moz-border-radius-bottomleft: 0.4em; -moz-border-radius-bottomright: 0.4em}

/* Page principale */
#content            {-moz-border-radius-topleft: 0.4em; -moz-border-radius-bottomleft: 0.4em}
#content            {-moz-border-radius-topright: 0.4em; -moz-border-radius-bottomright: 0.4em}
div.pBody           {-moz-border-radius-topright: 0.4em; -moz-border-radius-bottomright: 0.4em}

/* Boîte de catégorie */
#catlinks {-moz-border-radius: 0.6em}  

/* Boîtes de raccourci */
#raccourci {-moz-border-radius: 0.6em} 

/* Zones de texte préformaté */
pre {-moz-border-radius: 0.6em}       

/* Tableaux */
table {-moz-border-radius: 0.6em}      

/* Vignettes */
div.thumb div {-moz-border-radius: 0.6em}


/* Les boutons aussi : */
/* Sauvegarder */
#wpSave, #wpSave:hover {
     -moz-border-radius: 0.4em;
     border-right: 2px solid #2f6fab;
     border-bottom: 2px solid #2f6fab;
}

/* Prévisualiser */
#wpPreview, #wpPreview:hover {
     -moz-border-radius: 0.4em;
     border-right: 2px solid #2f6fab;
     border-bottom: 2px solid #2f6fab;
}

/* Rechercher */
.searchButton, .searchButton:hover {
     -moz-border-radius: 0.4em;
     border-right: 2px solid #2f6fab;
     border-bottom: 2px solid #2f6fab;
}

/* Recherche */
#searchInput {
     -moz-border-radius: 0.4em;
     border-right: 2px solid #2f6fab;
     border-bottom: 2px solid #2f6fab;
}

/* Résumé */
input[name="wpSummary"] {
     -moz-border-radius: 0.4em;
     margin-top: 0.5em;
     border-right: 2px solid #2f6fab;
     border-bottom: 2px solid #2f6fab;
}

Effet de relief

Ces lignes donnent un effet de relief à certains cadres. À nouveau, ne marche qu'avec Mozilla.

/* Pour les vignettes */
div.thumb div {
     border: 1px solid #999;
     border-right: 2px solid #999;
     border-bottom: 2px solid #999;
}

/* Pour les zones de texte préformaté */
pre {
     border: 1px solid #2f6fab;
     border-right: 2px solid #2f6fab;
     border-bottom: 2px solid #2f6fab;
}

Affichage (ou non) de messages

Ces lignes permettent d'afficher ou non certains éléments de la page.

/* désactiver l'affichage du message d'information du site */
// #siteNotice {display: none}

/* désactiver le message "nouvel article" en mode Édition */
#nouvel_article {display: none}

/* désactivation de l'appel de fonds */
#fundraising {display: none}

/* Pas d'affichage du sommaire */
#toc {display:none}

/* Affichage plus discret de la notification de nouveau 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}

/* non-affichage de la phrase « Un article de [nom du site] » */
#siteSub {display: none}

/* supprimer l'affichage du symbole graphique 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}

/* Écrémage du pied de page */
/* Il ne reste plus que la date de dernière modification */
#footer {background-color: transparent; border: 0}
#f-poweredbyico {display: none} // "Powered by MediaWiki"
#f-copyrightico {display: none} 
li#f-copyright {display: none} 
li#f-about {display: none}
li#f-disclaimer {display: none}

Réglages d'affichage

/* Meilleure table des matières (plus compacte) */
.tocline, .tocindent p {display: inline}
.tocline:after,  .tocindent a:after {content: " | "}
.tocline br, .tocindent br {display:none}
.tocindent {display: inline; margin: 0}

/* suppression de la barre de boutons dans la page d'édition */
div#toolbar {display: none}

/* Aspect du lien de « page-racine » */
#contentSub {font-size: 100%; color: gray}

/* Aspect du lien "modifier" (sections) */
.editsection {font-size: 0.8em; color: gray}
.editsection a {color: gray; margin: 0.5em}

Couleurs d'arrière-plan

/* pour mettre autre chose à la place du fond monobook */
body { background: http://dlba.ifrance.com/skins/monobook/grenth.jpg; }

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

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

/* Couleurs selon l'espace de nom */
.ns-0 * #content, .ns-0 * #p-cactions li, .ns-0 * #p-cactions li a {background: #000000} //Article
.ns-1 * #content, .ns-1 * #p-cactions li, .ns-1 * #p-cactions li a {background: #000000} //Discuter
.ns-2 * #content, .ns-2 * #p-cactions li, .ns-2 * #p-cactions li a {background: #000000} //Utilisateur
.ns-3 * #content, .ns-3 * #p-cactions li, .ns-3 * #p-cactions li a {background: #000000} //Discussion Utilisateur
/* A répéter pour les espaces de nom suivants */

Divers

/* légère marge et bordure à droite pour le bloc de contenu */
#content {margin-right: 0.5em; border-right: 1px solid #aaaaaa}

/* maintien de la "capitalisation" normale */
.portlet h5, #p-cactions li a {text-transform: none}
#mytabs ul li a {text-transform: none}
#pt-userpage, #pt-anonuserpage, #pt-login, #pt-logout {text-transform: none}
#pt-mytalk, #pt-preferences, #pt-watchlist, #pt-mycontris {text-transform: none}

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 après le lien 
(pas nécessaire avec la version actuelle) : */
@media print {
  #content a:link:after, 
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

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.

/* 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 du lien de catégorie 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 du lien */
p.catlinks a {
  color:#888888;
}

Ajouter une lettrine à chaque paragraphe

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

monobook.js

Doublement des onglets en bas de page

A placer conjointement avec le code correspondant du monobook.css :

//Répéter les onglets en bas de page
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);

Déplacer les catégories vers le haut

Le code suivant déplace la boîte 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]);
 }

Boîte déroulante

Pour installer la boîte déroulante sur MediaWiki : Voir l'article détaillé.

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

Si vous travaillez sur plusieurs projets MediaWiki, vous pouvez unifier et synchroniser vos styles et n'avoir à mettre à jour que les pages de votre compte « principal ». Si vous avez établi vos préférences sur, disons, www.monsite.com, et que vous voulez l'importer sur www.autresite.org, il suffira d'écrire, sur autresite.org :

Pour importer le monobook.css :

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

Pour importer le monobook.js :

document.write('<SCRIPT SRC="http://www.monsite.com/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).

Personnaliser les messages

Les messages affichés à l'écran

Il est souvent nécessaire de personnaliser les messages affichés par le wiki, soit pour corriger de petites fautes ou pour reformuler une expression, soit pour traduire les messages qui ne l'ont pas encore été :

Pour modifier les messages affichés par mediawiki, il faut être connecté avec un compte SysOp (opérateur système). (C'est l'administrateur qui peut donner la qualité SysOp à tel ou tel utilisateur, grâce à la Page spéciale 'User rights management')
ouvrir le lien ‘Pages spéciales’ (à gauche) et choisir ‘Liste des messages système’…
Après une éventuelle recherche (CTRL + F) d’un fragment du message actuel,
cliquer sur le nom du message voulu (colonne de gauche) dans le tableau de tous les messages, ce qui ouvre la page du message
utiliser simplement l’onglet ‘modifier’ pour corriger le message…
Enregistrer…
C’est tout :o)

Si quelqu'un connaît la procédure pour faire toutes les corrections-traductions complémentaires d'un coup, avec un seul fichier, ce serait utile de décrire la procédure, merci :o)

Les messages (mails) envoyés par mediawiki aux utilisateurs

Comment les traduire ?

Headline text

Voir aussi

Gallery of user styles
Skin projects
Aide:Préférences
Aide:Espace de nom
w:fr:CSS
Customization:Explaining skins
mw:Help:Configuration settings (spécifiquement mw:Help:$wgAllowUserJs et mw:Help:$wgAllowUserCss)

Modèle:H:f

Personnalisation

De Salve Regina

Sommaire

Généralités

CSS

CSS en sous-page ou en fichier local

Sélecteurs CSS

a et :link

Page d'édition

Principaux blocs de style

Paramètres de modèle

Personnaliser l'apparence Monobook

monobook.css

Couleur des liens

Polices et apparence des liens

Transformer la barre utilisateur en boîte de côté

Ajustements de la barre latérale

Doublement des onglets en bas de page

Arrondir les coins (Mozilla)

Effet de relief

Affichage (ou non) de messages

Réglages d'affichage

Couleurs d'arrière-plan

Divers

Règles d'impression

Déplacer les liens de catégorie

Ajouter une lettrine à chaque paragraphe

monobook.js

Doublement des onglets en bas de page

Déplacer les catégories vers le haut

Boîte déroulante

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

Personnaliser les messages

Les messages affichés à l'écran

Les messages (mails) envoyés par mediawiki aux utilisateurs

Headline text

Voir aussi

Affichages

Outils personnels

navigation

Outils

Récemment sur Salve Regina

Spiritualité

Famille

Catéchisme

Chrétienté

Morale

Liturgie

Théologie

Philosophie

Histoire

Scoutisme

Auteurs