Forum CMS Made Simple FR
[RESOLU] Menu horizontal avec double bordure de couleur diférente - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : [RESOLU] Menu horizontal avec double bordure de couleur diférente (/thread-1443.html)


[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 20/09/2011

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.9.4.3
#~ Url du site : http://www.lamienenette.fr
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.9.4.2
#~ Installed Modules:
#~ * CMSMailer: 2.0.1
#~ * FileManager: 1.1.0
#~ * MenuManager: 1.7.6
#~ * ModuleManager: 1.4.2
#~ * News: 2.11.3
#~ * nuSOAP: 1.0.2
#~ * Printing: 1.1.2
#~ * Search: 1.6.10
#~ * ThemeManager: 1.1.4
#~ * TinyMCE: 2.8.4
#~ * FormBuilder: 0.7
#~ * Gallery: 1.4.4
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 64000000
#~ * default_upload_permission: 664
#~ * url_rewriting: none
#~ * page_extension:
#~ * query_var: page
#~ * image_manipulation_prog: GD
#~ * auto_alias_content: true
#~ * locale:
#~ * default_encoding: utf-8
#~ * admin_encoding: utf-8
#~ * set_names: true
#~ Php Information:
#~ * phpversion: 5.2.17
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 128M
#~ * max_execution_time: 120
#~ * output_buffering: On
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 64M
#~ * upload_max_filesize: 64M
#~ * session_save_path: /tmp (1777)
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.1.49
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



bonjour,

j'aimerais réaliser un menu simple de 5 pages sans sous-menus,
j'utilise le menu "cssmenu_ulshadow.tpl"

et je souhaiterai donc faire mon menu à l'horizontale, avec une bordure basse de différentes couleur pour chaque pages,
et, une bordure haute blanche car le fond est blanc, qui deviendrait de la même couleur que la bordure basse au survol de la souris,
en "hover" et en "active".

cependant si je pourrait réussir à me débrouiller sur un site statique, je ne parvient pas à trouver la bonne manipulation,
si quelqu'un pourrait me donner les grandes lignes, ce serait top.

je vous en remercie par avance. Wink

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 20/09/2011

Salut, regarde ici : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2680

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 20/09/2011

merci jean, c'est éxactement ce que je cherchais, par contre j'ai un souci, dans mon template je retrouve bien les deux première lignes de ton code mais ensuite il me semble que les templates ont été modifié avec les nouvelles versions du cms du coup je nage un peu dans le php, j'ai mis comme suit, mais cela ne fonctionne pas évidement.. tu aurais des pistes pou moi.
merci d'avance !

Code :
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
  {repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
  {repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->prevdepth-$node->depth}
  </li>
  {elseif $node->index > 0}</li>
{/if}
{if $node->depth==1 and $node->haschildren == false}<li class="menu{$node->hierarchy}"><a
{elseif $node->parent == true or ($node->current == true and $node->haschildren == true)}
  {assign var='classes' value='menuactive'}

<li class="menuactive menuparent menu{$node->hierarchy}">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}

  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
<li class="menuparent menu{$node->hierarchy}">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span> {elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />
{else}
<li>
<a
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  {if $node->type == 'sectionheader'}
    <li class="{$classes}"><a class="{$classes}"><span class="sectionheader">{$node->menutext}</span></a>
  {else}
    <li class="{$classes}"><a class="{$classes}"
  {/if}
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent"
{else}
  <li>
  <a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}


[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 21/09/2011

Je vais regarder les modifs à effectuer pour les nouveaux gabarits d'ici fin du weekend, en attendant essaye de comprendre leur fonctionnement, ce n'est pas si complexe que ça en a l'air.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 22/09/2011

Si tu n'utilises pas d'enfant, c'est très simple.
Cherche après cette ligne :
Code :
<li class="{$classes}"><a class="{$classes}"
et modifie-la en :
Code :
<li class="{$classes}{$node->hierarchy}"><a class="{$classes}{$node->hierarchy}"

Bien entendu, tu pourrais réduire le gabarit, mais bon, tu ne vas pas gagner grand chose...

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 22/09/2011

salut jean et merci beaucoup de t'inresser à mon problème,

pour le template je n'est que cette ligne à changé ?
je l'ai fait via ftp et ajouter à ma feuille de style ce morceau de code pour voir si cela fonctionne mais rien.
Code :
.menu1 {color:#ffffff;}
.menu2 {color:#C03000;}
.menu3 {color:#eed740;}
.menu4 {color:#FF358B;}
.menu5 {color: red}

#primary-nav li.menu1 a {color: green;}
#primary-nav li.menu2 a {color: blue;}
#primary-nav li.menu3 a {color:#eed740;}
#primary-nav li.menu4 a {color: #FF358B;}
#primary-nav li.menu5 a {color: yellow;}
peut-etre que dans le code de mon menu il y a déja la couleur à la base, du coup j'ai virer toute les couleurs de primary nav
et là j'ai tout mais bouton, tu voit d'où cela peut venir ?

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 22/09/2011

sheitaneb a écrit :pour le template je n'est que cette ligne à changé ?
je l'ai fait via ftp et ajouter à ma feuille de style ce morceau de code pour voir si cela fonctionne mais rien.
Par ftp ???
Non, par l'administration du site, Disposition » Gestion de Menu.

Citation :
Code :
.menu1 {color:#ffffff;}
.menu2 {color:#C03000;}
.menu3 {color:#eed740;}
.menu4 {color:#FF358B;}
.menu5 {color: red}

#primary-nav li.menu1 a {color: green;}
#primary-nav li.menu2 a {color: blue;}
#primary-nav li.menu3 a {color:#eed740;}
#primary-nav li.menu4 a {color: #FF358B;}
#primary-nav li.menu5 a {color: yellow;}
peut-etre que dans le code de mon menu il y a déja la couleur à la base, du coup j'ai virer toute les couleurs de primary nav
et là j'ai tout mais bouton, tu voit d'où cela peut venir ?

Là, tu dois regarder le code source généré d'une page, tu verras ainsi quelle sont les classes qui ont été ajoutées et que tu devras ajouter dans ta feuille de style. Et donc ici, pas de .menu1, mais .1, .2... Si tu désires menu1, il faut ajouter menu entre {$classes} et {$node->hierarchy}.
Ça m'a d'ailleurs permit de voir que tu dois également changer une autre ligne dans le gabarit :
cette ligne :
Code :
{else}
  <li>
  <a
{/if}
doit être remplacée par ceci :
Code :
{else}
  <li classe="{$node->hierarchy}">
  <a classe="{$node->hierarchy}"  
{/if}
ATTENTION, il doit rester une espace après <a classe="{$node->hierarchy}"

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 22/09/2011

Jean le Chauve a écrit :Par ftp ???
Non, par l'administration du site, Disposition » Gestion de Menu.

et bien je le fait par ftp car via l'admin gestion de menu on ne peut pas éditer les templates il me semble !?



j'ai fait les modifications que tu m'a indiqués, j'ai aussi regarder la class dans le code source qui est comme tu le dit qu'un numéro
sauf sur la page active.

pour le moment j'essaie sans ajouter menu ou autre dans la class.


j'ai donc mis dans ma feuille de style

.1 {color: green;} marche pas

et

#primary-nav li.1 a {color: green;} marche pas

je met mon template et un bout de ma feuille de style
pour que tu te rende compte:

Code :
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
  {repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
  {repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->prevdepth-$node->depth}
  </li>
  {elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  {if $node->type == 'sectionheader'}
    <li class="{$classes}"><a class="{$classes}"><span class="sectionheader">{$node->menutext}</span></a>
  {else}
    <li class="{$classes}{$node->hierarchy}"><a class="{$classes}{$node->hierarchy}"
  {/if}
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent"
{else}
  <li classe="{$node->hierarchy}">
  <a classe="{$node->hierarchy}"  
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Code :
/* ------------  Menu  ROOT  ------------ */
.page-menu {
    width: auto;
    height: 40px;
        background-color: pink;
}
.menuwrapper {}

.1 {color: green;}
.2 {color: blue;}
.3 {color: #eed740;}
.4 {color: #FF358B;}
.5 {color: yellow;}

ul#primary-nav li hr.menu_separator{
        position: relative;
        visibility: hidden;
        display:block;
}
.page-menu ul#primary-nav {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-menu ul#primary-nav li {
    float: left;
}
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a span {
    display: block;
    padding: 0 35px;
    background-repeat: no-repeat;
    background-color: transparent;
}
.page-menu ul#primary-nav li a {
        padding-left: 0;
    color: #454545;
    font-weight: normal;
        text-decoration: underline;
    font-size: 1.2em;
}
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:active {
    color: #000;
}
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover span {
    color: #000;
}
.page-menu ul#primary-nav li a.menuparenth,
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
    background-position: 100% -120px;
}
.page-menu ul#primary-nav li a {
    background-position: 100% -80px;
}
.page-menu ul#primary-nav li a.menuactive span,
.page-menu ul#primary-nav li a:hover span,
.page-menu ul#primary-nav li a:focus span,
.page-menu ul#primary-nav li a:active span {
    background-position: 0 -40px;
}
.page-menu ul#primary-nav li a span {
    background-position: 0 0;
}
.page-menu ul#primary-nav .sectionheader,
.page-menu ul#primary-nav li a:link.menuactive,
.page-menu ul#primary-nav li a:visited.menuactive {
/* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.page-menu ul#primary-nav li span,
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
/* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
/* Additional IE specific bug fixes... */
* html .page-menu ul#primary-nav {
    display: inline-block;
}
*:first-child+html .page-menu ul#primary-nav {
    display: inline-block;
}
/* --------------------  menu dropdow  -------------------------
/* Unless you know what you do, do not touch this */
/* Reset all ROOT menu styles. */
ul#primary-nav ul.unli li li a span,
ul#primary-nav ul.unli li a span,
ul#primary-nav .menuparent .unli .menuparent .unli li a span {
    font-weight: normal;
    background-image: none;
    display: block;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
#primary-nav {
    margin: 0px;
    padding: 0px;
}
#primary-nav ul {
    list-style: none;
    margin: -6px 0px 0px;
    padding: 0px;
/* Set the width of the menu elements at second level. Leaving first level flexible. */
    width: 209px;
}
#primary-nav ul {
    position: absolute;
    z-index: 1001;
    top: auto;
    display: none;
    padding-top: 9px;
    background: url([[root_url]]/uploads/NCleanBlue/ultop.png) no-repeat left top;
}
* html #primary-nav ul.unli {
    padding-top: 12px;
    background: url([[root_url]]/uploads/NCleanBlue/ultop.gif) no-repeat left top;
}
#primary-nav ul.unli ul {
    margin-left: -7px;
    left: 100%;
    top: 3px;
}
* html #primary-nav ul.unli ul {
    margin-left: -0px;
}
#primary-nav li {
    margin: 0px;
    float: left;
}
#primary-nav li li {
    margin-left: 7px;
    margin-top: -1px;
    float: none;
    position: relative;
}
/* Styling the basic appearance of the menu elements */
ul#primary-nav ul hr.menu_separator{
        position: relative;
        visibility: visible;
        display:block;
        width:130px;
           height: 1px;
           margin: 2px 30px 2px;
    padding: 0em;
    border-bottom: 1px solid #ccc;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
}
#primary-nav .separator,
#primary-nav .separatorh {
    height: 9px;
    width: 209px;
    margin: 0px 0px -8px;
    background: url([[root_url]]/uploads/NCleanBlue/ulbtm.png) no-repeat left bottom;
}
* html #primary-nav .separator {
       z-index:-1;
    background: url([[root_url]]/uploads/NCleanBlue/ulbtm.gif) no-repeat left bottom;
}
*:first-child+html #primary-nav .separator {
       z-index:-1;
}
#primary-nav ul.unli li a {
    padding: 0px 10px;
    width: 165px;
    margin: 5px;
    background-image: none;
}
* html #primary-nav ul.unli li a {
    padding: 0px 10px 0px 5px;
    width: 165px;
    margin: 5px 0px;
}
#primary-nav li li a:hover {
    background-color: #DBE7F2;
}
/* Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive li a {
    text-decoration: none;
    background: none;
}
#primary-nav ul.unli li.menuparenth,
#primary-nav ul.unli a:hover,
#primary-nav ul.unli a.menuactive {
    background-color: #DBE7F2;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul.unli li .menuparent,
#primary-nav ul.unli li .menuparent:hover,
#primary-nav ul.unli li .menuparent,
#primary-nav .menuactive.menuparent .unli .menuactive.menuparent .menuactive.menuparent {
    background-image: url([[root_url]]/uploads/NCleanBlue/arrow.gif);
    background-position: center right;
    background-repeat: no-repeat;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li.menuparenth ul ul ul {
    display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li.menuparenth ul {
    display: block;
}
/* IE Hacks */
#primary-nav li li {
    float: left;
    clear: both;
}
#primary-nav li li a {
    height: 1%;
}
/*************** End Menu *****************/

