support « Besoin d'aide «

Implémentation de You are Here

Previous Next Index

Owner

Gérard

Progress

Workflow

Support request

Status

Problem has been recorded

Submission on Oct. 10 2010 by Gérard

Dans presque tous les skins de référence le fichier template.php comprend une fonction qui permet de spécifier l'onglet courant.

" // implement the "you are here" feature for tabs
// some color declarations to could have been defined in CSS style sheet only,
// but it's more convenient to have every stuff being defined in the same place isn't it ?
// note : this version handles horizontal drop down menu capability
if($focus = Page::top_focus()) { echo ..........etc "

Du coup si on veut modifier l'apparence de l'onglet courant via le fichier monskin.css c'est soit assez compliqué, voire impossible (mais je suis assez mauvais en php et css).
En fait je ne sais pas s'il faut écrire une règle pour .focus ou .current ou autre. Aprés moult tentatives, je n'y suis toujours pas arrivé.
Merci de votre aide.
Gérard.

Alexis Raimbault	on Oct. 11 2010 Gérard, le bout de script que tu donnes en exemple ne vient pas de la référence, mais du thème "Mu" que j'ai proposé. Cette partie du thème est d'autant plus complexe qu'elle peut prendre en charge le menu horizontal déroulant, autre contribution de ma part. Etant donné la complexité, j'ai mis des commentaires supplémentaires, dont `// this handles focused tab (=> you are here)` ce qui regroupe les selecteurs de l'onglet courrant, et `// this handles focused tab while hovered` ce qui regroupe les selecteurs de l'onglet courant, survolé par la souris. Je dis LES selecteurs car dans la référence les règles concernent tantôt la balise "a" tantôt "a span" Dans le thème Mu, il faut ensuite définir tes propriétés perso sous le commentaire `//=> properties` . Le thème ne faisant en exemple que des changements de couleurs. l'extension Firebug te serait très utile pour mettre au point tes règles CSS. Alexis Raimbault webmaster free-lance
Bernard Paques	on Oct. 10 2010 Gérard, Agnès, la difficulté réside dans la désignation de l'onglet courant. Yacs ne donne pas un style particulier à l'onglet courant, dont les détails de mise en page pourraient être réglés par CSS. A la place, il donne un identifiant à chaque onglet (dérivé des identifiants des sections concernées). Ensuite, des règles CSS sont créées dynamiquement dans `template.php` pour l'onglet courant, désigné par son identifiant. Par exemple, sur cette page de yacs.fr, les onglets sont définis par les balises suivantes : <div class="tabs"><ul> <li id="tab_section_185"><a href="/section-185-yacs" class="section_185"><span class="first">YACS</span></a></li> <li id="tab_section_189"><a href="/section-189-documentation" class="section_189"><span>Documentation</span></a></li> <li id="tab_section_401"><a href="/section-401-support" class="section_401"><span>Support</span></a></li> <li id="tab_section_191"><a href="/section-191-communaute" class="section_191"><span class="last">Communauté</span></a></li> </ul></div> L'intérêt des onglets nommés individuellement est de pouvoir régler le CSS séparément pour chacun d'eux, avec des images de fond différentes par exemple. Ensuite, dans le `template.php`, si la section courante est par exemple la 401, il est possible de générer dynamiquement des règles CSS pour l'onglet, pour le lien, ou pour le libellé qu'il contient, en les désignant respectivement par : `li#tab_section_401` `li#tab_section_401 a` `li#tab_section_401 a span` Là encore, le fait de pouvoir désigner finement chacun des composants de la barre des onglets, et de le faire dans du PHP, permet toutes les possibilités. Pour obtenir l'identifiant de l'onglet courant, il faut appeler la fonction `Page::top_focus()`. Dans notre exemple cette fonction retournerait l'identifiant "`tab_section_401`". Sur cette base on peut générer, en PHP, des règles particulières comme avec le code générique suivant : // implement the 'you are here' feature if($focus = Page::top_focus()) { echo "\t".'<style type="text/css" media="screen">'."\n" ."\n" ."\t\t".'li#'.$focus.' {'."\n" ."\t\t\t".'/* CSS pour onglet complet /'."\n" ."\t\t".'}'."\n" ."\n" ."\t\t".'li#'.$focus.' a {'."\n" ."\t\t\t".'/ CSS pour le lien entier /'."\n" ."\t\t".'}'."\n" ."\n" ."\t\t".'li#'.$focus.' a span {'."\n" ."\t\t\t".'/ CSS pour le libellé du lien */'."\n" ."\t\t".'}'."\n" ."\n" ."\t".'</style>'."\n"; } Je comprend, bien sûr, que cette grande liberté requière des compétences PHP et que, du point de vue CSS et HTML, tout ceci soit assez complxe à mettre en oeuvre. Mais avec un exemple de code générique, ce devrait être plus simple à mettre en oeuvre, non ? Alexis Raimbault - on Oct. 11 2010 Bernard Paques : Certes l'id unique par onglet permet la personalisation maximum. Cependant une petite classe .current sur l'onglet actif, serait plus simple pour de nombreux sites qui ne demandent pas autant de personnalisation, et il me semble que cela ne serait pas incompatible avec la personnalisation par id. J'ajouterai ça à mon menu horizontal pour voir (qui est une réécriture de page::tabs) Alexis Raimbault webmaster free-lance
Agnès Rambaud	on Oct. 10 2010 Je ne sais pas exactement ce que tu veux obtenir, mais pour ma part, j'ai plusieurs fois modifié - pas supprimé - les règles du template : pour changer le background, la couleur de police, ajouter ou supprimer un border. Le tout en complément et en cohérence avec le css puisque les règles qui sont définies dans le template ne sont pas dans le css. Ceci dit, si on pouvait tout balancer via css, se serait effectivement bien plus clair ! Agnès Il n'y a pas de problèmes, que des solutions.
Gérard	on Oct. 10 2010 Bonjour Agnès et Merci pour cette réponse rapide, J'ai bien essayé par exemple en désactivant le style donné par yacs.css et également en désactivant les lignes correspondantes dans le template.php. Mais ensuite je ne sais pas quelle class correspond à l'onglet courant, soit div.tabs li a:hover span ou div.tabs li a.current span ou encore div.tabs li a:focus; Je suis arrivé à donner aux onglets presque l'apparence que je veux, la seule chose que je n'arrive à faire c'est la modification pour l'onglet courant. A+ Gérard
Agnès Rambaud	on Oct. 10 2010 Salut Gérard. As-tu essayé de modifier également les règles qui sont déclarées dans le template pour arriver à tes fins ? Agnès Il n'y a pas de problèmes, que des solutions.
Gérard	on Oct. 10 2010 La page a été créée

Previous Next Index