Community « Le forum « Besoin d'aide «
Le mystère des onglets du style Digital
Comment modifier le comportement de l'onglet de la page qui a le focus dans le skin Digital ?
Les onglets du skin Digital utilisent un truc bien habile pour changer leur apparence quand on les survole (hover) : l'image en background se déplace !
En fait, une seule image (tabs.gif) sert à afficher le côté droit et le côté gauche de l'onglet, en trois couleurs différentes, selon qu'elle est positionnée à droite, à gauche, en haut, en bas, au milieu, etc... Un truc astucieux pour ne charger qu'une seule image et augmenter la rapidité d'affichage (j'imagine). Faut voir le CSS et l'image pour bien saisir le truc.
Ma question est celle-ci : pourquoi l'onglet de la page qui a le focus (par exemple l'onglet de la page d'accueil quand on est en train de regarder la page d'acceuil) a-t-il un comportement différent et où ce comportement est-il défini.
Par comportement différent, je veux dire que la couleur de l'onglet est différente (c'est donc une zone différente de l'image tabs.gif qui est affichée) et la couleur de la police n'est pas déterminée par la même règle de style (#tabs li a span).
J'ai fouillé toute la feuille de style et les autres fichiers que je pensais être pertinents mais je n'ai pas trouvé ce qui détermine le comportement et l'affichage de l'onglet de la page qui a le focus.
Quelqu'un peut-il m'aider à résoudre ce mystère et me pointer vers le code qui fait cette magie ?
En fait, une seule image (tabs.gif) sert à afficher le côté droit et le côté gauche de l'onglet, en trois couleurs différentes, selon qu'elle est positionnée à droite, à gauche, en haut, en bas, au milieu, etc... Un truc astucieux pour ne charger qu'une seule image et augmenter la rapidité d'affichage (j'imagine). Faut voir le CSS et l'image pour bien saisir le truc.
Ma question est celle-ci : pourquoi l'onglet de la page qui a le focus (par exemple l'onglet de la page d'accueil quand on est en train de regarder la page d'acceuil) a-t-il un comportement différent et où ce comportement est-il défini.
Par comportement différent, je veux dire que la couleur de l'onglet est différente (c'est donc une zone différente de l'image tabs.gif qui est affichée) et la couleur de la police n'est pas déterminée par la même règle de style (#tabs li a span).
J'ai fouillé toute la feuille de style et les autres fichiers que je pensais être pertinents mais je n'ai pas trouvé ce qui détermine le comportement et l'affichage de l'onglet de la page qui a le focus.
Quelqu'un peut-il m'aider à résoudre ce mystère et me pointer vers le code qui fait cette magie ?
Bernard from nearby-an-airport Associate, 6927 posts |
Si vous n'avez rien trouvé dans les feuilles de style, c'est que l'information recherchée est ailleurs... Plus exactement, ce qui est dynamique (puisque changeant d'une page à l'autre) est généré, à la volée, par script PHP. Un coup d'oeil au fichier template.php de l'un des skins de référence vous confirmera que c'est bien là que ça se passe.Le principe est d'avoir des onglets nommés, tous placés dans un container nommé lui aussi. Ce container, appelé div#tabs, permet de définir l'apparence des onglets non sélectionnés.Ensuite, le script d'affichage d'une page indique dans la variable $context['current_focus'] l'identifiant de la section en cours, et celui des sections parentes.Le script de rendu visuel, template.php, utilise cette information dynamiquement pour modifier l'aspect visuel de l'onglet associé à la section en cours.Notez que la variable $context['current_focus'] est aussi utilisée pour construire le menu de navigation contextuelle sur le côté de la page.
|
Lasares from Montréal ou Chambly, Québec 781 posts |
Bernard : merci ! Non seulement vous avez résolu mon mystère d'onglet, mais en même temps celui du "the 'you are here' feature" dans le template.php du skin Digital.J'ai pas été assez vite pour mettre les 2 ensemble et résoudre moi-même l'énigme, mais je suis épaté par la puissance et la subtilité que permet yacs. |
Edit
Delete