sa ne pourrait pas venir de la propriété background-color d'une div plus général qui fait confusion?

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 23/09/2011

sheitaneb a écrit :et bien je le fait par ftp car via l'admin gestion de menu on ne peut pas éditer les templates il me semble !?
Tu pourrais au moins essayer et lire la doc.

Citation :j'ai fait les modifications que tu m'a indiqués, j'ai aussi regarder la class dans le code source qui est comme tu le dit qu'un numéro
sauf sur la page active.
Et comment fais-tu pour voir le code source d'une page non active ?

Quand je regarde la source générée sur http://www.lamienenette.fr/, je ne vois pas de changement par rapport au gabarit de menu original... pas de n° ajouté. Donc, tes modifications sur le gabarit de menu ne sont pas prises en compte.

Citation :sa ne pourrait pas venir de la propriété background-color d'une div plus général qui fait confusion?
Non.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 23/09/2011

Jean le Chauve a écrit :
sheitaneb a écrit :et bien je le fait par ftp car via l'admin gestion de menu on ne peut pas éditer les templates il me semble !?
Tu pourrais au moins essayer et lire la doc.

j'ai essayé c'est pour cela que je passe par ftp car je ne parvient pas à editer les menus via gestion de menu mais sa c'est pas un problème pour moi sa va aussivite par ftp

