Utilisateur:Jd/Skin bépo - Historique des versions

Jd : /* Tooltips sur les liens du dock */

2010-02-13T03:14:58Z

Tooltips sur les liens du dock

@@ Ligne 38 : / Ligne 38 : @@
 </source>
-Dans le cas général, le ''trigger'' peut être n'importe de quel type, donc pas nécessairement un item de liste : il suffit qu'il ai la classe  {{c|trigger}} (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe {{c|tooltipContent}}. La portion de code jQuery associée à tout cela est à la fonction {{c|bepo_DockTooltips()}}.
+Dans la pratique, on a par exemple :
 Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.

Jd le 13 janvier 2010 à 23:32

2010-01-13T23:32:48Z

← Version précédente		Version du 14 janvier 2010 à 01:32
Ligne 3 :		Ligne 3 :
	Basée à l'origine sur le thème Cavendish, dépassé techniquement, la skin finale a été synchronisée avec la dernière version de Monobook (skin officielle de MediaWiki). Elle fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence et adapter les dimensions du site selon le contenu et la résolution écran. À ma connaissance, l'ensemble fonctionne dans tous les navigateurs modernes et se « dégrade » correctement en l'absence de JavaScript.		Basée à l'origine sur le thème Cavendish, dépassé techniquement, la skin finale a été synchronisée avec la dernière version de Monobook (skin officielle de MediaWiki). Elle fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence et adapter les dimensions du site selon le contenu et la résolution écran. À ma connaissance, l'ensemble fonctionne dans tous les navigateurs modernes et se « dégrade » correctement en l'absence de JavaScript.

	Pour les ''hack3rs'', les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont à parcourir avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js jquery-enhancements.js] ouvert, ce dernier contenant les divers ''hooks'' jQuery créés par mes soins.		Pour les ''hack3rs'', les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont à parcourir avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js jquery-enhancements.js] ouvert, ce dernier contenant les divers ''hooks'' jQuery créés par mes soins. Le fichier principal est {{c\|/dvorak/bepo.fr-web/htdocs/wiki/skins/Bepo.php}} (ftp).

	== TODO ==		== TODO ==

Jd : /* Ne pas afficher le titre d'une page */

2009-09-06T18:33:09Z

Ne pas afficher le titre d'une page

← Version précédente		Version du 6 septembre 2009 à 20:33
Ligne 21 :		Ligne 21 :
	=== Ne pas afficher le titre d'une page ===		=== Ne pas afficher le titre d'une page ===

	La fonction {{c\|bepo_DeleteTitles()}} permet de ~~spécifier certaines pages pour lesquelles~~ le titre de niveau <code>h1</code> ~~ne doit pas apparaître~~. C'est notamment le cas de l'accueil et de la page principale d'installation.		La fonction {{c\|bepo_DeleteTitles()}} permet de masquer le titre de niveau <code>h1</code> de certaines pages. C'est notamment le cas de l'accueil et de la page principale d'installation. Les pages concernées sont indiquées dans [[Pages sans titre]], à raison d'un titre par ligne. Commentaires autorisés, mais pas de formatage !

	=== ''Tooltips'' sur les liens du dock ===		=== ''Tooltips'' sur les liens du dock ===

Jd : /* {{c|jquery-enhancements.js}} : utilisation et astuces */

2009-08-28T14:36:40Z

{{c|jquery-enhancements.js}} : utilisation et astuces

← Version précédente		Version du 28 août 2009 à 16:36
Ligne 21 :		Ligne 21 :
	=== Ne pas afficher le titre d'une page ===		=== Ne pas afficher le titre d'une page ===

	La fonction ~~commentée~~ {{c\|bepo_DeleteTitles}} permet de spécifier certaines pages pour lesquelles le titre de niveau <code>h1</code> ne doit pas apparaître. C'est notamment le cas de l'accueil et de la page principale d'installation.		La fonction {{c\|bepo_DeleteTitles()}} permet de spécifier certaines pages pour lesquelles le titre de niveau <code>h1</code> 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 ===		=== ''Tooltips'' sur les liens du dock ===
