CSS Mediawiki

Cet article présente des configurations de CSS mise en place dans le cadre de cette instance.

Votre avis

Nobody voted on this yet  You need to enable JavaScript to vote

Tweet

Simulation console Shell

La modification de la CSS peut s'effectuer en mode administrateur en publiant la page MediaWiki:Common.css en utilisant une URL du type http://hostname/root/index.php/MediaWiki:Common.css. Un exemple dans ce WIKI permet de définir une CSS qui donnera un rendu du type console linux, fond noir et police blanche. Le contenu suivant est ajouté à cette css:

.console pre {
    background-color:black;
    border:1px dashed #2F6FAB;
    color:white;
}

Cela permet de surcharger le style standard appliqué lorsque la ligne est précédée d'un espace. Le code suivant:

<div class="console">
 ls -l
</div>

Produit

ls -l

Affichage icône pour format

Cette personnalisation est utilisée pour l'affichage des liens vers de la documentation. Le but de la personnalisation est d'afficher l'icône du format. Comme dans le cas précédent, le fichier MediaWiki:Common.css est personnalisé en ajoutant les lignes suivantes:

.file {
    background: no-repeat scroll left center transparent;
    padding-left: 18px;
}

.pdf {
    background-image: url("extensions/skins/custom/pdf-icon.png");
}

Les icônes sont ajoutés dans le répertoire extensions/skins/custom sous le répertoire d'installation de MédiaWiki.

Affichage icône pour catégorie

Cette personnalisation est utilisée pour l'affichage d'une icône devant chaque catégorie d'une page. Comme dans le cas précédent, le fichier MediaWiki:Common.css est personnalisé en ajoutant les lignes suivantes:

.catlinks span a {
    background: no-repeat scroll left center transparent url("extensions/skins/custom/tag.png");
    padding-left: 18px;
}

Le fichier icône est placé au même endroit que pour le format pdf.

Suite à la migration de version de Mediawiki, il a été constaté que cette modification n'est plus fonctionnelle sous une version 1.18. En effet, le mode d'affichage des catégories a été modifié, ne se basant plus sur des liens au sein de balises span, mais à l'aide des balises ul et li. Le fichier modifié reste le même, mais il faut placer le code CSS suivant:

.catlinks ul li a {
    background: no-repeat scroll left center transparent url("extensions/skins/custom/tag.png");
    padding-left: 18px;
}

Format des lignes d'un tableau

Il peut être utile et très lisible d'alterner la couleur de fond une ligne sur deux. Le premier réflexe serait de créer des classes CSS odd et even et de les affecter sur chacune des lignes. Cependant, cela peut introduire des oublis d'écriture dans les articles.

Or le language CSS permet de mettre en place ce type de configuration très facilement avec le mot clé nth-child.

Dans le cadre de ce Wiki, cela n'est mis en place que pour les tableaux avec la classe wikitable. Ainsi dans le fichier MediaWiki:Common.css, la directive suivante est ajouté.

.wikitable tr:nth-child(odd) {
    background-color:#D9D9D9;
}