Citation :j'ai fait les modifications que tu m'a indiqués, j'ai aussi regarder la class dans le code source qui est comme tu le dit qu'un numéro
sauf sur la page active.
Et comment fais-tu pour voir le code source d'une page non active ?

clik droit code source ?

Quand je regarde la source générée sur http://www.lamienenette.fr/, je ne vois pas de changement par rapport au gabarit de menu original... pas de n° ajouté. Donc, tes modifications sur le gabarit de menu ne sont pas prises en compte.

Citation :sa ne pourrait pas venir de la propriété background-color d'une div plus général qui fait confusion?
Non.

normal je travaillais en local, voilà ce que sa donne

Code :
<div id="menuwrapper">
<ul id="primary-nav">
            <li class="menuactive1"><a class="menuactive1"
  href="http://www.lamienenette.fr/"><span>Accueil</span></a>

</li>
  <li classe="2">
  <a classe="2"  
href="http://www.lamienenette.fr/index.php?page=Presentation"><span>Présentation</span></a>
</li>
  <li classe="3">
  <a classe="3"  
href="http://www.lamienenette.fr/index.php?page=Realisations"><span>Réalisations</span></a>
</li>
  <li classe="4">
  <a classe="4"  
href="http://www.lamienenette.fr/index.php?page=Contact"><span>Contact</span></a>

