Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

Gestion des menus personalisés
#1

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.8.2
#~ Nom de l'hébergeur : Freeheberg
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.9.1
#~ Installed Modules:
#~ CMSMailer: 2.0
#~ FileManager: 1.0.3
#~ MenuManager: 1.7.2
#~ ModuleManager: 1.4
#~ News: 2.11
#~ nuSOAP: 1.0.2
#~ Printing: 1.1.1
#~ Search: 1.6.7
#~ ThemeManager: 1.1.3
#~ TinyMCE: 2.8.1
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 10000000
#~ 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.5-pl1-gentoo
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 96M
#~ max_execution_time: 30
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 15M
#~ upload_max_filesize: 10M
#~ 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.0.44
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonjour à tous,

Alors voila, j'ai décidé de me lancer dans les CMS et j'ai choisi CMSMS pour premier jet.

J'avoue qu'il facile grandement les choses mais après avoir lu pas mal de doc et tuto, je sèche sur un truc qui ne dois pas être bien compliqué : la personnalisation des menus.

J'ai créé un design et un menu CSS3 déroulant horizontal en local html/css tout se passe bien.

J'importe mon gabarit, ma feuille CSS, le design s'affiche bien mais le menu ne prend pas zen considération mon css. Aurais-je loupé une étape ?

Voici le code CSS du menu inséré dans la feuille de style du gabarit principal :

Code :
a {
    color: #000;
    font-family:"Monotype Corsiva", "Times New Roman", Times, serif;
    font-size:18px;
}
#nav {
    margin: 0px;
    padding: 0px 0px 0;
    line-height: 100%;
    border-radius: 0em;

    /*-webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);*/

    background: transparent;
}
#nav li {
    margin: 0px;
    padding: 0 0 10px;
    float: left;
    position: relative;
    list-style: none;
}

#nav a {
    color: #000;
    text-decoration: none;
    display: block;
    padding:  10px 20px;
    margin: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

#nav .current a, #nav li:hover > a {
    background: #d1d1d1; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

    color: #fff;
    padding:10px 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#nav ul a:hover {
    background: #0399d4 !important; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
    background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

#nav ul {
    background: #ddd; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    border: solid 1px #b4b4b4;

}

#nav li:hover > ul {
    display: block;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
    left: 181px;
    width:220px;
    top: -3px;
}

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
}
html[xmlns] #nav {
    display: block;
}
* html #nav {
    height: 1%;
}

Merci d'avance,

Kaleidoscope.
Répondre
#2

sans aucun doute un oublis quelque part pas bien méchant

aurais tu un lien à tester ?

sinon utilise firebug en complément de firefox pour tester les empilages de CSS, tes instructions sont peut être cachées par d'autres et firebug te le montreras.

pour maitriser firebug regarde sur notre blog technique, il y a un tuto
Répondre
#3

Merci pour cette réponse rapide !

En fait je comprend mon problème mais je ne sais pas l'expliquer !

J'ai créé un couple HTML/CSS en local avec le menu déroulant.

Dans ma page html le code du menu :

Code :
<ul id="nav">
    <li class="current"><a href="http://www.webdesignerwall.com/">Accueil</a></li>
    <li><a href="#">Instruments</a>
        <ul>
            <li><a href="#">Acoustiques</a>
                <ul>
                    <li><a href="#">Classiques</a></li>
                    <li><a href="#">Flamenca</a></li>
                    <li><a href="#">Folks</a></li>
                    <li><a href="#">Manouches</a></li>
                </ul>
            </li>
            <li><a href="#">Electriques</a>
                <ul>
                    <li><a href="#">Lespaul</a></li>
                    <li><a href="#">Télécaster</a></li>
                    <li><a href="#">Stratocaster</a></li>
                </ul>
            </li>
            <li><a href="#">Basses</a>
                <ul>
                    <li><a href="#">Solid bodys 4 cordes</a></li>
                    <li><a href="#">Demi caisses 4 cordes</a></li>
                </ul>
            </li>
            <li><a href="#">Contrebasses</a>
                <ul>
                    <li><a href="#portfolio">Electrique solids bodys</a></li>
                </ul>
            </li>
            <li><a href="#">Ukukékés</a></li>
            <li><a href="#">Rénovations</a></li>
        </ul>
    </li>
    <li><a href="#">A vendre</a>
        <ul>
            <li><a href="#">Acoustiques</a></li>
            <li><a href="#">Electriques</a></li>
            <li><a href="#">Basses</a></li>
            <li><a href="#">Contrebasses</a></li>
            <li><a href="#">Ukukékés</a></li>
        </ul>
    </li>    
    <li><a href="#">L'atelier</a></li>
    <li><a href="#">Les artistes</a></li>
    <li><a href="#">Liens</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Donc dans ce cas ça fonctionne.
Cependant dans mon gabari de page CMSMS je n'ai pas changé l'id de mon ul comme sur ma page locale (<ul id="nav">)

Si je crée un nouveau modèle de menu via le manageur de CMSMS et que j'y copie colle mon code ici présent, ça fonctionne mais ça ne prends plus en compte la création a la main des pages dans l'interface.

(la personne qui va utiliser le site par la suite n'y connais rien en code et donc va simplement creer une nouvelle page)

Suis-je clair?

(moi je me trouve pas clair déjà x()
Répondre
#4

très clair ... et malheureusement c'est pas "bonheur dans ton corps"

je te pose donc la question suivante : quelle est l'intérêt d'utiliser un CMS si c'est pour ne pas utiliser ses fonctions primaires ? (genre la génération à la volée d'un menu de manière automatisée).

un conseil : démarre d'un gabarit de menu qui existe déjà dans les installs. Prend celui qui te semble réagir le mieux par rapport au tiens (en terme de position, de déclenchement, ...) et modifie le au fur et à mesure pour atteindre l'équivalent du tiens, mais en dynamique cette fois !
Répondre
#5

C'est justement parceque je veux utiliser la génération à la volée d'un menu de manière automatisée que j'ai pris un CMS.

Cependant je n'arrive pas à adapter mon CSS au menu de base.

Aurais-tu un lien vers un bon tuto concernant la modification des menus dans CMSMS (j'ai ai vu plein mais je suis peut pas tombé sur le bon)

merci d'avance,
Répondre
#6

:/ j'ai rien en tête concernant le tuto mais je laisse mes collègues donner leur avis sur ce sujet.

enfin c'est sur et certain : démarre d'un existant ou tu vas droit dans la chambre des tortures..
Répondre
#7

Ca marche,

En tout cas, merci pour ces réponses Smile

Les collègues, un petit conseil ?
Répondre
#8

je rajoute une couche : j'espère que tu maitrises un minimum smarty... tous les gabarits sont en smarty
Répondre
#9

Pas du tout mais ce n'est que du PHP non ?
Répondre
#10

une surcouche php et sans celui ci tu risques pas de comprendre comment ca fonctionne.

donc commence par te former une demi journée, t'en gagneras le double ensuite en non-perte-de-temps-inutile
Répondre
#11

Ok merci !
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 12 visiteur(s)