Darkoneko's Weblog

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

Articles Tagués ‘javascript’

Personnalisons Wikipédia : confirmer une action

Publié par DarkoNeko le Jeudi 11 novembre 2010

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

La personnalisation du jour vous permettra d’ajouter une demande de confirmation lorsque vous cliquez sur "révoquer" avec quelques lignes de JavaScript. En gros, cette fonction est prévue pour ceux et celles qui cliquent plus sur le bouton par erreur que volontairement :)

Lors d’un clic sur le lien de révocation, la fenêtre suivante apparaitra :

Code à ajouter dans votre monobook.js ou vector.js

Le code est tout simple :

  1. récupération de la liste les liens "révoquer" de la page (repérables par leur classe "mw-rollback-link")
  2. ajout d’un appel à la fonction de confirmation à leur évènement "onclick" (=quand l’utilisateur clique)

confirm() est une fonction native de JavaScipt, donc rien de spécial à faire de ce côté là.

si l’utilisateur clique sur "ok", confirm() retourne True et l’action (aller vers la page) est validée, dans le cas contraire elle retourne False et l’action est annulée


function addRevertButtonConfirm() {
   var list_boutons = document.getElementsByClassName("mw-rollback-link")
   for (var a = 0, len = list_boutons.length ; a < len ; a++) {
      list_boutons[a].setAttribute('onclick', 'return confirm("revoquer ?")')
   }
}
addOnloadHook( addRevertButtonConfirm )

Note : le script n’a été testé que sous firefox

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , | Commentaires fermés

Personnalisons Wikipédia : icone de suivi sous Vector

Publié par DarkoNeko le Dimanche 13 juin 2010

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

En suivant un lien depuis le dernier billet de Popo, je suis tombé sur une discussion de bistro remplie de complaintes, dont une partie était au sujet de l’icône "étoile" faisant sous Vector office de raccourci pour ajouter une page à sa liste de suivi.

Wikipédiens, Wikipédiennes, Je Vous Ai Compris. La personnalisation du jour permettra aux vectorisés d’entre vous  de changer l’icône de ce lien.

Un code similaire a été utilisé dans plusieurs de mes autres billets de personnalisation, donc pas d’explications. Pour cet exemple, je me suis basé sur cette image pour la "mise en suivi" et sur celle ci pour le "retrait de suivi". N’hésitez pas à les remplacer par quelquechose que vous plait :)


/* icone "mettre en suivi" */
#ca-watch.icon a, #ca-watch.icon a:hover {
   background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png");
   background-position:5px 60%; /* cette partie est nécessaire car le mode hover "par défaut" a des valeurs différentes */
}


/* icone "retirer de la liste de suivi" */
#ca-unwatch.icon a, #ca-unwatch.icon a:hover {
   background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Black_x.svg/15px-Black_x.svg.png");
   background-position:5px 60%;
}

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , , , | Commentaires fermés

Personnalisons Wikipédia : la barre du haut

Publié par DarkoNeko le Vendredi 12 mars 2010

Ce billet fait partie de la série « Personnalisons Wikipédia ». La personnalisation du jour vous permettra de changer la tronche de la barre en haut à droite.
Je commencerais doucement avec des modifications esthétiques simples  (en CSS), puis ce sera au tour de l’ajout d’icônes (toujours en CSS), pour finir sur la modification du texte des liens et l’ajout d’autres liens dans la barre (en JavaScript).

Histoire d’avoir une base de travail "propre" (mon compte principal étant très customisé), je me servirais ici d’un compte "user:Pelote de laine", donc ne soyez pas surpris du nom affiché dans la barre sur les exemples :)

Au moment ou j’écris ces lignes, la version par défaut de la barre du haut, avec le skin monobook, ressemble à ça :

Jouons un peu avec le CSS (monobook.css ou vector.css)

Pour commencer, voici quelques exemples de changement d’apparence. C’est juste pour vous donner une idée de ce qui peut être fait, donc c’est très hétéroclite ; n’hésitez pas à réutiliser les bouts qui vous plaisent :)  Lors de vos tests, pas besoin de sauvegarder votre monobook, un simple "prévisualiser" suffit pour jauger le résultat.


/* virer le lien "essayer la béta" */
li#pt-optin-try {
   display:none!important;
}

/* lien discussion : espace plus grand entre chaque lettre */
li#pt-mytalk a {
   letter-spacing:2px;
}

/* préférences : en italique */
li#pt-preferences a {
   font-style:italic;
}