</li>
</ul>
<div class="clearb"></div>
</div>


[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 23/09/2011

Citation :Tu pourrais au moins essayer et lire la doc.
j'ai essayé c'est pour cela que je passe par ftp car je ne parvient pas à editer les menus via gestion de menu mais sa c'est pas un problème pour moi sa va aussivite par ftp
Par ftp en local, tu m'expliqueras comment tu fais :lol:

Citation :Et comment fais-tu pour voir le code source d'une page non active ?
clik droit code source ?
Si tu peux cliquer droit dessus, c'est qu'elle est active.

Je ne peux rien voir en local, fais donc la modification du gabarit qui est en ligne ET par le gestionnaire de menu. Le lien en haut et à droite te donne la documentation du module, qui te dit, entre autres
Citation :Si vous désirez créer une version personnalisée d'un gabarit de menu, vous pouvez facilement l'importer dans la base de données, puis l'éditer directement dans le panneau d'administration de CMSMS. Procéder ainsi :

Cliquez sur l'administration de Gestion de Menus.
Cliquez sur l'onglet 'Gabarits sous forme de fichiers', et cliquez 'Importer le gabarit dans la base de données' à côté de simple_navigation.tpl, par exemple.
Donnez un nouveau nom à ce gabarit. Nous l'appelerons "gabarit test"
Vous devriez maintenant voir "gabarit test" dans la liste 'Gabarits se trouvant dans la base de données'.
Maintenant, vous pouvez aisément modifier le gabarit pour le modifier à votre convenance pour le site. Insérez des classes, des ID et d'autres balises afin que le format généré soit exactement celui que vous désirez. Puis, insérez votre menu dans le site avec : {menu template='gabarit test'}. Notez que l'extension .tpl extension doit être ajoutée dans le cas d'une utilisation d'un gabarit sour forme de fichier.

Une fois les modifications du gabarit en ligne, je pourrai voir ce qu'il te faut comme css grâce à l'option FireBug de Firefox que tout développeur de site web devrait avoir (tuto de Bess ici : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=1411)

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 23/09/2011

salut jean le chauve et merci de tes réponses,
j'ai bien lu la doc comme tu m'a conseiller,
et ait créer le nouveau menu cssmenu_ulshadowmodif dont j'ai mis la balise dans mon xhtml.

j'ai également télécharger firebug, que je ne connais pas du tout car
j'utilise l'assitant toolbar 'webdeveloppeur' et il me semblait que ces deux logiciels soit similaires..
bref, j'ai regarder le code source mais c'est toujours le code source de la page active que je voit.

comment faire pour voir le code source du site non actif ?
je ne savait pas que le code source différenciait si la page était active ou non.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 23/09/2011

Voilà qui est parfait.
Étant donné qu'une classe ne peut pas commencer par un chiffre et que nous allons avoir un petit problème avec le menu actif (pas d'espace entre menuactive et le n°), tu vas donc modifier cette ligne du gabarit :
Code :
<li class="{$classes}{$node->hierarchy}"><a class="{$classes}{$node->hierarchy}"
par
Code :
<li class="{$classes} menu{$node->hierarchy}"><a class="{$classes} menu{$node->hierarchy}"
et
Code :
{else}
  <li classe="{$node->hierarchy}">
  <a classe="{$node->hierarchy}"  
{/if}
par
Code :
{else}
  <li classe="menu{$node->hierarchy}">
  <a classe="menu{$node->hierarchy}"  
{/if}

