CMS Automne

Forum de la communauté du CMS Automne
Nous sommes actuellement le Ven Nov 01, 2024 1:18 am

Le fuseau horaire est UTC [Heure d’été]




Publier un nouveau sujet Répondre au sujet  [ 6 messages ] 
Auteur Message
MessagePublié: Mar Août 09, 2011 2:35 pm 
Hors-ligne

Inscrit(e) le : Mer Août 03, 2011 2:13 pm
Message(s) : 13
Bonjour à tous,

Je suis chargé de mettre en place un intranet sous Automne-CMS, projet hérité d'un de mes collègues qui a déniché cet outil qui présente vraiment bien et qui devrait satisfaire tout le monde ici !
Ceci dit, afin d'harmoniser l'intranet avec les différents sites dispo ici, la direction du service voudrait proposer un menu dont chaque rubrique aurait une couleur propre et dont cette couleur serait la nuance principale des pages de la rubrique. je me comprends parfaitement bien, mais est-ce que tout le monde suit encore ??? :
[*] Une rubrique "Présentation" dont le menu, les sous-menu et la couleur principale serait le vert
[*] Une rubrique "FAQ" dont le menu, les sous-menu et la couleur principale serait le marron etc...

Si pour les différentes couleur de pages, je pense m'orienter vers des modèles à la structure peu ou prou identique mais liées à des CSS différents (une autre solution plus propre dans la salle ??), pour le menu, je n'arrive à rien de concluant (en mode dynamique tout du moins).

Voici mes deux essais principaux, basé sur le tutoriel de Automne4you (en mode cargo cult, j'en conviens) :
Code :
** TEST 1**
            <atm-linx type="recursivelinks">
               <selection>
                  <start><nodespec type="relative" value="root" /></start>
                  <condition property="lvl" operator="&lt;=">
                        <value type="data">3</value>
                  </condition>
               </selection>
               <display mode="open" root="false">
                  <htmltemplate>
                        <li class="{{lvlClass}} {{typeClass}} Lien{{number}}"><a href="{{href}}" class="{{currentClass}} {{isParent}}">{{title}}</a>{{sublevel}}</li>
                  </htmltemplate>
                  <subleveltemplate>
                        <ul class="{{lvlClass}}">{{sublevel}}</ul>
                  </subleveltemplate>
               </display>
            </atm-linx>            

qui donne :
Pièce jointe:
Description du fichier : Test 1
test1.png
test1.png [ 9.97 Kio | Consulté 33599 fois ]


ou
Code :
** TEST 2 **
<atm-linx type="recursivelinks">
               <selection>
                  <start><nodespec type="relative" value="root" /></start>
                  <condition property="lvl" operator="&lt;=">
                        <value type="data">3</value>
                  </condition>
               </selection>
               <display mode="open" root="false">
                  <htmltemplate>
                        <li class="{{lvlClass}} {{typeClass}}"><a href="{{href}}" class="{{currentClass}} {{isParent}}">{{title}}</a>{{sublevel}}</li>
                  </htmltemplate>
                  <subleveltemplate>
                        <ul class="{{lvlClass}} Lien{{number}}">{{sublevel}}</ul>
                  </subleveltemplate>
               </display>
            </atm-linx>            

qui donne :
Pièce jointe:
Description du fichier : Test 2
test2.png
test2.png [ 9.51 Kio | Consulté 33599 fois ]


Des bons conseils quelqu'un ? (et en attendant vos avis, je retourne RTFM ! :p)

Merci à tous !


Dernière édition par jeey le Mer Août 10, 2011 9:20 am, édité 1 fois.

Haut
 Profil  
 
MessagePublié: Mar Août 09, 2011 4:12 pm 
Hors-ligne
Avatar de l’utilisateur

Inscrit(e) le : Mar Août 24, 2010 3:48 pm
Message(s) : 109
Automne ne permet pas aujourd'hui de personnaliser un menu comme tu le souhaites, si j'ai bien compris chaque onglet principal et ses sous-rubriques doivent avoir une couleur différente...
En CSS c'est pas gagné, voir pas possible (?!!), je te conseil un petit traitement javascript (Jquery est ton ami ^^) qui peut faire ça facilement...

Voilou :D


Haut
 Profil  
 
MessagePublié: Mar Août 09, 2011 4:18 pm 
Hors-ligne

Inscrit(e) le : Mer Août 03, 2011 2:13 pm
Message(s) : 13
Voici ce que j'aimerai obtenir :
Pièce jointe:
Description du fichier : le résultat escompté
resultat.png
resultat.png [ 9.97 Kio | Consulté 33596 fois ]

avec des sous-menu pour la deuxième rubrique qui seraient marron
(et une troisieme rubrique et ses sous-menu violets etc...) ...

Je serai presque rassuré de savoir que ce n'est pas possible; Je n'aurais pas à me cacher de honte sous le bureau :p !

Par contre, avec du Jquery, y'a-t-il une voie particulière à chercher ???

Merci en tout cas !


Haut
 Profil  
 
MessagePublié: Mar Août 09, 2011 5:24 pm 
Hors-ligne
Avatar de l’utilisateur

Inscrit(e) le : Mar Août 24, 2010 3:48 pm
Message(s) : 109
Ce code qui est une démo pour ton traitement javascript, il faut juste que tu récupères si tu ne l'a pas déjà jquery-1.6.1-min.js (ou une autre version d'ailleurs) et que tu modifies ligne 4 le chemin vers celui-ci...
C'est une façon parmi d'autres qui repose sur les niveaux de classe qui sont générés par Automne, le script effectue le traitement à partir de ces niveaux...

Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1-min.js" ></script>