/* liste de suivi : en petites majuscules */
li#pt-watchlist a {
   font-variant:small-caps;
}

/* contributions : barré */
li#pt-mycontris a {
   text-decoration:line-through ;
}

/* déconnexion : en rouge et gras */
li#pt-logout a {
   font-weight:bold;
   color:red;
}

Résultat :

Ajouter des icônes (toujours monobook.css ou vector.css)

Repartons de zéro (ou presque, je garde le bout supprimant le lien "essayer la beta"), et ajoutons cette fois des "icônes" à gauche de certains liens.

Chaque icône, étant attachée au node "a" et non au node "li", fait partie intégrante du lien et est donc cliquable.


/* boc de biere à gauche du lien vers ma page de discussions */
li#pt-mytalk a {
  /* mettre une image de fond (l'icône) au node "a", tout à gauche */
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/2piva.png/15px-2piva.png') no-repeat scroll left top;
  /* décaler le texte sur la droite (d'environ la largeur de l'image) pour que les deux ne se chevauchent pas */
  padding-left:17px;
}

/* une roue crantée à gauche des prefs */
li#pt-preferences a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Crystal_Clear_app_kservices.png/15px-Crystal_Clear_app_kservices.png') no-repeat scroll left top;
  padding-left:17px;
}

/* une loupe à gauche de la liste de suivi */
li#pt-watchlist a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png') no-repeat scroll left top;
  padding-left:17px;
}

/* un crayon à gauche de la liste de contributions */
li#pt-mycontris a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Emblem-pen-new.svg/13px-Emblem-pen-new.svg.png') no-repeat scroll left top;
  padding-left:15px;
}


Résultat :

changer le texte, ajouter des liens (monobook.js ou vector.js)

Passons maintenant à la partie JavaScript (pour les étourdis, ça veux dire "ne collez pas le code ci dessous dans votre monobook.css, ça ne marchera pas") . Nous allons ajouter des liens…

  • vers votre monobook perso  : "js" et "css" (remplacez "monobook" par "vector" dans les liens au besoin, et adaptez si vous utilisez secure.wikimedia.org)
  • vers vos logs

Et tant qu’on y est, modifions le texte des liens existants.

Le principe utilisé est le même que dans cet autre billet de personnalisation ainsi que celui ci, je ne m’étendrais donc pas trop sur son fonctionnement



importScript('Utilisateur:Darkoneko/divers.js') // si vous ne l'avez pas déjà

function customizeTopBar() {
   var logout = document.getElementById("pt-logout")
   if (!logout) return
   var topBarUl = logout.parentNode

   var mytalk = document.getElementById('pt-mytalk');
   //ajouter "js" a gauche de discussion. La variable "wgUserName" contient le nom de l'utilisateur en cours.
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.js', 'js'), mytalk)

   //ajouter "css" a gauche de discussion, donc il sera entre "js" et "discut'"
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.css', 'css'), mytalk)

   //changer le texte pour "Page de discussion"
   mytalk.getElementsByTagName("a")[0].firstChild.nodeValue = "discut' "

   //changer le texte pour "Préférences"
   document.getElementById('pt-preferences').getElementsByTagName("a")[0].firstChild.nodeValue = "prefs"

   //changer le texte pour "Liste de suivi"
   document.getElementById('pt-watchlist').getElementsByTagName("a")[0].firstChild.nodeValue = "watchlist"

   //changer le texte pour "Contributions"
   document.getElementById('pt-mycontris').getElementsByTagName("a")[0].firstChild.nodeValue = "contribs"

   //ajouter "log" a gauche de déconnexion
   topBarUl.insertBefore( createLiAdressNode('/w/index.php?title=Special:Journal&user='+wgUserName, 'log'), logout )

   //changer le texte pour "Déconnexion"
   logout.getElementsByTagName("a")[0].firstChild.nodeValue = "X"
}
addOnloadHook(customizeTopBar)


Résultat :

Et vous, quels autres liens ajouteriez vous ?

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , , , | 3 Comments »

Personnalisons Wikipédia : enrouler/dérouler des sections v2

Publié par DarkoNeko le Mercredi 10 mars 2010

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

Vous trouverez ci dessous une mise à jour du code de mon précédent billet, Personnalisons Wikipédia : enrouler/dérouler des sections, qui vous permet de masquer ou réafficher des sections de pages de Wikipédia en cliquant sur leur titre.