Tu pourras dès lors appliquer les règles css sur :
.page-menu ul#primary-nav li a {border-top:1px solid white;}
.page-menu ul#primary-nav li.menu1 a {border-bottom:1px solid blue}
.page-menu ul#primary-nav li.menu2 a {border-bottom:1px solid red}
.page-menu ul#primary-nav li.menu1 a:active, .page-menu ul#primary-nav li.menu1 a:hover{border-top:1px solid blue;}
.page-menu ul#primary-nav li.menu2 a:active, .page-menu ul#primary-nav li.menu2 a:hover{border-top:1px solid red;}

Citation :cependant si je pourrait réussir à me débrouiller sur un site statique
A toi de jouer pour la finition, tu as tous les outils en main.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 24/09/2011

génial, merci beaucoup jean le chauve, cela fonctionne parfaitement.
je met mon topic en résolu.

par contre je n'ai toujours pas compris l'histoire du code source non actif ! c'était une blague en fait ?

j'ai juste dernière question dont je ne parvient pas à me dépatouiller avec le css

pourquoi la propriété:
Code :
.page-menu ul#primary-nav li.menu1 a {border-bottom:1px solid blue}
est active que lorsque nous sommes sur la page active, elle devrait s'afficher sous tout les onglets, non ?

encore merci pour ton aide qui m'a été précieuse Wink

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 26/09/2011

