Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

Posts Tagged ‘customisation’

Personnalisons Wikipédia : le sommaire

Posted by DarkoNeko sur samedi 21 novembre 2009

Ce billet fait partie de la série « Personnalisons Wikipédia« . La personnalisation du jour vous permettra de rendre toutes ces pages trop sérieuses un poil plus rigolotes (ou pas) en modifiant la tronche de leur sommaire à l’aide de quelques lignes de CSS.

Comme d’habitude, le code est à insérer dans votre sous page /monobook.css, ou /vector.css selon le skin MediaWiki  que vous utilisez.

Partie HTML

Le code d’un sommaire ressemble à ça (l’exemple est pris sur la page du bulletin des admins, pour les titres de section) :


<table id="toc" class="toc">
[...]
<ul>
	<li class="toclevel-1 tocsection-1">
		<a href="#(semaine)"><span class="tocnumber">(numérotation)</span> <span class="toctext">(semaine)</span></a>
		<ul>
			<li class="toclevel-2 tocsection-2">
				[..lien section jour, identique a celui des semaines ci dessus..]
				<ul>
					<li class="toclevel-3 tocsection-3">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-4 ">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-5">[..lien section titre..]</li>
				</ul>
			</li>
			<li class="toclevel-2 tocsection-6">
				[..lien section jour..]
				<ul>
					<li class="toclevel-3 tocsection-7">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-8">[..lien section titre..]</li>
				</ul>
			</li>
			[...]
		</ul>
	</li>
</ul>
</table>

Les deux choses importantes à retenir sont :

  • Chaque niveau du sommaire à une classe dédiée (toclevel-X ). C’est là dessus que se basera notre code CSS.
  • Les niveaux sont imbriqués (niveau 2 contenu dans le 1, 3 dans le 2, etc), ce qui signifie que si on ne précise pas le contraire, un code affecté au niveau 2 affectera par défaut tous les niveaux 3 à 6  qu’il contient

Le code CSS

Vous connaissez déjà le gros de la syntaxe utilisée car elle a déjà été expliquée dans mes précédents billets (si vous ne les avez pas lu, c’est le moment :). Les quelques éléments nouveaux seront détaillés en /* commentaires */ dans le code.

Le bout de code ci dessous donnera un style « météo » à l’ensemble des sommaires. J’expliquerais plus bas comment limiter son action à seulement certains d’entre eux (par exemple, uniquement le bistro, ou uniquement l’espace wikipédia: )

Initialement, je comptais faire un style plus ensoleillé… mais pas moyen de trouver une icone potable de chapeaux mexicains. Donc tant pis, les icones météo feront l’affaire. De toute manière, ça n’est qu’un exemple, le but étant que vous ayez la curiosité de modifier/adapter  le code à votre sauce ensuite (soyons fous et optimistes…)


/* sommaires, "météo mode"
   les modifications sont faites sur le lien (a) plutôt que sur la ligne (li) afin que l'icône soit cliquable.
 */

/* effacer la numérotation du sommaire, car elle va m'embêter pour la suite */
.tocnumber {
	display:none;
}

/* grande font, bleu foncé, avec un soleil à gauche */
.toclevel-1 a {
	color:#007;
	font-size:160%;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Crystal_sun.png/25px-Crystal_sun.png') no-repeat scroll left bottom;
	padding-left:29px; /* décaler le texte sur la droite pour laisser de la place a l'icône */
}

/* font un peu moins grande, bleu standard, icône nuageuse à sa gauche */
.toclevel-2 a {
	font-size:130%;
	color:#00F;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Cloudy01.svg/20px-Cloudy01.svg.png') no-repeat scroll left bottom;
	padding-left:24px;
}

/* font taille normal, bleu plus clair, icône orage */
.toclevel-3 a {
	font-size:100%;
	color:#55F;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/c/cf/Weather_lightning.png') no-repeat scroll left bottom;
	padding-left:19px;
}

/* font plus petite, bleu encore un peu plus clair, pas d'icône (car serait trop petite pour être reconnaissable) */
.toclevel-4 a {
	font-size:80%;
	color:#99F;

	background:none; /* pas d'image de fond (l'icône sur la gauche), il faut le spécifier sinon celle du niveau 3 s'affichera */
	/* je laisse le padding-left hérité du niveau supérieur pour que le décalage soit cohérent avec les niveaux d'au dessus */}

Le résultat

Pour vous donner une meilleure idée de l’impact, j’ai aussi fait une capture des sommaires du BA et du bistro avec ce thème, c’est cliquable et c’est ci dessous. Moins lugubre tout de suite, non ?

Limiter la portée du code

Maintenant, vous n’avez probablement pas envie que ce code soit actif sur absolument toutes les pages, et souhaitez le limiter a un/des namespace(s) ou des pages en particuliers.

Je veux dire, ce style rend bien pour les pages qui ont une arborescence sur plusieurs niveaux, mais pour une page ou ça n’est pas le cas, ça ressemble plutôt à ça, que je trouve moche :

Pour ce faire, nous allons nous servir d’une série de classes que MediaWiki affecte à chaque page. Par exemple, le Bulletin des administrateurs (avec ma config) possède celles ci :


<body class="mediawiki ltr ns-4 ns-subject page-Wikipédia_Bulletin_des_administrateurs skin-monobook">