Les améliorations sont les suivantes :

  • Au lieu d’encoder directement un display:none/display:block , le script fait maintenant appel à la classe CSS "hidden" pour masquer les textes, afin d’éviter des problèmes d’affichage lors du dépliage (un modèle s’affichant sur toute la largeur de la page au lieu d’une largeur fixe, par exemple). 2 mini fonctions sont dédiées à cette tâche.
  • le bug faisant afficher un bout de code an dessous du sommaire lors d’un dépliage a été résolu.
  • lorsque vous repliez une sous-section, puis repliez/dépliez sa section parente, cette sous section restera repliée jusqu’à ce que vous cliquiez spécifiquement sur son titre (auparavant, lorsque l’on dépliait une section, tout son contenu était déplié, peu importe que des sous-sections aient été indépendamment repliées)
  • La section ne se replie plus lorsque vous cliquez sur le "modifier" à droite du titre de cele-ci.

Comme d’habitude, le script a surtout été testé avec firefox 3.x et marche au moins aussi avec Safari (pas de garantie pour IE ou chrome, prévenez moi si vous rencontrez un problème dessus)

Nouveau code pour la partie JavaScript (monobook.js ou vector.js)


/* ajoute une classe à un element */
function addClass(elem,classe) {
  elem.className += " "+classe;
}

/* enlève la premiere occurence du nom d'une classe d'un element */
function removeClass(elem,classe) {
    var reg = new RegExp('(\\s|^)'+classe+'(\\s|$)');
    elem.className=elem.className.replace(reg,' '); //ne replace que la premiere occurence (comme ça les hide imbriqués restent en hide ^^)
}

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {
   for( var titleLevel = 1 ; titleLevel <= 6 ; titleLevel++) { //tous les h1, h2 ... h6
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var a = 0 ; a < nb ; a++) {
          titleList[a].setAttribute('onclick', "toogleTitle(this)");
      }
   }
  //pour que ça ne se replie pas quand on clique sur un bouton modifier, on annule l'event au niveau du lien
  var editLinkList = document.getElementsByClassName('editsection')
  nb = editLinkList.length
  for( a = 0 ; a < nb ; a++) {
     editLinkList[a].setAttribute('onclick', "event.cancelBubble=true;");
  }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var titre_niveau = p_this.nodeName.substring(1,2) //le x de hx (1 de h1, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var niveau = 2 ; niveau <= titre_niveau ; niveau++)  {
    stopMatch += "|h" + niveau
  }
  stopMatch += ")"
  regex_stopMatch = new RegExp(stopMatch, "i" )

  var nextSiblingNode = p_this.nextSibling

  if( p_this.className != "neko_toogle_cache"  ) { // il faut replier
    p_this.className = "neko_toogle_cache"  //on ajoute une classe au titre pour savoir s'il est en mode replié

    while( nextSiblingNode ) {
       if( nextSiblingNode.nodeName.match(regex_stopMatch) ) break; //on a atteint le titre "bloquant" suivant = stop
       if( nextSiblingNode.style && nextSiblingNode.nodeName != 'SCRIPT' ) addClass(nextSiblingNode, "hidden") //ne pas affecter les nodes texte ni script
       nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
    }
  } else { //il faut déplier
    p_this.className = ""

    while( nextSiblingNode ) {
       if( nextSiblingNode.nodeName.match(regex_stopMatch) ) break;
       if( nextSiblingNode.style && nextSiblingNode.nodeName != 'SCRIPT' ) removeClass(nextSiblingNode, "hidden")
       nextSiblingNode = nextSiblingNode.nextSibling
    }
  }
}



voili.

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , , | 1 Comment »

Personnalisons Wikipédia : enrouler/dérouler des sections

Publié par DarkoNeko le Lundi 8 mars 2010

Ce billet fait partie de la série « Personnalisons Wikipédia ».  Avez vous déjà rêvé de pouvoir plier/déplier des sections entières du bistro ou d’un article quelconque de notre belle Wikipédia  ? Grâce à la personnalisation d’aujourd’hui, c’est maintenant possible juste en cliquant sur le titre de la section.

Exemple par l’image, prise sur le bistro du jour  :

(faites pas attention à la couleur de fond grise, c’est un de mes autres test CSS)

*clic* sur "Le bistro/7 mars 2010" => enroulé avec toutes ses sous-sections !

un autre clic dessus pour le re-dérouler.

Si le titre est un lien,  alors cliquez à droite du texte, ça marche aussi.