j'ai toujours un problème avec le css, mais je pense que cela vienne du php car en principe la bordure basse devrait s'afficher sur tout les onglets puisqu'elle est appliqué à:
.page-menu ul#primary-nav li.menu3 a

le problème est qu'il ya que la page active qui affiche la bordure basse, de même pour le hover qui ne s'affiche que sur l'onglet actif, je ne voit pas quoi modifier dans le php, pourrait tu m'aiguiller si c'est vraiment un problème de php ou si je peut regler ça seulement avec le css?

merci beaucoup

je met mon code css:
Code :
.page-menu ul#primary-nav li a {
    border-top:1px solid white;
}
.page-menu ul#primary-nav li.menu1 a {
    border-bottom:1px solid #50c3ed;
}
.page-menu ul#primary-nav li.menu2 a {
    border-bottom:1px solid #ff0036;
}
.page-menu ul#primary-nav li.menu3 a {
    border-bottom:1px solid #f6ab14;
}
ul#primary-nav li.menu4 a {
    border-bottom:1px solid #f93fb0;
}
.page-menu ul#primary-nav li.menu5 a {
    border-bottom:1px solid #8fbd1f;
}
.page-menu ul#primary-nav li.menu1 a:active, .page-menu ul#primary-nav li.menu1 a:hover {
    border-bottom:1px solid #50c3ed;
   border-top:1px solid #50c3ed;
}
.page-menu ul#primary-nav li.menu2 a:active, .page-menu ul#primary-nav li.menu2 a:hover {
    border-bottom:1px solid #ff0036;
    border-top:1px solid #ff0036;
}
.page-menu ul#primary-nav li.menu3 a:active, .page-menu ul#primary-nav li.menu3 a:hover {
    border-bottom:1px solid #f6ab14;
   border-top:1px solid #f6ab14;
}
.page-menu ul#primary-nav li.menu4 a:active, .page-menu ul#primary-nav li.menu4 a:hover {
    border-bottom:1px solid #f6ab14;
    border-top:1px solid #f93fb0;
}
.page-menu ul#primary-nav li.menu5 a:active, .page-menu ul#primary-nav li.menu5 a:hover {
    border-bottom:1px solid #8fbd1f;
   border-top:1px solid #8fbd1f;
}