(je saute celles que je ne connais/comprend pas)

  • « ltr » indique que nous sommes dans un mode « left to right » (en opposition, par exemple, à l’arabe qui se lis en rtl, de droite à gauche)
  • « ns-4 » est l’identifiant du namespace de la page (ici wikipédia: )
  • « page-Wikipédia_Bulletin_des_administrateurs » est un identifiant unique (ou presque) de la page
  • « skin-monobook« , comme son nom l’indique, spécifie que j’utilise le skin « monobook » pour visualiser la page. Les utilisateurs d’Açai/Babaco verront à la place « skin-vector« .

Les deux qui nous intéressent sont celui qui indique le namespace et celui qui est unique à la page.

Mettons que je veuille limiter la portée du code au namespace wikipédia: . Au lieu de

.toclevel-1 a {

il suffit de mettre

.ns-4 .toclevel-1 a {

Et si je veux limiter sa portée au BA et au bistro, le code devient

.page-Wikipédia_Bulletin_des_administrateurs .toclevel-1 a, .page-Wikipédia_Le_Bistro .toclevel-1 a  {

Et voila le travail !

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | 3 Comments »

Personnalisons Wikipédia : changer l’apparence du « vous avez un nouveau message » (2)

Posted by DarkoNeko sur samedi 15 août 2009

Ce billet fait partie de la série « Personnalisons Wikipédia« .

La personnalisation d’aujourd’hui vous permettra de changer l’apparence  du sempiternel « vous avez un nouveau message » (voire le cacher) à l’aide d’un peu de CSS  – à ne pas confondre avec mon billet d’hier qui indiquait comment en changer le texte (et qui explique pourquoi j’ai un truc louche dans mes captures d’écran ci dessous :)

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , | 4 Comments »

Personnalisons Wikipédia : vous avez un nouveau message

Posted by DarkoNeko sur vendredi 14 août 2009

Ce billet fait partie de la série « Personnalisons Wikipédia« .

La personnalisation d’aujourd’hui vous permettra d’altérer le texte du sempiternel « vous avez un nouveau message » à l’aide de quelques lignes de JavaScript.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , | 9 Comments »

Personnalisons Wikipédia : ajouter un système d’onglet à sa page utilisateur

Posted by DarkoNeko sur vendredi 3 juillet 2009

Ce billet fait partie de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous permettra d’ajouter un système d’onglets en JavaScript sur votre page utilisateur. Vous pourrez du coup profiter d’une page utilisateur différente de celle que vous montrerez au monde (par exemple, mettre une jolie image pour l’extérieur, et un gros paquet de liens/pense-bêtes affichés pour vous)

En pratique, ça fonctionne pour une quelconque  page, mais n’oubliez pas que seules les personnes ayant ce même code dans leur monobook pourrons en profiter :)

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | Leave a Comment »

Personnalisons Wikipédia : ajouter des liens

Posted by DarkoNeko sur mardi 30 juin 2009

Ce billet fait partie de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous permettra d’ajouter des liens dans le menu de gauche de l’interface de Wikipédia, à l’aide de quelques lignes de JavaScript. Ceux qui ne veulent pas d’explications trouveront le code tout en bas de la page.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , | 10 Comments »

Personnalisons Wikipédia : liste de suivi, contributions, RC

Posted by DarkoNeko sur samedi 27 juin 2009

[
07/10/2011 : Mis à jour pour correspondre à la structure HTML de MediaWiki 1.18

  • les classes « minor » et « bot » sont devenues « minoredit » et « botedit »
  • le conteneur des indications !NmB est passé de <span> à <abbr>

]

Ce billet fait partie de la série « Personnalisons Wikipédia« .

Les personnalisations d’aujourd’hui visent à faciliter la lecture votre liste de suivi, et par effet de bord celle d’autres pages comme les modifications récentes (RC) et les listes de contributions (du fait qu’elles utilisent de nombreux élements communs). Il nous suffira pour cela de quelques lignes en language CSS.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , | Leave a Comment »

Personnalisons Wikipédia : les liens

Posted by DarkoNeko sur mercredi 24 juin 2009

Ce billet fait partie de la série « Personnalisons Wikipédia« .

La personnalisation d’aujourd’hui vous permettra de modifier la manière dont s’affichent les liens (rouges, redirections, ..) à l’aide de quelques lignes de CSS.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , | 6 Comments »

Personnalisons Wikipédia : retirons l’inutile

Posted by DarkoNeko sur samedi 20 juin 2009

Ce billet est le deuxième de la série « Personnalisons Wikipédia« .

La personnalisation d’aujourd’hui vous aidera à retirer les parties de l’interface de Wikipédia que vous trouvez inutile à l’aide de quelques lignes en CSS. Je me limiterais ici au menu de gauche de l’interface, mais c’est applicable partout.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , | 6 Comments »

Personnalisons Wikipédia : introduction

Posted by DarkoNeko sur jeudi 18 juin 2009

Ce billet est le premier de la série « Personnalisons Wikipédia« .

Cette série de billets visera à détailler (aux débutants comme aux autres) des moyens de personnaliser telle ou telle partie de l’interface de Wikipédia,  à l’aide d’un peu de CSS et de JavaScript (JS). Il est conseillé d’avoir 2/3 notions dans ces matières, mais je fournirais des explications et le code à chaque fois que possible.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | 6 Comments »