Malheureusement, il se trouve que j’ai totalement la flemme d’expliquer comment fonctionne la partie javascript (en plus, il y a un bout assez compliqué) ; donc je me contenterais de vous fournir le code :)

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

Partie à mettre dans votre monobook.css (ou vector.css)

Ce petit bout de CSS est la raison de la colorisation différente (+ mise en italique) des titres repliés dans l’image ci dessus. "neko_toogle_cache" est le nom de la classe CSS que le code javascript donne aux titres repliés, pour pouvoir savoir qu’ils sont repliés et qu’ils faut "déplier" en cas de nouveau clic sur le titre.

/* couleur des titres dont la section est cachée par la fonction toogle */
.neko_toogle_cache {
  color:#333;
  font-style:italic;
}

Partie à mettre dans votre monobook.js (ou vector.js)

Pas d’explication détaillée pour cette partie là, désolé (juste les commentaires du code). Peut être plus tard, je vous promet rien :)

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {

   for( var titleLevel = 1 ; titleLevel < 7 ; titleLevel++) {
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var b = 0 ; b < nb ; b++) {
          titleList[b].setAttribute('onclick', "toogleTitle(this)");
      }
   }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var p_niveau = p_this.nodeName.substring(1,2) //le 1 de h1 (ou 2 de h2, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var a = 2 ; a <= p_niveau ; a++)  {
    stopMatch += "|h"+a
  }
  stopMatch += ")"
  reg = new RegExp(stopMatch, "i" )

  //on ajoute une classe (neko_toogle_cache) au titre pour savoir s'il est en mode replié
  if( p_this.className != "neko_toogle_cache") { //il faut  replier
     p_this.className = "neko_toogle_cache"
     var display_to_put = "none"
  } else { //il faut faire déplier
     p_this.className = ""
     var display_to_put = "block"
  }

  var nextSiblingNode = p_this.nextSibling

  while( nextSiblingNode ) {
     if(  nextSiblingNode.nodeName.match(reg) ) break; //on a atteint le titre "bloquant" suivant = stop

     if( nextSiblingNode.style) { //certains nodes sont des nodes texte et n'ont pas de style.
        nextSiblingNode.style.display = display_to_put
        if( nextSiblingNode.className = "neko_toogle_cache") nextSiblingNode.className = "" // x
     }
     nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
  }
}


Publié dans Personnalisons Wikipédia | Tagué: , , , , , , , | 9 Comments »

Personnalisons Wikipédia : raccourcis clavier en mode édition

Publié par DarkoNeko le Dimanche 1 novembre 2009

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

La plupart des logiciels WYSIWYG permettent de modifier l’apparence d’un texte (mise en gras, italique, souligné, etc) à l’aide de raccourcis clavier (respectivement ctrl+b, ctrl+i, ctrl+u, …) La personnalisation d’aujourd’hui vous permettra de créer des raccourcis clavier en JavaScript afin d’avoir des facilités similaires lors de vos éditions sur Wikipédia

Introduction

(ceux qui ne s’intéressent pas aux explications peuvent passer directement au code complet, à la fin du billet)

Le code du jour fait appel à la notion d’évènement, pour lesquels vous trouverez plus d’informations sur Wikibooks. Les évènements qui nous intéressent ici sont ceux qui nous permettront de savoir quand l’utilisateur appuie sur une certaine combinaison de toucher sur le claviers, et sont au nombre de deux :

  • "appui sur une touche du clavier" (onkeydown)
  • "relachement d’une touche du clavier" (onkeyup).

Ces deux évènements permettent d’accéder en interne à un code correspondant à la touche qui viens d’être appuyée ou relachée.

Histoire de nous faciliter la vie, MediaWiki possède déjà une fonction JavaScript permettant de modifier un texte sélectionne comme l’on veux. Cette fonction est par exemple utilisée lorsque vous cliquez sur un des boutons au dessus (la barre de menu) ou en dessous (les listes de caractères spéciaux), en mode édition.

Cette fonction est insertTags(). Elle prend 3 paramètres, qui sont respectivement :

  • les caractères à ajouter avant la sélection
  • Les caractères  à ajouter après la sélection
  • Le texte par défaut,  s’il n’y avait pas de texte séléctionné.

Exemple pour mettre un texte en souligné :


 insertTags('<u>', '</u>', 'souligné');

Note : Le code n’a été, pour l’instant, testé que sous Firefox 3.0 et 3.5.4. N’hésitez pas à me donner un feedback sur le bon fonctionnement (ou non) sur d’autres versions et navigateurs.

