Modification d'un skin

Bonjour,

je suis en train de modifier un skin (dérivé de digital) et je bute toujours sur un problème. Je veux modifier le menu horizontal à onglets (celui des sections en gros) et je n'arrive pas à modifier l'apparence de l'onglet actif (celui sur lequel on se trouve)
Quand j'utilise web developper (avec firefox) l'information du style css correspondant me donne des infos sur le fichier .css classique dérivé du style initial mais en plus il me donne aussi une référence par rapport à un autre style qui a l'air standard:

" http://localhost/yacs/sections/view.php?id=35&action=actualites ul li#tab_section_35 a span (line 11) { background-x-position: 100%; background-y-position: -44px; color: #003399; "

Il précise également que c'est un Embedded Style.
La partie que je veux modifier est justement la couleur et la ligne 11 mais je ne trouve nulle part ce fichier d'embedded style ou l'emplacement où se trouve cette ligne !.
Quelqu'un aurait-il une idée ?

Page bottom

Agnès from le Grésivaudan (grenoble-chambéry) Associate, 2007 posts	Reply · Quote on Apr. 30 As-tu regardé dans le template.php ? Agnès Il n'y a pas de problèmes, que des solutions.
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	Reply · Quote on Apr. 30 Oui, comme Agnès le souligne, une partie de la réponse à ta question se trouve dans `template.php` vers la ligne 85 de l'original : c'est ce que Bernard a appelé le `'you are here' feature`, puisque ça change la couleur de l'onglet en fonction de la section "où l'on est". Ce gentil "truc" déplace l'image de fond des onglets de haut en bas ou vice-versa, selon que l'onglet désigne la section "qui a le focus" ou pas. Cette image de fond des onglets est `tabs.gif` du dossier `images` de ton skin, si tu ne l'as pas changée dans le CSS. Car c'est dans le CSS qu'on indique quelle image de fond utiliser, vers les lignes 875 et ss. dans l'original, à deux endroits : `#tabs li a` et `#tabs li a span`. Si tu changes le nom de l'image pour une autre, cette nouvelle image devra s'inspirer de `tabs.gif` pour fournir l'effet du `'you are here' feature`. Alternativement, tu laisse le CSS intact et tu crée tout simplement une image `tabs.gif` à ton goût. Changer les couleurs est simple avec un programme de dessin (Photofiltre 6 est efficace et gratuit), mais tu peux avoir plus de travail à faire pour créer une image aux bonnes dimensions si tu as changé la police ou les marges de tes onglets. Je sais tout ça d'expérience pour avoir tant "buché" mes premiers skins. Alors je sympathise et je t'épargne quelques heures de travail de détective. Bon succès ! On a si peu d'idée de ce qui est possible...
Hardboiled from le Web Parisien 175 posts	Reply · Quote on Apr. 30 Agnes et Lazares Un Grand Merci à tous les deux. C'était bien dans le fichier template.php que se trouvait mon problème. Du coup, j'ai un autre souci car j'ai effectivement changé le style css dans le fichier .css en particulier pour `#tabs li a:hover { /* change tab background on hovering */ background: url("images/down_arrow.gif") no-repeat center top; color:#fc3;` Ce style marche bien au survol de la souris Le problème c'est que je voudrais avoir le même style pour l'onglet actif et je ne sais pas quelle syntaxe utiliser dans le fichier template.php pour y intégrer cette image. Pour l'instant j'ai réussi à changer la couleur du fond, mais c'est tout (en mettant."\t\t\t".'background: #000;'."\n" ."\t\t\t".'color: #fc3;'."\n" et l'image `down_arrow.gif` n'apparaît pas encore. Pour ce qui est de Photofiltre, c'est le logiciel que j'utilise. Si j'abusais, une petite aide pour intégrer ce style dans template.php serait la bienvenue. Merci d'avance. Gérard
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	Reply · Quote on Apr. 30 Il est impossible, dans l'état de ce skin, de spécifier par CSS une image différente pour l'onglet actif. Je ne sais pas de quoi a l'air ton image `down_arrow.gif` mais tu peux tenter de l'intégrer à `tabs.gif` dans la portion de l'image réservée à l'onglet actif. Alternativement, tu peux modifier le code du `'you are here' feature` pour qu'il choisisse une image différente pour l'onglet actif, au lieu de simplement déplacer l'image `tabs.gif`. Examine le code dans `template.php` : il est simple à comprendre, il écrit tout simplement une règle CSS pour `#tabs li a` et une autre pour `#tabs li a span`. D'ailleurs, je ne vois pas trop pourquoi ça n'a pas été fait comme ça dès le départ. À part démontrer de la virtuosité, je ne vois guère d'avantage à déplacer une image de fond plutôt que d'en proposer une nouvelle, si ce n'est qu'il fut une époque où on se préoccupait beaucoup de minimiser le téléchargement d'images. Une troisième solution, plus complexe, mais plus universelle, serait de doter tes onglets d'un sélecteur `class` qui varierait selon que l'onglet a le focus ou non. J'ai bien quelques idées là-dessus, mais après quelques expérimentations rapides, je n'ai toujours rien de concret à suggérer. Si tu es habile en PHP, tu peux explorer cette voix, qui passe probablement par la fonction `&build_list` de #skin_skeleton.php`. Ce n'est pas la première fois qu'on aborde cette question. Si quelqu'un trouve une solution pour ajouter ce ##class="in_focus"` à l'onglet qui a le focus, ça pourrait même être suggéré comme un ajout à la distribution standard. On a si peu d'idée de ce qui est possible...
Agnès from le Grésivaudan (grenoble-chambéry) Associate, 2007 posts	Reply · Quote inspired from Lasares on Apr. 30 Est-ce que ajouter un identifiant unique au lien quand on appelle page::tabs() ne serait pas un bon début de piste ? (Christian, si tu pouvais apporter ta pierre )
Agnès from le Grésivaudan (grenoble-chambéry) Associate, 2007 posts	Reply · Quote inspired from Lasares on Apr. 30 Alain : " D'ailleurs, je ne vois pas trop pourquoi ça n'a pas été fait comme ça dès le départ. " De ce que j'en ai compris, ça allège quand même pas mal les images (lus bon nombre de trucs plus ou moins clairs à ce sujet, quand j'ai planché sur ce même problème). Ce qui m'interroge le plus, c'est pourquoi dans le template, et pas tout dans le css ?
Hardboiled from le Web Parisien 175 posts	Reply · Quote on Apr. 30 Tout à fait d'accord ! La vraie question : Pourquoi ne pas tout traiter dans le fichier .css Bon je m'y remets pour modifier mon skin.
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	Reply · Quote on Apr. 30 Parce que le CSS a besoin d'un sélecteur. Il doit s'adresser à un élément HTML, auquel on peut ajouter un identifiant ou une classe spécifique, par exemple, < div id=section_4 class=in_focus >. Ainsi, on peut dire par CSS que cette div, de cet id, de cette class, a tel style. Mais il aura toujours ce même style. Le problème ici, c'est que, si l'id de la section est permanent, il n'en est pas de même du fait que cette section ait ou non le focus. Il s'agit non pas de modifier le style (attribué par le CSS qui reste permanent), mais bien l'attribution d'une valeur particulière à l'identifiant class. En pratique, l'onglet apparaît à chaque page, mais on veut qu'il soit stylé différemment selon qu'on le voit à partir de telle ou telle page. Il faut donc changer la valeur de sa class selon une condition. Cette condition doit être vérifiée dynamiquement. Dans `template.php`, elle est exprimée comme suit : if($focus = Page::top_focus()) J'ai presque la solution finale, mais je ne parviens pas à formuler une condition équivalente dans `skin.php` (dérivation de `skin_skeleton.php`). Peut-être parce que l'ordre d'exécution des scripts fait en sorte que le focus n'existe pas enccore au moment de l'exécution de `skin.php` ? Peut-être que Tof pourrait nous sortir de l'impasse. Voici où j'en suis : je remplace le code des lignes 1658 et ss. de `skin_skeleteon.php` par ce qui suit ou d'autres formulations équivalentes mais `$context['current_focus'][0]` qui est utilisé par `Page::top_focus()` ne semble pas exister dans mon univers... // pass elements ids of the site bar $id = ''; if(($variant 'tabs') && $type) { $iffocus = 'tab_'.$type; if($iffocus Page::top_focus()) { $id = ' id="tab_'.$type.'" class='.'"has_focus'.'"'; } else { $id = ' id="tab_'.$type.'" class='.'"off_focus'.'"'; } $type = 'basic'; } On a si peu d'idée de ce qui est possible...
Bernard from nearby-an-airport Associate, 6581 posts	Reply · Quote on May 11 Gérard, comme expliqué par Alain plus haut, la difficulté est d'ajouter quelques régles de style pour l'onglet sélectionné, et seulement pour celui-là. En plus, pour des raisons d'efficacité, Yacs cache le contenu des onglets d'une page à l'autre, ce qui fait que la solution "simple" d'ajout d'une classe de style pour l'onglet sélectionné ne marche pas. La solution mise en oeuvre consiste à repérer l'identifiant de l'onglet sélectionné, et à générer dans le fichier `template.php` les quelques directives de style qui vont s'appliquer à cet onglet, et à lui seulement. Pour résoudre ton problème initial, il me semble que tu pourrais copier les directives mises dans le fichier `.css` pour gérer le survol, et les faire générer par `template.php` aussi pour l'affichage de l'onglet correspondant à la page en cours. Si tu as quelques soucis à manipuler du PHP, copie ici les directives CSS que tu souhaiterais voir appliquer sur l'onglet en cours, ainsi que le template, et je t'enverrai le `template.php` modifié par retour.
Hardboiled from le Web Parisien 175 posts	Reply · Quote inspired from Bernard on May 12 Bernard : De fait, j'ai un peu contourné la difficulté tout en conservant un aspect pas très éloigné de celui que je souhaitais. Mon site a été mis à jour avec la modification des onglets (cf. nouveau skin ici) Résolu ou presque
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	Reply · Quote on May 13 Bernard : si je comprends bien ce que tu dis, il est impossible dans l'état actuel du code d'identifier "à la volée" l'onglet actif ? Pourrais-t-on par exemple, créer un template où l'onglet actif est en gras ? Si oui, je suis preneur de ton offre : peux-tu me proposer un `template.php` (n'importe lequel) qui met en gras l'onglet actif ? Seule règle CSS { font-weight : bold; }, je m'occupe du reste. Merci d'avance. On a si peu d'idée de ce qui est possible...
Bernard from nearby-an-airport Associate, 6581 posts	Reply · Quote inspired from Lasares on May 26 Lasares: non, ce n'est pas ce que j'ai dis. Si l'on admet que chaque onglet est nommé, avec un identifiant qui lui est propre, il n'y a aucune raison de modifer le balisage des onglets d'une page à l'autre. En revanche, ce que fait yacs, c'est qu'il génère à la volée, dans template.php, des règles de style de mise en valeur de l'onglet cible. Si l'on est sur une page associée à l'onglet 'A', alors les règles de style générées dynamiquement vont concerner l'objet nommé '#A'. Si l'on passe sur une page associée à l'onglet 'B', alors les règles incluses dans la page vont mettre en valeur l'objet nommé '#B'. Et si l'on va sur une page associée à aucun onglet, alors aucune règle dynamique n'est générée dans template.php. Avec la solution actuelle, c'est le CSS qui s'adapte au balisage, et non le contraire. Le balisage des onglets reste constant, et quelques règles de style varient d'une page à l'autre. Le gros avantage, c'est la possibilité de mettre en cache le balisage des onglets, puisqu'il est commun à toutes les pages. A la clé, une grosse économie de requêtes dans la base de données, de cycles CPU, de mémoire. La contrainte, c'est de transposer dans PHP la génération des règles de style de mise en valeur de l'onglet sélectionné. J'admet que cette étape peut ne pas être évidente pour qui n'est pas familier de programmation PHP.