Ligne 38 :		Ligne 38 :
	</source>		</source>

	Dans le cas général, le ''trigger'' peut être n'importe de quel type, donc pas nécessairement un item de liste : il suffit qu'il ai la classe {{c\|trigger}} (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe {{c\|tooltipContent}}. La portion de code jQuery associée à tout cela est à la fonction {{c\|bepo_DockTooltips}}.		Dans le cas général, le ''trigger'' peut être n'importe de quel type, donc pas nécessairement un item de liste : il suffit qu'il ai la classe {{c\|trigger}} (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe {{c\|tooltipContent}}. La portion de code jQuery associée à tout cela est à la fonction {{c\|bepo_DockTooltips()}}.

	Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.		Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.

Jd : /* {{c|jquery-enhancements.js}} : utilisation et astuces */

2009-08-28T14:36:05Z

{{c|jquery-enhancements.js}} : utilisation et astuces

← Version précédente		Version du 28 août 2009 à 16:36
Ligne 21 :		Ligne 21 :
	=== Ne pas afficher le titre d'une page ===		=== 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 <code>h1</code> ne doit pas apparaître. C'est notamment le cas de l'accueil et de la page principale d'installation.		La fonction commentée {{c\|bepo_DeleteTitles}} permet de spécifier certaines pages pour lesquelles le titre de niveau <code>h1</code> 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 ===		=== ''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 [http://craigsworks.com/projects/qtip/ qTip]. La déclaration se fait dans ~~<code>~~/skins/bepo.php~~</code>~~, en respectant une certaine structure munie d'identifiant et de classes génériques. ~~Les~~ ''tooltips'' étant des ~~<code>~~div~~</code>~~ standard, elles peuvent contenir tout type de contenu valide.		Le dock (barre supérieure) peut recevoir des liens pour lesquels sont affichés des ''tooltips'' (infobulles) avec l'aide de la librairie [http://craigsworks.com/projects/qtip/ qTip]. La déclaration se fait dans {{c\|/skins/bepo.php}}, en respectant une certaine structure munie d'identifiant et de classes génériques. Ces ''tooltips'' étant des {{c\|div}} standard, elles peuvent contenir tout type de contenu valide.

	La structure type est la suivante :		La structure type pour les tooltips du dock est la suivante :

	<source lang="html4strict">		<source lang="html4strict">
Ligne 38 :		Ligne 38 :
	</source>		</source>

	Le ''trigger'' peut ~~en fait~~ être n'importe de quel type, et pas ~~forcément dans~~ un item de liste : il suffit qu'il ai la classe ~~<code>~~trigger~~</code>~~ (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe ~~<code>~~tooltipContent~~</code>~~. La portion de code jQuery associée à tout cela est à la ~~section commentée par ''tooltips -- using the qTip library''~~.		Dans le cas général, le ''trigger'' peut être n'importe de quel type, donc pas nécessairement un item de liste : il suffit qu'il ai la classe {{c\|trigger}} (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe {{c\|tooltipContent}}. La portion de code jQuery associée à tout cela est à la fonction {{c\|bepo_DockTooltips}}.

	Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.		Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.

Jd le 27 août 2009 à 20:43

2009-08-27T20:43:53Z

← Version précédente		Version du 27 août 2009 à 22:43
Ligne 1 :		Ligne 1 :
	{{intro\|Le thème (''skin'', ''template'', …) {{c\|[http://bepo.fr/wiki/skins/bepo/ bepo]}} est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.}}		{{intro\|Le thème (''skin'', ''template'', …) {{c\|[http://bepo.fr/wiki/skins/bepo/ bepo]}} est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.}}

	Basée à l'origine sur le thème Cavendish ~~(Mozilla Wiki)~~, la skin finale a été synchronisée avec ~~les fonctionnalités de~~ la dernière version de Monobook (skin officielle de MediaWiki) et fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence. ~~Les~~ [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont ~~donc~~ à ~~étudier en lien~~ avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js 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~~.		Basée à l'origine sur le thème Cavendish, dépassé techniquement, la skin finale a été synchronisée avec la dernière version de Monobook (skin officielle de MediaWiki). Elle fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence et adapter les dimensions du site selon le contenu et la résolution écran. À ma connaissance, l'ensemble fonctionne dans tous les navigateurs modernes et se « dégrade » correctement en l'absence de JavaScript.

			Pour les ''hack3rs'', les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont à parcourir avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js jquery-enhancements.js] ouvert, ce dernier contenant les divers ''hooks'' jQuery créés par mes soins.

	== TODO ==		== TODO ==

Jd le 27 août 2009 à 20:29

2009-08-27T20:29:44Z

← Version précédente		Version du 27 août 2009 à 22:29
Ligne 1 :		Ligne 1 :
	~~''Quelques notes sur la skin bépo (<code>[http://bepo.fr/wiki/skins/bepo/ /skins/bepo/]</code>).''~~		{{intro\|Le thème (''skin'', ''template'', …) {{c\|[http://bepo.fr/wiki/skins/bepo/ bepo]}} est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.}}

	{{intro\|Le thème (''skin'', ''template'', …) « bepo » est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.}}

	Basée à l'origine sur le thème Cavendish (Mozilla Wiki), la skin finale a été synchronisée avec les fonctionnalités de la dernière version de Monobook (skin officielle de MediaWiki) et fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence. Les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont donc à étudier en lien avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js 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.		Basée à l'origine sur le thème Cavendish (Mozilla Wiki), la skin finale a été synchronisée avec les fonctionnalités de la dernière version de Monobook (skin officielle de MediaWiki) et fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence. Les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont donc à étudier en lien avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js 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.

Jd le 27 août 2009 à 20:21

2009-08-27T20:21:19Z

← Version précédente		Version du 27 août 2009 à 22:21
Ligne 1 :		Ligne 1 :
	''Quelques notes sur la skin bépo (<code>[http://bepo.fr/wiki/skins/bepo/ /skins/bepo/]</code>).''		''Quelques notes sur la skin bépo (<code>[http://bepo.fr/wiki/skins/bepo/ /skins/bepo/]</code>).''

	'''~~BUG Internet Explorer~~''' ~~: plus de jQuery~~ pour le ~~moment sous IE~~, ~~debug~~ en ~~cours~~. ~~Donne une idée du résultat sans JavaScript~~...		{{intro\|Le thème (''skin'', ''template'', …) « bepo » est une skin pour le logiciel MediaWiki, en vue d'une utilisation sur bepo.fr spécifiquement. Elle a été créée à l'occasion de la sortie de la version 1.0 de la disposition clavier.}}

	~~----~~

	Basée à l'origine sur le thème Cavendish (Mozilla Wiki), la skin finale a été synchronisée avec les fonctionnalités de la dernière version de Monobook (skin officielle de MediaWiki) et fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence. Les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont donc à étudier en lien avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js 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.		Basée à l'origine sur le thème Cavendish (Mozilla Wiki), la skin finale a été synchronisée avec les fonctionnalités de la dernière version de Monobook (skin officielle de MediaWiki) et fait un large usage de [http://www.jquery.com jQuery] pour créer, entre autre, des effets d'animation et de transparence. Les [http://bepo.fr/wiki/skins/bepo/main.css feuilles de styles] (ne pas oublier [[MediaWiki:Bepo.css]] et [[MediaWiki:Common.css]], qui sont dynamiques) sont donc à étudier en lien avec le fichier [http://bepo.fr/wiki/skins/bepo/jquery-enhancements.js 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.

Jd : /* Tooltips sur les liens du dock */

2009-08-26T00:26:22Z

Tooltips sur les liens du dock

← Version précédente		Version du 26 août 2009 à 02:26
Ligne 40 :		Ligne 40 :
	</source>		</source>

	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 <code>trigger</code> (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée à sa suite par un élément de classe <code>tooltipContent</code>. La portion de code jQuery associée est à la section ''tooltips -- using the qTip library		Le ''trigger'' peut en fait être n'importe de quel type, et pas forcément dans un item de liste : il suffit qu'il ai la classe <code>trigger</code> (on pourrait donc utiliser des icônes…). L'infobulle doit être déclarée ''à sa suite'' par un élément de classe <code>tooltipContent</code>. La portion de code jQuery associée à tout cela est à la section commentée par ''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).		Évidemment, la technique peut-être mise à profit ailleurs que dans le dock ; mais il faudra faire attention aux identifiants et sans doute écrire un nouveau ''hook'' jQuery — peut-être en rationalisant le style associé (cf. la doc officielle) pour éviter de retaper ''grosso modo'' deux fois la même chose.

Jd : /* Utilisation et astuces */

2009-08-26T00:21:57Z

Utilisation et astuces

← Version précédente		Version du 26 août 2009 à 02:21
Ligne 19 :		Ligne 19 :
	* Des polices anormalement petites par-ci par-là. Essentiellement lié à des modèles qui déclarent en durs des styles non modifiables par une CSS externe (pas de classe ou d'identifiant définis). À terme, il faudra externaliser ces styles via des classes et ids, et les gérer par [[MediaWiki:Monobook.css]], [[MediaWiki:Common.css]] et les CSS du thème Bepo. Je l'ai fait pour quelques modèles (exemple, {{m\|touche}}).		* Des polices anormalement petites par-ci par-là. Essentiellement lié à des modèles qui déclarent en durs des styles non modifiables par une CSS externe (pas de classe ou d'identifiant définis). À terme, il faudra externaliser ces styles via des classes et ids, et les gérer par [[MediaWiki:Monobook.css]], [[MediaWiki:Common.css]] et les CSS du thème Bepo. Je l'ai fait pour quelques modèles (exemple, {{m\|touche}}).

	== ~~Utilisation~~ et astuces ==		== {{c\|jquery-enhancements.js}} : utilisation et astuces ==

	=== Ne pas afficher le titre d'une page ===		=== Ne pas afficher le titre d'une page ===

Utilisateur:Jd/Skin bépo - Historique des versions

Jd : /* Tooltips sur les liens du dock */

Jd le 13 janvier 2010 à 23:32

Jd : /* Ne pas afficher le titre d'une page */

Jd : /* {{c|jquery-enhancements.js}} : utilisation et astuces */

Jd : /* {{c|jquery-enhancements.js}} : utilisation et astuces */

Jd le 27 août 2009 à 20:43

Jd le 27 août 2009 à 20:29

Jd le 27 août 2009 à 20:21

Jd : /* Tooltips sur les liens du dock */

Jd : /* Utilisation et astuces */

Jd : /* Tooltips sur les liens du dock */

Jd : /* Ne pas afficher le titre d'une page */

Jd : /* {{c|jquery-enhancements.js}} : utilisation et astuces */

Jd : /* {{c|jquery-enhancements.js}} : utilisation et astuces */

Jd : /* Tooltips sur les liens du dock */

Jd : /* Utilisation et astuces */