CMS Automne
http://www.automne-cms.org/forum/

Appliquer des styles à la page en cours dans le menu
http://www.automne-cms.org/forum/viewtopic.php?f=2&t=2630		 Page 1 sur 2
Auteur:  elmyn [ Mer Sep 26, 2012 1:11 pm ]
Sujet du message:  Appliquer des styles à la page en cours dans le menu
Bonjour,

Je me tourne à nouveau vers vous car je souhaite pouvoir appliquer un style spécifique à la page en cours dans le menu (à savoir souligner la page active). (Mon install. : Automne 4.2.1 avec Apache2.2, sous Ubuntu 12.04 LTS 32 bits.)

J'imagine qu'il faut se servir de la condition if, cela dit je n'ai pas la moindre idée de comment elle s'utilise, et encore moins au sein d'automne.

Quelles sont les ètapes à suivre ?

Pour info je dispose déjà de ceci dans mon css :
Code :
#menud .current_page_item a
{
   text-decoration: underline;
}


Merci !
Auteur:  elmyn [ Lun Oct 01, 2012 4:49 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu
Personne n'a d'idée ?
Je sais que c'est faisable puisque c'est le cas dans la démo...
:cry:
Auteur:  elmyn [ Mar Oct 02, 2012 12:51 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu
Bon ben voilà, une fois n'est pas coutume, je me donne la solution à moi meme, en espérant que ça pourra servir à d'autres aussi belus que moi.

Après moultes recherches et tentatives :

Code :
<atm-if what="{page:self:id} == '4'" name="underline01">
  <li class="first current_page_item"><a href="/automne/admin/#page:4">Home</a></li>
</atm-if>   
<atm-else for="underline01">
  <li><a href="/automne/admin/#page:4">Home</a></li>   
</atm-else>   


Et ce pour toutes les pages. (=> à adapter, bien entendu, en fonction des classes du css notamment.)
C'est beau.

Attention cependant pour cet exemple, si vous avez un menu soit déroulant soit de type ul li ul li... le style s'appliquera par défaut à tous les li encadrés par les balises <atm-if...>...</atm-if>, ou ne s'affichera plus si vous ne le faites pas apparaitre entre les balises pré-citées.
Auteur:  Fred [ Mer Oct 10, 2012 3:17 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Bonjour,
J'arrive un peu tard mais cette solution me parait très lourde par rapport à ce que sait faire Automne.

Pourquoi ne pas utiliser (comme dans la démo justement) la balise atm-linx qui va générer automatiquement tout le menu. Cette balise a la possibilité de placer un marqueur sur la page courante très facilement en utilisant {{currentClass}}.

Voici le code tiré de la démo :
Code :
<atm-linx type="recursivelinks">
<selection>
   <start><nodespec type="relative" value="root" reloffset="1" /></start>
   <condition property="lvl" operator="&lt;=">
      <value type="data">2</value>
   </condition>
</selection>
<display mode="close">
   <htmltemplate><li class="{{lvlClass}} {{typeClass}} {{currentClass}}"><a class="{{lvlClass}}" href="{{href}}">{{title}}</a>{{sublevel}}</li></htmltemplate>
   <subleveltemplate><ul class="{{lvlClass}}">{{sublevel}}</ul></subleveltemplate>
</display>
</atm-linx>


dans ce code, "{{currentClass}}" va être remplacé par "CMS_current" sur le lien de la page courante et par rien sur les liens des autres pages.

Tous les détails et les exemples sont là :
http://doc.automne-cms.org/web/Document ... m-linx.php
Auteur:  elmyn [ Jeu Oct 11, 2012 10:29 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Fred a écrit:
Bonjour,
Pourquoi ne pas utiliser (comme dans la démo justement) la balise atm-linx qui va générer automatiquement tout le menu.


Euh, parce que je ne comprends pas grand chose à ce bout de code, pour commencer. :)

Fred a écrit:
http://doc.automne-cms.org/web/Documentation/276-gestion-des-liens-de-navigation-les-tags-atm-linx.php


Vais regarder de ce pas.
Merci.
Auteur:  elmyn [ Jeu Oct 11, 2012 12:32 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Après examen attentif de la page en question il s'avère que si je comprends bien le principe et le fond, il n'en reste pas moins que je ne comprends pas la forme. Et le code ci-dessus ne m'en parait que plus obscur.

Je vais donc considérer que ma solution à deux francs cinquante me satisfait pleinement pour le moment, n'en déplaise aux puristes.
Désolée. :wink:

J'ajoute que par flemmardise aigue, il m'est assez difficile d'envisager refaire le menu de mon .xml, sans compter qu'il me faudrait cogiter sévère à la reconstruction logique du machin, ce qui, par avance, m'épuise.

En revanche, quand j'aurai avancé sur le reste et que j'aurai un brin de disponibilité neuronale supplémentaire, j'essayerai de mettre tout ça en place, histoire de ne pas rester sur un abandon.

Ton intervention me servira donc, merci Fred !
Auteur:  elmyn [ Jeu Oct 25, 2012 11:14 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Bonjour,

Ca y est, je touche aux limites de mon bidouillage, et pour mettre en oeuvre un code propre et cohérent, j'ai besoin de vous.
D'abord pour avoir une confirmation :
-> J'ai créé cinq sites possédant tous exactement la meme architecture et dépendant tous de la meme racine. Le contenu des cinq menus est donc identique (hormis cinq pages qui pointent vers des sites externes, une par site).
Je souhaite créer un seul menu qui redirigera naturellement chaque site sur ses sous pages sans avoir besoin de créer 5 .xml différents.

Si je crée un menu à base de recursive links, obtiendrai-je ce que je souhaite ?
Si tel est le cas, je ne comprends pas comment spécifier les codename des pages pour chacun des sites.

Merci

Pour info :
Pièce jointe:
ex_menu.jpg
ex_menu.jpg [ 52.29 Kio | Consulté 140100 fois ]

Pièce jointe:
ex_arbo.jpg
ex_arbo.jpg [ 104.98 Kio | Consulté 140099 fois ]
Auteur:  Cguillaume [ Ven Oct 26, 2012 8:29 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Bonjour Elmyn,

Je ne suis pas sûr de bien comprendre ton problème, cependant ce qui est sûr c'est que Fred a raison et qu'il faut utiliser les atm-linx, surtout dans le cadre de sites qui grossissent et se ramifient !

Pour créer une rangée utilisant les codename, et la mutualiser sur tes 5 "'sites" il faut au préalable que ces sites soient définis dans le panneau administration (sinon pb avec les codename!)...

PS : Un bricolage si tu veux continuer sur ta lancée ;) : tu créé un atm-linx type recursive dans une rangée pour générer ton menu du site n°1 > tu dupliques ta rangée > tu changes la valeur du node "start" avec la valeur root de ton 2ème site > et ainsi de suite (partant du principe que tes structures de sites sont identiques!!!...

Bon courage !
Auteur:  atm4u [ Ven Oct 26, 2012 9:33 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Salut Elmyn,
Bon Fred a raison sur le principe et ta limite aujourd'hui est un exemple.
Merci pour ta vue d'arbo, peux tu faire passer ton code avec ta solutions à deux francs cinquante :wink:
Ca va permettre de comprendre le contexte.
Quant à ce que dit Cguillaume c'est tout a fait exact, tu parles de sites, mais as tu mis en place plusieurs domaines ?
Auteur:  elmyn [ Lun Oct 29, 2012 10:57 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Alors voici mon bidouillage (attention truc lourd inside) :
Code :
<div id="header-menud">
               <div id="menud">
                  <ul>
                     <atm-if what="{page:self:id} == '4'" name="underline01">
                        <li class="first current_page_item"><a href="/web/med_en_codename/4">Home</a></li>
                     </atm-if>   
                     <atm-else for="underline01">
                        <li><a href="/web/med_en_codename/4">Home</a></li>   
                     </atm-else>   
                     <atm-if what="{page:self:id} == '18'" name="underline02">
                        <li class="first current_page_item"><a href="/web/med_en_codename/18">Project</a></li>
                     </atm-if>   
                     <atm-else for="underline02">
                        <li><a href="/web/med_en_codename/18">Project</a></li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '19'" name="underline03">
                        <li class="first current_page_item"><a href="/web/med_en_codename/19">Partners</a>
                           <ul>
                              <li><a href="/web/med_en_codename/24">Geology</a></li>
                              <li><a href="/web/med_en_codename/34">Architecture and Conservation</a></li>
                              <li><a href="/web/med_en_codename/32">Archeology</a></li>
                              <li><a href="/web/med_en_codename/33">Environmental Biology</a></li>
                              <li><a href="/web/med_en_codename/28">Hydrology and Water Resources</a></li>
                           </ul>
                        </li>
                     </atm-if>   
                     <atm-else for="underline03">
                        <li><a href="/web/med_en_codename/19">Partners</a>
                           <ul>
                              <li><a href="/web/med_en_codename/24">Geology</a></li>
                              <li><a href="/web/med_en_codename/34">Architecture and Conservation</a></li>
                              <li><a href="/web/med_en_codename/32">Archeology</a></li>
                              <li><a href="/web/med_en_codename/33">Environmental Biology</a></li>
                              <li><a href="/web/med_en_codename/28">Hydrology and Water Resources</a></li>
                           </ul>
                        </li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '20'" name="underline04">
                        <li class="first current_page_item"><a href="/web/med_en_codename/20">Products</a>
                           <ul>
                              <li><a href="index.html">Publications</a></li>
                              <li><a href="#">Abstracts</a></li>
                              <li><a href="index.html">Webminars</a></li>
                              <li><a href="#">Others</a></li>
                           </ul>   
                        </li>
                     </atm-if>   
                     <atm-else for="underline04">
                        <li><a href="/web/med_en_codename/20">Products</a>
                           <ul>
                              <li><a href="index.html">Publications</a></li>
                              <li><a href="#">Abstracts</a></li>
                              <li><a href="index.html">Webminars</a></li>
                              <li><a href="#">Others</a></li>
                           </ul>   
                        </li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '17'" name="underline05">
                        <li class="first current_page_item"><a href="/web/med_en_codename/17">News</a></li>
                     </atm-if>
                     <atm-else for="underline05">
                        <li><a href="/web/med_en_codename/17">News</a></li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '21'" name="underline06">
                        <li class="first current_page_item"><a href="/web/med_en_codename/21">Links</a></li>
                     </atm-if>
                     <atm-else for="underline06">
                        <li><a href="/web/med_en_codename/21">Links</a></li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '22'" name="underline07">
                        <li class="first current_page_item"><a href="/web/med_en_codename/22">Job Opportunities</a>
                           <ul>
                              <li><a href="index.html">PhD Positions</a></li>
                              <li><a href="#">Studying at Roma3</a></li>
                           </ul>   
                        </li>
                     </atm-if>
                     <atm-else for="underline07">
                        <li><a href="/web/med_en_codename/22">Job Opportunities</a>
                           <ul>
                              <li><a href="index.html">PhD Positions</a></li>
                              <li><a href="#">Studying at Roma3</a></li>
                           </ul>   
                        </li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '16'" name="underline08">
                        <li class="first current_page_item"><a href="/web/med_en_codename/16">Contact</a>
                           <ul>
                              <li><a href="/web/med_en_codename/27">In Geology</a></li>
                              <li><a href="/web/med_en_codename/43">In Architecture &amp; Conservation</a></li>
                              <li><a href="/web/med_en_codename/37">In Archeology</a></li>
                              <li><a href="/web/med_en_codename/40">In Environmental Biology</a></li>
                              <li><a href="/web/med_en_codename/31">In Hydrology &amp; Water Resources</a></li>
                           </ul>
                        </li>
                     </atm-if>
                     <atm-else for="underline08">
                        <li><a href="/web/med_en_codename/16">Contact</a>
                           <ul>
                              <li><a href="/web/med_en_codename/27">In Geology</a></li>
                              <li><a href="/web/med_en_codename/43">In Architecture &amp; Conservation</a></li>
                              <li><a href="/web/med_en_codename/37">In Archeology</a></li>
                              <li><a href="/web/med_en_codename/40">In Environmental Biology</a></li>
                              <li><a href="/web/med_en_codename/31">In Hydrology &amp; Water Resources</a></li>
                           </ul>
                        </li>
                     </atm-else>
                     <atm-if what="{page:self:id} == '23'" name="underline09">
                        <li class="first current_page_item"><a href="/web/med_en_codename/23">Video Interviews</a></li>
                     </atm-if>
                     <atm-else for="underline09">
                        <li><a href="/web/med_en_codename/23">Video Interviews</a></li>
                     </atm-else>
                     <li style="float: right; border-right: 0px solid #fff;   color: #F33131;"><a style="color: #F33131; float: right; font-weight: bold; background: none no-repeat left;" href="automne/admin">Log In</a></li>
                  </ul>
               </div>
                                   </div>


Ce qui donne visuellement ceci :
Pièce jointe:
ex_menud_index.jpg
ex_menud_index.jpg [ 98.24 Kio | Consulté 140056 fois ]
Auteur:  elmyn [ Lun Oct 29, 2012 11:33 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
atm4u a écrit:
Quant à ce que dit Cguillaume c'est tout a fait exact, tu parles de sites, mais as tu mis en place plusieurs domaines ?


En réalité non, ce ne sont pas des sites distincts.
Comme vous pouvez le voir dans l'arborescence, j'ai un site principal comportant cinq sous-sites.
Pour le moment, ils ont tous le meme menu, bete et méchant tel qu'il est inséré plus haut. Mais du coup, je suis obligée de créer une page .xml par sous-site (puisque je dois changer les codenames des pages) alors qu'ils ont une architecture strictement similaire, je trouve ça un peu ballot.
J'aimerais donc créer un menu propre, qui soit reproductible en changeant simplement les start et cie, comme le dit Guillaume (enfin si j'ai bien tout pigé).
Mon problème c'est que je ne comprends pas bien comment manipuler les atm-linx de type recursif.
Auteur:  elmyn [ Lun Oct 29, 2012 11:35 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu - [
Cguillaume a écrit:
BPS : Un bricolage si tu veux continuer sur ta lancée ;) : tu créé un atm-linx type recursive dans une rangée pour générer ton menu du site n°1 > tu dupliques ta rangée > tu changes la valeur du node "start" avec la valeur root de ton 2ème site > et ainsi de suite (partant du principe que tes structures de sites sont identiques!!!...


C'est exactement ce que je voudrais faire, mais je comprends pas comment faire avec mes menus déroulants.
Auteur:  elmyn [ Mar Oct 30, 2012 1:23 pm ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu
Je fais un point parce qu'il faut que je précise quels sont mes blocages pour créer un menu en atm-linx.

1) Dans cette image :
Pièce jointe:
ex_menu.jpg
ex_menu.jpg [ 52.29 Kio | Consulté 140041 fois ]

- Back to ... : retour à la racine principale (direct)
- Home : page d'accueil/racine locale en somme/page actuelle
- In The Project : sous-page de Home (sublink ou recursif)
- Partners : retour vers une page du site principal (direct)
- The Lab : site externe (direct)
- Resources/Contact : sous-pages de Home (sublinks ou recursifs)

Déjà ici je me pose la question de la mise en forme pour garder cet ordre dans le menu, puisque j'alterne des sous pages et des liens de types différents. Si j'utilise des recursive links, je ne vois pas comment les entre-couper de direct links.

2) Ensuite ici :
Pièce jointe:
ex_arbo.jpg
ex_arbo.jpg [ 104.98 Kio | Consulté 140041 fois ]

Je prévois de créer une copie de ma page News (17 dans l'arborescence plus haut) qui n'afficherait que les news de type Events, sa page parent serait soit ma racine (4) soit la page News elle-meme.
Mais là à nouveau, si je génère le menu principal en recursive links, comment je m'arrange pour qu'elle n'apparaisse pas, puisque je souhaite qu'elle soit accessible uniquement par un lien dans la sidebar et non dans le menu ?

3) Enfin dernière préoccupation, relative au "bidouillage" proposé plus haut, si mon menu (qui pour le moment est statique) apparait dans une rangée, il devient donc modifiable et accessible par tous ceux qui possèdent les droits de modif de la page en cours, n'est-ce-pas un soucis ?

Merci, encore :D
Auteur:  atm4u [ Jeu Nov 01, 2012 9:46 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu
J'essaie de comprendre :?

Tu as :
L'accueil du portail
- une page d'accueil pour le site 1
- des niveaux 1
- des niveaux 2
- des niveaux 2
- ...
- des niveaux 1
- des niveaux 2
- ..
- une page d'accueil pour le site 2
- des niveaux 1
- des niveaux 2

C'est ca ? car je comprend pas la différence entre Home et back to...
Auteur:  atm4u [ Jeu Nov 01, 2012 9:49 am ]
Sujet du message:  Re: Appliquer des styles à la page en cours dans le menu
Avais tu regardé cette explication : http://www.automne4you.com/web/50-menu- ... zontal.php
Si ca aide...
Page 1 sur 2 Le fuseau horaire est UTC [Heure d’été]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/