Forum CMS Made Simple FR
[résolu] Help intégration de son propre menu en CSS ? - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Graphisme (https://forum.cmsmadesimple.fr/forum-9.html)
+--- Sujet : [résolu] Help intégration de son propre menu en CSS ? (/thread-201.html)


[résolu] Help intégration de son propre menu en CSS ? - stephan53 - 26/02/2010

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS : 1.6.6
#~ Version du MLE si existante :
#~ Informations Système :
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
Bonjour à vous,


Je viens demander un petit coup de main pour intégrer mon propre menu dans mes pages CMSMS.

J'ai utilisé les liens suivants pour m'aider :

- l'aide du module MenuManager (en local)
- http://wiki.cmsmadesimple.org/index.php/User_Handbook/Admin_Panel/Layout/Menu_Manager/fr



Donc voici comment, après pas mal de changements j'ai procédé :


1) J'ai créé, dans le menu manager et via la fonction "ajout d'un nouveau gabarit", une nouvelle feuille que j'ai appelée menu_css_01. Elle apparaît bien dans mon gestionnaire de menu.
J'ai cliqué sur le bouton "par défaut" sur cette page.

2) Je suis allé sur mon gabarit principal (appelé "Menu gauche + 2 colonnes", et qui est une copie légèrement transformée de "ShadowMenu left + 1 column").
En allant l'éditer, j'ai ajouté la ligne suivante là où je veux voir apparaître mon menu :

<div id="menu_principal">{menu template="menu_css_01"}</div>

Où :
#menu_principal = la classe créée dans menu_css_01 (avec aussi #menu_principal a #menu_principal a:hover, #menu a:focus )


En faisant simplement ça j'obtiens sur mon site, à l'emplacement du menu :

#menu_principal
#menu_principal a
#menu_principal a:hover,
#menu a:focus

Soit la liste de mes classes, et sans aucune mise en page CSS Sad


3) Du coup suis aussi allé sur ma page des feuilles de styles. J'ai créé de nouveau un ficher menu_css_01 avec le même contenu que vu plus haut.
Je suis revenu sur mon gabarit "Menu gauche + 2 colonnes" et j'ai utilisé la fonction "attacher des feuilles de style" où j'ai intégré "menu_css_01" à mes feuilles de style déjà présentes.

Là le résultat change un peu puisque j'ai (toujours) :

#menu_principal
#menu_principal a
#menu_principal a:hover,
#menu a:focus

Mais avec la police du fichier "menu_css_01", ce qui est mieux... mais... :/



Une idée de l'endroit où je me suis trompé ? Smile


---------------------------------------------------

(PS : le fichier d'aide conseillait d'écrire {menu template="menu_css_01.tpl"} mais l'ajout de ".tpl" fait bugguer les pages)

[résolu] Help intégration de son propre menu en CSS ? - stephan53 - 26/02/2010

Pour compléter voici le code de mon menu :


Code :
#menu_principal {
    font: 1.20em Tahoma, Arial, sans-serif;
    list-style-type: none;
    letter-spacing: 0.2em;
    padding: 0;
    margin-left: 10px;
    margin-top: -15px;
}    

#menu_principal a {
    text-decoration: none;
    color:#897330;
    padding-left: 35px;
    line-height: 20px;
    background: url(uploads/images/fond_bouton01.gif)  left center no-repeat;
}
    
#menu_principal a:hover,  #menu a:focus {
    color:#333;    
    background-image: url(uploads/images/fond_bouton02.gif);
}


[résolu] Help intégration de son propre menu en CSS ? - stephan53 - 26/02/2010

Un point important que je n'ai pas respecté (page d'aide), le voici :

-------------------------------------------------


CMSMS est installé avec trois gabarit de menu.

Un de trois est un gabarit flexible prévu pour être mis en forme
par une feuille de style css:'cssmenu.tpl'.

Nous utiliserons ce dernier gabarit pour notre menu.

On précise donc dans notre balise le gabarit:

<div id="main_menu">{menu template='cssmenu.tpl'}</div>

-----------------------------------------------

Je revois ça car c'est là que j'ai fait une bourde dans mes démarches...

[résolu] Help intégration de son propre menu en CSS ? - stephan53 - 26/02/2010

Voilà c'était bien ça :

Au lieu d'écrire :
<div id="menu_principal">{menu template="menu_css_01"}</div>

Il me fallait écrire :
<div id="menu_principal">{menu template="cssmenu.tpl"}</div>

Après avoir :
- Mis ce menu 'cssmenu.tpl' par défaut dans le gestionnaire de menu
- Créé ma page CSS "menu_css_01" dans les feuilles de styles, puis l'avoir intégrée dans mon gabarit principal


C'est ok Cool

[résolu] Help intégration de son propre menu en CSS ? - bess - 26/02/2010

j'aimerais que tous les utilisateurs soient comme toi

j'ai un soucis
attendez je cherche
c'est bon j'ai réglé

Big Grin