Utilisateur:Jd/Skin bépo

Quelques notes sur la skin bépo (/skins/bepo/).

Basée à l'origine sur le thème Cavendish (Mozilla Wiki), la skin finale fait un large usage de jQuery pour créer des effets d'animation et de transparence, ainsi que pour manipuler le DOM à la volée. Les feuilles de styles sont donc à étudier en lien avec le fichier jquery-enhancements.js, qui contient les divers hooks JavaScript créés par mes soins. Normalement, l'ensemble fonctionne dans les navigateurs modernes et se dégrade correctement en l'absence de JavaScript.

TODO

pied-de-page
d'autres bannières pour l'en-tête
cf. section Avertissements

Avertissements

Un certain nombre de petits bugs subsistent en raison de particularités liées au thème actuel, Monobook. Ils ne pourront être résolus que lorsque le thème par défaut sera « Bepo ».

Sur certaines pages, l'usage actuel du mot-clé DISPLAYTITLE entre en conflit avec une manipulation jQuery visant à masquer le titre de la page. À supprimer à terme.
Une rubrique RECHERCHER inutile dans le menu du fait de MediaWiki:Sidebar. À supprimer à terme.
Des polices anormalement petites. Cela est lié à des modèles qui déclarent des styles non modifiables par une CSS externe (pas de classe ou d'identifiant). À terme, externaliser ces styles et les gérer par MediaWiki:Monobook.css, MediaWiki:Common.css et les CSS de Bepo.

Utilisation et astuces

Ne pas afficher le titre d'une page

La fonction commentée par delete some specific titles permet de déclarer certaines pages pour lesquelles le titre de niveau h1 ne doit pas apparaître. C'est notamment le cas de l'accueil et de la page principale d'installation.

Tooltips sur les liens du dock

Le dock (barre supérieure) peut recevoir des liens pour lesquels sont affichés des tooltips (infobulles) avec la librairie qTip. La déclaration se fait dans /skins/bepo.php, en respectant une certaine structure munie d'identifiant et de classes génériques. Les tooltips étant des div standard, elles peuvent contenir tout type de contenu valide.

La structure type est la suivante :

<li id="trigger-[nom du trigger]">
  <a href="#" class="trigger" title="xxx">Mon trigger</a>
  <div class="tooltipContent">
    ... contenu du tooltip
  </div>
</li>

Le trigger peut en fait être n'importe de quel type, et pas forcément dans un item de liste : il suffit qu'il est la classe trigger (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée à sa suite par un élément de classe tooltipContent. La portion de code jQuery associée est à la section tooltips -- using the qTip library .

Évidemment, la technique peut-être mise à profit ailleurs que dans le dock, mais il faudra faire attention aux identifiants et écrire un nouveau hook jQuery, peut-être en rationalisant le style associé (cf. la doc officielle).