Note2 : il faut savoir que les raccourcis défini en javascripts seront prioritaires sur ceux du logiciel (du moins avec firefox)

Passons au code…

Conteneur

Histoire d’être un minimum propre, notre code sera, comme pour les autres de mes billets, encapsulé dans une fonction


function keyboardShortcuts() {
  // le code sera ici
}

 

Utilisation des évènements

La méthode pour définir une action (= l’appel à une fonction) sur les évènements qui nous intéresse est la suivante :


  document.onkeyup = function(e) { //l'user relâche une touche
    //code à executer
  }

  document.onkeydown = function(e){  //l'user appuie sur une touche
    //code à executer
  }

Problématique de la double touche

Problème : nous avons besoin de savoir lorsque l’utilisateur appuie à la fois sur "ctrl" et une lettre. Or, l’événement de base ne permet de le faire que pour une seule touche à la fois
Solution : créer une variable qui sait si ctrl est actuellement appuyé ou non


  var isCtrl = false; //la touche commence "non enfoncée"

  //l'evenement "onkeyup" est appelé à chaque fois qu'une touche est relachée.
  document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;  //l'user relâche la touche ctrl (qui a le code 17). La variable passe a False
  }

  //l'evenement "onkeydown" est appelé à chaque fois qu'une touche est pressée.
  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
    }
  }

Gestion des actions en elle-même

J’ai géré ci dessous 5 raccourcis :

  • ctrl+b, pour mettre un texte en gras
  • ctrl+i, pour mettre un texte en italique
  • ctrl+l (L minuscule), pour faire un lien interne
  • ctrl+m pour mettre le texte entre {{ }} et faire un modèle
  • ctrl+u, pour souligner un texte

D’autres sont ajoutables à volonté, attention juste à ne pas utiliser des lettre dont vous vous servez souvent en édition pour vos raccourci (par exemple ctrl+x/c/V pour couper/copier/coller)

(sera mis dans la fonction d’onKeyDown)


    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
            insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
            insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
            insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
            insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
            insertTags('<u>','</u>', 'souligné');
            return false
	    break
       }
     }

Résultat final

Pour les flemmards et ceux qui ont peur d’en oublier un morceau, le code complet ci dessous; recopiable tel quel :


function keyboardShortcuts() {

  var isCtrl = false;

  document.onkeyup=function(e) { //l'user relâche la touche ctrl. La variable passe a False
    if(e.which == 17) isCtrl=false;
  }

  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
      return;
    }

    //gestion des ctrl+lettre que l'on veux ajouter.
    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
	    insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
	    insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
	    insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
	    insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
	    insertTags('<u>', '</u>', 'souligné');
            return false
	    break
       }
     }
  }
  return true
}

//la fonction qui gère tous les appel de fonctions (du moins dans mes divers billets :)
//!\ CELA VEUX DIRE QU'IL FAUT FUSIONNER AVEC LA FONCTION main() EXISTANTE, SI VOUS EN AVEZ UNE /!\
function main() {
  // [...  autres fonctions  ... ]

   if (wgAction == "edit" || wgAction == "submit")  { //à n'appeller que si en mode edition, sinon c'est inutile
      keyboardShortcuts()
   }
}

addOnloadHook(main)

Et Voili ! Comme d’habitude, n’oubliez pas de forcer le rafraichissement du monobook (ou vector) après avoir sauvegardé.

Source : Ce billet sur Lixya.org ; et un merci à Phe pour le coup de main :)

Edit : retiré un "]" qui trainait au milieu du code – forcement, ça marche mieux maintenant – désolé :(

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , | 2 Comments »

Personnalisons Wikipédia : vous avez un nouveau message

Publié par DarkoNeko le 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 la suite »

Publié dans Personnalisons Wikipédia | Tagué: , , , , , | 9 Comments »

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

Publié par DarkoNeko le 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 la suite »

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , | Commentaires fermés

Personnalisons Wikipédia : ajouter des liens

Publié par DarkoNeko le 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 la suite »

Publié dans Personnalisons Wikipédia | Tagué: , , , , , | 10 Comments »

Personnalisons Wikipédia : introduction

Publié par DarkoNeko le 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 la suite »

Publié dans Personnalisons Wikipédia | Tagué: , , , , , , | 6 Comments »

 
Suivre

Recevez les nouvelles publications par mail.

Joignez-vous à 410 followers