Pitchoune
11/07/2005, 20h18
Introduction
Comme beaucoup d'autres systèmes dans vBulletin, le système de Styles vBulletin fonctionne autour d'un système d'héritage (parent / enfant).
Cela signifie que vous pouvez créer un nombre illimité de styles qui peuvent servir sur votre forum, les les personnalisations créée sur un style « parent » sera répandue sur les styles « enfants ».
Exemple d'héritage
Le concept d'héritage comme utilisé par les styles vBulletin 3 est la meilleure illustration avec un exemple d'utilisation commune de ce système.
Plusieurs propriétaires de sites souhaiteraient personnaliser l'affichage de leur installation de vBulletin pour que le style aille avec le reste du site. Ceci est normalement réalisé en modifiant les couleurs utilisés par vBulletin, et en modifiant les templates « header » et « footer ».
Laissons-nous imaginer que nous souhaitons personnaliser vos templates header et footer, mais nous souhaitons aussi offrir trois schémas de couleurs différents pour vos visiteurs au choix. Pour le nommer, nous choisirons ces styles « Rouge », « Vert » et « Bleu ».
Nous pouvons créer ces trois nouveaux styles, en nommant un « Bleu », un autre « Vert » et un dernier « Rouge », puis personnaliser leurs templates header et footer dans chaque style. Ceci peut être la parfaite solution valide, mais a un sérieux désavantage, est que si nous décidons de modifier le code HTML du template personnalisé « header », nous devons aller et modifier le template dans chacun de nos trois styles individuels.
http://forum.vbulletin-fr.org/tutorial/styles/example_three_styles.png
Une solution pour une meilleure gestion est de créer un simple nouveau style, qu'on appelera « Header / Footer personnalisé » et de personnaliser les templates header et footer dans ce style.
http://forum.vbulletin-fr.org/tutorial/styles/example_parent_style.png
Maintenant afin d'offrir aux visiteurs du site les trois variantes de couleurs que nous souhaitons, nous créons les styles « Rouge », « Vert » et « Bleu » en tant que styles enfants du style « Header / Footer personnalisé ».
http://forum.vbulletin-fr.org/tutorial/styles/example_child_styles.png
Tandis que ceci est qu'un très simple exemple, impliquer seulement le schéma des couleurs du site et les templates header et footer, le système de styles vBulletin vous permet de personnaliser individuellement tous les templates et tous les attributs CSS d'un style, et chacun de ces attributs personnalisés peut être hérité par tout style enfant.
Dans la prochaine section, nous examinerons la mécanique derrière ce système afin de mieux comprendre la façon d'utiliser les styles vBulletin le plus efficacement.
Mécaniques d'héritage
Dans le système de styles vBulletin, chaque élément d'un style peut être personnalisé à partir d'une valeur par défaut de vBulletin, et chaque personnalisation sera hérité par tout style enfant d'un style sur lequel des modifications ont été apportées, à moins que la valeur ne soit nouvellement personnalisé dans le style enfant.
Afin d'expliquer ceci en simples termes, laissez-nous assumer qu'un style vBulletin est consisté de [x] éléments individuels, qui comprend la couleur de l'arrière-plan, une couleur de texte, une famille de police et quelques templates. Pour cet exemple, nous allons représenter le contenu d'un style comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>
En utilsant l'exemple des templates header et footer personnalisés, nous utilisons notre première apparence dans l'héritage des styles (voir ci-dessus), nous pouvons imaginer ce que représente le style « Header / Footer personnalisé » comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »
#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>
Dans cet exemple, les objets qui ont été personnalisés dans un style sont visibles en rouge. Vous pouvez voir que les valeurs de la couleur de l'arrière-plan, du texte et de la famille de police sont toutes visibles en noir, ce qui signifie que les valeurs n'ont pas été modifiées des valeurs par défaut, tandis que les templates header et footer sont visibles en rouge, ce qui signifie qu'ils ont été personnalisés, et et ainsi remplace le contenu par défaut.
Nous allons ajouter maintenant la branche finale de l'arbre du style de notre exemple précédent, le style « Bleu ».
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFFFF10pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>
Ici, nous pouvons voir les valeurs de la couleur de l'arrière-plan et celle du texte ont été personnalisés, et sont donc visibles en rouge, tandis que la valeur de la famille de police n'a pas été personnalisé et donc hérite des valeurs de vBulletin par défaut. Cependant, les templates header et footer ont été personnalisés dans le style parent « Header / Footer personnalisé », et donc leurs valeurs sont hérités dans le style « Bleu ». Cette héritage est visible de couleur orange.
En outre, si nous décidons maintenant de personnaliser le template header dans le style « Bleu », nous devons avoir quelque chose comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>
Ici, nous pouvons voir que les templates header et footer personnalisés (rouge) dans le style « Bleu » remplace pas seulement le template header par défaut, mais aussi le template personnalisé header de son style parent « Header / Footer personnalisé », tandis que le template footer est toujours hérité de son parent.
Pour illustrer l'abilité du système de style vBulletinde permettre un niveau infini théorique de relations parent / enfant entre les styles, nous allons maintenant ajouter un style enfant au style « Bleu », auquel on va définir la taille de la police pour qu'elle soit plus large. Nous l'appelerons « Grosse Police Bleu ».
http://forum.vbulletin-fr.org/tutorial/styles/example_big_blue.png
Dans ce style, nous allons personnaliser l'atribut de la taille de la police pour être plus large que la normale, qui résultera en un diagramme d'héritage de styles comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>« Grosse Police Bleu »#0000FF#FFFF0014pt, verdana, arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>
Ici, vous pouvez voir que la taille de la police par défaut est hérité par les styles « Header / Footer personnalisé » et « Bleu », mais est remplacé par la version personnalisé par le style « Grosse Police Bleu ».
Nous allons personnaliser la famille de police dans le style « Header / Footer personnalisé », la modification sera automatiquement hérité dans le style « Bleu »mais pas dans le style « Grosse Police Bleu » car il a sa propre version.
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>« Grosse Police Bleu »#0000FF#FFFF0014pt, verdana, arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>
De plus, nous allons maintenant réinitialiser le template personnalisé footer dans le style « Header / Footer personnalisé », ses styles enfants hériteront automatiquement de la valeur par défaut.
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est le template « footer » par défaut !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est le template « footer » par défaut !</div>« Grosse Police Bleu »#0000FF#FFFF0014pt, verdana, arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est le template « footer » par défaut !</div>
Ce système ne vous permet pas de modifier la valeur de vBulletin par défaut pour tout objet, donc vous pouvez réinitialiser n'imporye quel personnalisation de votre choix à leur état original.
Ce diagramme illustre parfaitement le système de décision utilisé par vBulletin lors du chargement de chaque élément d'un style.
http://forum.vbulletin-fr.org/tutorial/styles/style_inheritance_chart.png
Comme beaucoup d'autres systèmes dans vBulletin, le système de Styles vBulletin fonctionne autour d'un système d'héritage (parent / enfant).
Cela signifie que vous pouvez créer un nombre illimité de styles qui peuvent servir sur votre forum, les les personnalisations créée sur un style « parent » sera répandue sur les styles « enfants ».
Exemple d'héritage
Le concept d'héritage comme utilisé par les styles vBulletin 3 est la meilleure illustration avec un exemple d'utilisation commune de ce système.
Plusieurs propriétaires de sites souhaiteraient personnaliser l'affichage de leur installation de vBulletin pour que le style aille avec le reste du site. Ceci est normalement réalisé en modifiant les couleurs utilisés par vBulletin, et en modifiant les templates « header » et « footer ».
Laissons-nous imaginer que nous souhaitons personnaliser vos templates header et footer, mais nous souhaitons aussi offrir trois schémas de couleurs différents pour vos visiteurs au choix. Pour le nommer, nous choisirons ces styles « Rouge », « Vert » et « Bleu ».
Nous pouvons créer ces trois nouveaux styles, en nommant un « Bleu », un autre « Vert » et un dernier « Rouge », puis personnaliser leurs templates header et footer dans chaque style. Ceci peut être la parfaite solution valide, mais a un sérieux désavantage, est que si nous décidons de modifier le code HTML du template personnalisé « header », nous devons aller et modifier le template dans chacun de nos trois styles individuels.
http://forum.vbulletin-fr.org/tutorial/styles/example_three_styles.png
Une solution pour une meilleure gestion est de créer un simple nouveau style, qu'on appelera « Header / Footer personnalisé » et de personnaliser les templates header et footer dans ce style.
http://forum.vbulletin-fr.org/tutorial/styles/example_parent_style.png
Maintenant afin d'offrir aux visiteurs du site les trois variantes de couleurs que nous souhaitons, nous créons les styles « Rouge », « Vert » et « Bleu » en tant que styles enfants du style « Header / Footer personnalisé ».
http://forum.vbulletin-fr.org/tutorial/styles/example_child_styles.png
Tandis que ceci est qu'un très simple exemple, impliquer seulement le schéma des couleurs du site et les templates header et footer, le système de styles vBulletin vous permet de personnaliser individuellement tous les templates et tous les attributs CSS d'un style, et chacun de ces attributs personnalisés peut être hérité par tout style enfant.
Dans la prochaine section, nous examinerons la mécanique derrière ce système afin de mieux comprendre la façon d'utiliser les styles vBulletin le plus efficacement.
Mécaniques d'héritage
Dans le système de styles vBulletin, chaque élément d'un style peut être personnalisé à partir d'une valeur par défaut de vBulletin, et chaque personnalisation sera hérité par tout style enfant d'un style sur lequel des modifications ont été apportées, à moins que la valeur ne soit nouvellement personnalisé dans le style enfant.
Afin d'expliquer ceci en simples termes, laissez-nous assumer qu'un style vBulletin est consisté de [x] éléments individuels, qui comprend la couleur de l'arrière-plan, une couleur de texte, une famille de police et quelques templates. Pour cet exemple, nous allons représenter le contenu d'un style comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>
En utilsant l'exemple des templates header et footer personnalisés, nous utilisons notre première apparence dans l'héritage des styles (voir ci-dessus), nous pouvons imaginer ce que représente le style « Header / Footer personnalisé » comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »
#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>
Dans cet exemple, les objets qui ont été personnalisés dans un style sont visibles en rouge. Vous pouvez voir que les valeurs de la couleur de l'arrière-plan, du texte et de la famille de police sont toutes visibles en noir, ce qui signifie que les valeurs n'ont pas été modifiées des valeurs par défaut, tandis que les templates header et footer sont visibles en rouge, ce qui signifie qu'ils ont été personnalisés, et et ainsi remplace le contenu par défaut.
Nous allons ajouter maintenant la branche finale de l'arbre du style de notre exemple précédent, le style « Bleu ».
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFFFF10pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>
Ici, nous pouvons voir les valeurs de la couleur de l'arrière-plan et celle du texte ont été personnalisés, et sont donc visibles en rouge, tandis que la valeur de la famille de police n'a pas été personnalisé et donc hérite des valeurs de vBulletin par défaut. Cependant, les templates header et footer ont été personnalisés dans le style parent « Header / Footer personnalisé », et donc leurs valeurs sont hérités dans le style « Bleu ». Cette héritage est visible de couleur orange.
En outre, si nous décidons maintenant de personnaliser le template header dans le style « Bleu », nous devons avoir quelque chose comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>
Ici, nous pouvons voir que les templates header et footer personnalisés (rouge) dans le style « Bleu » remplace pas seulement le template header par défaut, mais aussi le template personnalisé header de son style parent « Header / Footer personnalisé », tandis que le template footer est toujours hérité de son parent.
Pour illustrer l'abilité du système de style vBulletinde permettre un niveau infini théorique de relations parent / enfant entre les styles, nous allons maintenant ajouter un style enfant au style « Bleu », auquel on va définir la taille de la police pour qu'elle soit plus large. Nous l'appelerons « Grosse Police Bleu ».
http://forum.vbulletin-fr.org/tutorial/styles/example_big_blue.png
Dans ce style, nous allons personnaliser l'atribut de la taille de la police pour être plus large que la normale, qui résultera en un diagramme d'héritage de styles comme ceci :
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>« Grosse Police Bleu »#0000FF#FFFF0014pt, verdana, arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>
Ici, vous pouvez voir que la taille de la police par défaut est hérité par les styles « Header / Footer personnalisé » et « Bleu », mais est remplacé par la version personnalisé par le style « Grosse Police Bleu ».
Nous allons personnaliser la famille de police dans le style « Header / Footer personnalisé », la modification sera automatiquement hérité dans le style « Bleu »mais pas dans le style « Grosse Police Bleu » car il a sa propre version.
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est mon template « footer » personnalisé !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>« Grosse Police Bleu »#0000FF#FFFF0014pt, verdana, arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est mon template « footer » personnalisé !</div>
De plus, nous allons maintenant réinitialiser le template personnalisé footer dans le style « Header / Footer personnalisé », ses styles enfants hériteront automatiquement de la valeur par défaut.
*Couleur de l'arrière-planCouleur du texteFamille de policeTemplate « Header »Template « Footer »vBulletin par défaut#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est le template « header » par défaut !</p><div>Ceci est le template « footer » par défaut !</div>« Header / Footer personnalisé »#FFFFFF#00000010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » personnalisé !</p><div>Ceci est le template « footer » par défaut !</div>« Bleu »#0000FF#FFFF0010pt, verdana arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est le template « footer » par défaut !</div>« Grosse Police Bleu »#0000FF#FFFF0014pt, verdana, arial, helvetica, sans-serif<p>Ceci est mon template « header » pour le style « Bleu » !</p><div>Ceci est le template « footer » par défaut !</div>
Ce système ne vous permet pas de modifier la valeur de vBulletin par défaut pour tout objet, donc vous pouvez réinitialiser n'imporye quel personnalisation de votre choix à leur état original.
Ce diagramme illustre parfaitement le système de décision utilisé par vBulletin lors du chargement de chaque élément d'un style.
http://forum.vbulletin-fr.org/tutorial/styles/style_inheritance_chart.png