<style>
/* quelques réglages css basiques pour l'exemple */
ul { amrgin:0 ; padding:0;}
ul li {list-style:none outside none;}
li.lvl1 { float:left;}
li.lvl1 a { display:block;border:solid 1px #000; width:100px; height:50px;}
ul.lvl2 { display:block; position:absolute; top:51px;}
ul.lvl2 a { display:block; width:100px; height:50px;}
li.lvl1 { position:relative;}
li.lvl2 { position:absolute;}

/* les classes pour personnaliser tes menus */
.couleur0 { background:#FF0000;}
.couleur1 { background:#00FF00;}
.couleur2 { background:#0000FF;}
</style>

<script type="text/javascript">
    $(document).ready(function(){
      // recherches de tous les éléments li qui ont la classe lvl1
      $('li.lvl1').each(function(i){
         // ajout de la classe couleur0 au premier onglet, couleur 1 au second ...
         $(this).addClass('couleur'+[i]);
         // ajout de la classe couleur0 aux enfants li de l'onglet 1, ...
         $(this).children('ul').children('li').addClass('couleur'+[i]);
      });
   });
</script>
</head>
<body>
<ul id="menuMultiColor" class="lvl1">
  <li class="lvl1"><a class="menu">Menu 1</a>
   <ul class="lvl2">
     <li><a>sous-menu 1</a></li>
     <li><a>sous-menu 2</a></li>
   </ul>
  </li>
  <li class="lvl1"><a>Menu 2</a>
     <ul class="lvl2">
     <li><a>sous-menu 1</a></li>
     </ul>
  </li>
  <li class="lvl1"><a>Menu 3</a></li>
</ul>
</body>
</html>

Après tu peux traiter en CSS les hover sur les classes couleur0, couleur1 et ainsi de suite...
Bon c'est un truc fait rapidement, ça peut être amélioré par la suite...
J'espère que c'est ce dont tu avais besoin !


Haut
 Profil  
 
MessagePublié: Mer Août 10, 2011 8:47 am 
Hors-ligne

Inscrit(e) le : Mer Août 03, 2011 2:13 pm
Message(s) : 13
Bien vu !

Merci beaucoup, je m'en vais aller tester ça !


Haut
 Profil  
 
MessagePublié: Mer Août 10, 2011 9:19 am 
Hors-ligne

Inscrit(e) le : Mer Août 03, 2011 2:13 pm
Message(s) : 13
It's done ! Merci !
Pièce jointe:
yes!.png
yes!.png [ 4.08 Kio | Consulté 33580 fois ]


Haut
 Profil  
 
Afficher les messages publiés depuis :  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 6 messages ] 

Le fuseau horaire est UTC [Heure d’été]


Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 15 invité(s)


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas insérer de pièces jointes dans ce forum

Recherche de:
Aller vers :  
Powered by phpBB® Forum Software © phpBB Group
Traduit par Maël Soucaze et Elglobo © phpBB.fr