[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 26/09/2011

Comme toujours, veillez à toujours passer votre code au validateur avant de chipoter aux css : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.lamienenette.fr%2F
Tu remarqueras très vite pourquoi ça ne marche pas.
Et en plus, c'est de ma faute Big Grin

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 26/09/2011

je pense que c'est de cette ligne que tu parle:

Error Line 82, Column 13: there is no attribute "classe"

<a classe="menu2"

pour moi tout va bien, a part le fait que normalement je ne mais pas de 'e' à la fin de class mais dans le validateur ce n'est pas le 'e' qui est en rouge mais l'apostrophe !?


après vérification c'est bien le e
qui était en trop apparement dans ce morceau de code:
Code :
{else}
  <li class="menu{$node->hierarchy}">
  <a class="menu{$node->hierarchy}"  
{/if}

du coup les bordure du bas sont bien toutes là et les bordures hautes en hover fonctionne parfaitement aussi,
par contre je me demande quel est l'attributs pour que la bordures haute soit activer lorsqu'on est sur la page car active ne sert lui que lorsque l'on maintien cliqué le bouton de la souris ! j'ai cherché mais il ne me semble pas avoir d'atributs pour cela focus et visited c'est différent, pourtant il me semble avoir déja vu ce système sur pleins de site, tu en sait quelques chose?

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 27/09/2011

Profite du validateur pour valider l'entièreté du code, il reste 5 fautes faciles à corriger.
Code :
.page-menu ul#primary-nav li a {
    border-top:1px solid white;
}
.page-menu ul#primary-nav li.menu1 a {
    border-bottom:1px solid #50c3ed;
}
.page-menu ul#primary-nav li.menu2 a {
    border-bottom:1px solid #ff0036;
}
.page-menu ul#primary-nav li.menu3 a {
    border-bottom:1px solid #f6ab14;
}
.page-menu ul#primary-nav li.menu4 a {
    border-bottom:1px solid #f93fb0;
}
.page-menu ul#primary-nav li.menu5 a {
    border-bottom:1px solid #8fbd1f;
}
.page-menu ul#primary-nav li.menu1 a:hover, .page-menu ul#primary-nav li.menu1 a.menuactive {
   border-top:1px solid #50c3ed;
}
.page-menu ul#primary-nav li.menu2 a:hover, .page-menu ul#primary-nav li.menu2 a.menuactive {
    border-top:1px solid #ff0036;
}
.page-menu ul#primary-nav li.menu3 a:hover, .page-menu ul#primary-nav li.menu3 a.menuactive {
   border-top:1px solid #f6ab14;
}
.page-menu ul#primary-nav li.menu4 a:hover, .page-menu ul#primary-nav li.menu4 a.menuactive {
    border-top:1px solid #f93fb0;
}
.page-menu ul#primary-nav li.menu5 a:hover, .page-menu ul#primary-nav li.menu5 a.menuactive {
   border-top:1px solid #8fbd1f;


[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 27/09/2011

5 fautes ??

bah pourtant le validateur n'a plus l'air de remettre le code en cause.

moi je comprend pas comment sa fonctionne le validateur, il met des choses en rouges mais ce n'est pas ça qui est pas bon.
c'est bisarement fait je trouve.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 27/09/2011

<LINK REL="SHORTCUT ICON" HREF="uploads/NCleanBlue/favicon.ico">
Il manque la slash de fermeture et l'xhtml n'accepte pas les MAJUSCULES.
<p>Tous droits réservés&nbsp;&copy; Copyright 2004-2011 - L'Amie-Nenette.fr<br />
Il manque la fermeture de <p>.

Il ne me reste plus qu'à corriger les fautes d'orthographe et ton site commencera à être propre.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 27/09/2011

oup's j'ai oublié la femeture du P, c'est vrai que là pour le coup je suis pas attentif, je vais essayer de faire attention, promis !

par contre <LINK REL="SHORTCUT ICON" HREF

c'est pas d'origine dans CMSMS ?

pour les fautes je ferait corrigé par mon amie lorsque le site sera fini.. Big Grin
ça c'est à cause du language sms ! erf :/

sinon tu ne sait comment je peut faire pour avoir la bordure haute affichés sur la page active ?

[RESOLU] Menu horizontal avec double bordure de couleur diférente - bess - 27/09/2011

Citation :<LINK REL="SHORTCUT ICON" HREF="uploads/NCleanBlue/favicon.ico">

ce genre de balises se doit d'être en minuscule

idem pour des <A HREF=''></A> et compagnie

[RESOLU] Menu horizontal avec double bordure de couleur diférente - Jean le Chauve - 27/09/2011

sheitaneb a écrit :sinon tu ne sait comment je peut faire pour avoir la bordure haute affichés sur la page active ?
Je t'ai donné le code css dans mon antépénultien message :lol:.

[RESOLU] Menu horizontal avec double bordure de couleur diférente - sheitaneb - 29/09/2011

salut, merci à vous deux pour vos messages,
j'ai modifier mes erreurs xhtml bess Wink

et pour le menu il est impécable, comme je le voulais, je n'avais pas fait attention dans ton antépénultien message Big Grin merci beaucoup jean le chauve, tu m'a été d'une grande aide.. Rolleyes