Joomladay francophone 2018 à Paris 18 et 19 mai

Appliquer un style css a un menu

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Appliquer un style css a un menu

    Bonjour,
    etant debutant sur joomla je n'arrive pas a appliquer un style css via l'administration du module de menu pour un menu, qui ce trouve en position top dans mon design, j'ai essayer toutes les class de mon templates mais aucunes ne passe
    Merci d'avances pour vos reponses.

  • #2
    salut,

    essaies de développer un peu ce que tu cherches à faire.
    Va faire un tour sur mon site ca t'éclairera un peu.
    As tu un lien vers ton site et un exemple concret de ce que tu veux ?
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

    Commentaire


    • #3
      Bonjour,
      j'ai essayer toutes les class de mon templates mais aucunes ne passe
      je ne vois pas d'endroit où l'on puisse appliquer une classe à module... donc jusque là normal que ça ne marche pas.
      Si tu parles des suffixes encore faut-il que les classes suffixées existent ...
      Schtroumpfe toi le Schtroumpf t'aidera.
      Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

      Commentaire


      • #4
        Si tu parles des suffixes encore faut-il que les classes suffixées existent ...
        Bonjour, oui je me suis mal exprimé c'est donc les classes suffixées
        j'utilise un template crée par template monster donc je pense quel existent
        sijoint une copie de mon template.css

        /* CSS Document */
        /*_________________________________________________ _________________TAGS_____________________________ ________*/
        body, button, td, th, div, p {font:normal 12px Tahoma; color:#606d78}
        input {color:#000}
        body {
        background:#202a32;
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 51px;
        padding-left: 0px;
        }

        td {line-height:16px; color:#000;}

        a {color:#000; text-decoration:underline}
        a:visited {color:#000;}
        a:hover {color:#000; text-decoration:none}

        label {color:#000;}
        p {line-height:16px; padding:0px 0px 0px 0px;}
        span a {color:#006699 !important}

        /*_________________________________________________ _________________CONTENT__________________________ ___________*/

        .inputbox {border:1px solid #46462f;}
        .article_indent, #component-contact {padding:00px 0px 0px 0px;}
        .article_separator {background:url(../images/article_separator.gif) repeat-x 0 50%; line-height:20px}

        .contentpaneopen td {line-height:17px}
        .contentpaneopen p {padding:0px 0px 0px 0px;}
        .contentpaneopen font {color:#000}
        .contentpaneopen img {margin:0px 15px 0px 0px;}
        .contentpaneopen li {background:url(../images/li_bg2.gif) no-repeat 0 0px; padding:0px 0px 0px 10px; line-height:10px}
        .contentpaneopen li a {color:#000; text-decoration:none; display:block; padding:2px 0px 0px 13px;}
        .contentpaneopen li a:hover {text-decoration:underline}

        /*______________________HEADING__________________*/

        .componentheading {color:#000; font-size:20px; font-weight:bold; padding:5px 0px 5px 0px; margin:0px 0px 10px 0px;}
        .contentheading {color:#000; font-size:16px; font-weight:bold; padding:10px 0px 0px 61px; background:url(../images/title_bg.gif) no-repeat 0 0}
        .buttonheading {padding:10px 0px 0px 0px;}

        /*______________________BUTTONS__________________*/

        .button, .validate {color:#000; font-size:11px; font-weight:normal; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:url(../images/button.gif); width:72px; height:27px; display:block; text-transform:none; text-align:center; border:none}
        /*button.button {background:#378ab7; color:#fff; background:url(../images/vote.gif); width:67px; height:20px; display:block;}

        /*______________________READ_MORE________________*/

        ////////////////////////////////////////////////////////////////////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////////////////////////
        code supprimé mess trop long !
        ///////////////////////////////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////
        /*________________________________________MAINMENU_ ____________________________________*/
        .module_menu {margin:0px 0px 10px 0px;}
        .module_menu div {}
        .module_menu div div {}
        .module_menu div div div{}
        .module_menu h3 {color:#fff; font-size:14px; font-weight:bold; padding:12px 0px 10px 30px; background:url(../images/box_h3.gif) no-repeat 0 0}
        .module_menu ul {padding:3px 0px 15px 0px;}
        .module_menu li {padding:2px 0px 2px 0px; background:url(../images/li_bg.gif) repeat-x 0 bottom }
        .module_menu li a {
        color:#555;
        font-size:12px;
        font-weight:normal;
        text-decoration:none;
        line-height:16px;
        padding:1px 0px 2px 0px;
        background:url(../images/menu_bullet.gif) no-repeat 0px 8px;
        display:block
        }
        .module_menu li a em {font-style:normal}
        .module_menu li a:hover {color:#ababab; text-decoration:none}
        .module_menu li a:visited{color:#555}

        /*________________________________________TOPMENU__ ___________________________________*/

        #topmenu {margin:0px 172px 0px 0px; height:37px}
        #topmenu .dt {}
        ul.menu-nav {padding:0px 0px 0px 0px;}
        ul.menu-nav li {display:block; float:left;}
        ul.menu-nav li a {color:#1f2a33 !important; font-weight:normal; font-size:14px; font-family:Arial; text-decoration:none; display:block; text-transform:none;background:url(../images/topmenu_left.gif) no-repeat 0 0; text-align:center; padding:0px 0px 0px 0px; width:84px; margin:0px 12px 0px 0px;}
        * html ul.menu-nav li a {height:33px}
        ul.menu-nav li a span {display:block; background:url(../images/topmenu_right.gif) no-repeat right 0; padding:4px 10px 5px 10px;}
        ul.menu-nav li a span em {font-style:normal;}

        ul.menu-nav li a:hover {color:#1f2a33 !important; font-weight:normal; font-size:13px; text-decoration:none; background:url(../images/topmenu_left_act.gif) no-repeat 0 0}
        ul.menu-nav li a:hover span {background:url(../images/topmenu_right_act.gif) no-repeat right 0; padding:4px 0px 5px 0px;}

        ul.menu-nav li.active a {color:#6b7075 !important; font-weight:normal; font-size:13px; text-decoration:none; background:url(../images/topmenu_left_act.gif) no-repeat 0 0}
        ul.menu-nav li.active a span {display:block;background:url(../images/topmenu_right_act.gif) no-repeat right 0; padding:4px 0px 5px 0px;}

        a.menu-nav:visited {color:#1f2a33}
        /*________________________________________LOGINFORM _____________________________________*/

        .module_s2 {margin:0px 0px 0px 0px;}
        .module_s2 div {}
        .module_s2 div div {}
        .module_s2 div div div {}
        .module_s2 h3 {color:#fff; font-size:14px; font-weight:bold; padding:12px 0px 10px 30px; background:url(../images/box_h3.gif) no-repeat 0 0}
        .module_s2 label {color:#7b7b7b; padding:0px 0px 0px 1px; display:block; vertical-align:middle; font-size:12px; text-transform:lowercase}
        .module_s2 p, label.remember {color:#7b7b7b; padding:0px 0px 0px 0px; font-size:11px; font-weight:normal;}
        .module_s2 a {color:#7b7b7b !important; font-size:11px; text-decoration:underline;}
        .module_s2 a:hover {color:#7b7b7b; text-decoration:none}
        .module_s2 form {text-align:left; padding:0px 0px 0px 0px;}
        .module_s2 form div {width:65px; margin:auto;}
        * html .module_s2 form div {width:65px; margin:0px 0px 0px 0px;}
        .module_s2 .inputbox {width:146px !important; height:18px; border:1px solid #525252; margin:2px 0px 2px 0px; padding:0px 0px 0px 3px; color:#818181; vertical-align:middle; background:#fff;} /* inputbox */
        .module_s2 .button {display:block; border:none; background:none; color:#23a8d4; font-size:12px; margin:10px 0px 0px 0px; vertical-align:middle; text-align:center; padding:0px 0px 0px 0px; font-family:Tahoma; width:auto} /* button */
        #mod_login_remember {margin:0px 10px 0px 0px; vertical-align:middle; background:none; border:none; float:left; display:block; width:12px} /*checkbox*/

        .required {border:1px solid #46462f; margin:0px 0px 0px 0px;}
        input.requred {border:none !important}

        /*_________________________________________________ __________INDEX.PHP_STYLES________________________ _________*/

        .main {width:949px;}

        #top {height:37px; overflow:hidden}
        #bar {
        height:21px;
        }
        #bar div {background:url(../images/bar_bg.gif) repeat-x 0 0 #505a62; border:1px solid #505050}
        #border {border:none; border-bottom:1px solid #fff}
        #bar div div {
        height:20px;
        background:none;
        border:none
        }
        #border1 {border:1px solid #868585; border-top:none}
        #border2 {border:1px solid #fff; background:#fff}
        #header {background:url(../images/header_bg.gif) repeat-x 0 0}
        #header .bg {background:url(../images/header.jpg) no-repeat 0 0; height:228px}
        #header .space {padding:94px 0px 0px 71px;}

        #content {padding:1px 0px 0px 0px;}
        .box_indent {padding:10px 15px 10px 31px;}


        .c1, .c3 {background:#efefef; width:207px}
        .c2 {width:100%}
        .c2 .indent {padding:5px 28px 28px 28px}

        .right_bg {background:url(../images/right_bg.gif) repeat-y 0 0;}
        .right_top {background:url(../images/right_top.gif) no-repeat 0 0;}
        .right_bot {background:url(../images/right_bot.gif) no-repeat 0 bottom; padding:0px 0px 10px 0px;}

        #footer {
        padding:0px 0px 0px 0px;
        width: 949px;
        }
        #footer .space {padding:0px 7px 0px 7px; text-align:left}
        #footer .space div {padding:20px 0px 0px 20px; color:#efefef !important; font-weight:normal; font-size:12px; text-align:center}
        #footer a {color:#efefef; font-size:12px; text-decoration:underline;}
        #footer a:hover {text-decoration:none}


        .main_t {background:url(../images/main_t.gif) repeat-x 0 0 #b2b1b1}
        .main_b {background:url(../images/main_b.gif) repeat-x 0 bottom}
        .main_tl {background:url(../images/main_tl.gif) no-repeat 0 0}
        .main_tr {background:url(../images/main_tr.gif) no-repeat right 0}
        .main_bl {background:url(../images/main_bl.gif) no-repeat 0 bottom}
        .main_br {background:url(../images/main_br.gif) no-repeat right bottom}
        .indent {padding:18px 12px 29px 12px;}
        j'essais d'apliquer la classe Topmenu dans la gestion des modules mais rien a faire j'ai fait des copier collé de toutes les classes pareil ! je ne doit pas faire les choses de la bonne manière je pense ..... Pouvez vous m'eclairer !

        Commentaire


        • #5
          Bonjour,
          j'ai toujours un peu de mal...
          j'essaie d'apliquer la classe Topmenu dans la gestion des modules mais rien à faire
          et tu faisais ça comment ? A priori c'est une classe qui doit être attribuée d'office à un emplacement en haut de page dans l'index.php de ton template : <div id="topmenu">...

          Les suffixes que je vois sont -nav (qui répond peut-être à ton besoin ?) pour les menu top si j'en crois le commentaire et _s2 pour le login si j'en crois le commentaire derechef.
          Schtroumpfe toi le Schtroumpf t'aidera.
          Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

          Commentaire


          • #6
            pour situer le problème, le template que tu utilises ne te permet pas d'afficher le menu tel que montrer dans la démo, c'est ça ?
            as-tu bien publié ton module de menu avec le style "liste" ??
            sinon tu ne peux pas utiliser le ul.menu-nav
            voir ici pour les détails :
            http://www.joomlack.fr.nf/index.php/...us-joomla.html
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              Envoyé par ced1870 Voir le message
              pour situer le problème, le template que tu utilises ne te permet pas d'afficher le menu tel que montrer dans la démo, c'est ça ?
              as-tu bien publié ton module de menu avec le style "liste" ??
              oui tu a bien compris ! c'est bien ça mais le probleme c'est que la classe existe bien'au vu du template.css' je pense que c'est moi qui saisie mal les informations ?? Comment faite vous pour saisir vos css dans le champ suffixes et quel champ choisir exactement ? lors de la creation du module du menu !

              Commentaire


              • #8
                est-ce que ton menu (dans l'administration du module) est défini comme suit :
                type de menu : liste

                ??
                Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                http://www.template-creator.com Outil de création de templates
                Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                Commentaire


                • #9
                  oui Ced j'ai essayer avec l'option liste mais ça marche toujours pas
                  Pour le moment j'ai integerer le menu en balise div faite avec l'editeur Wysiwyng
                  et ça marche sauf pour le plan xmap. mais mon menu n'est pas pris en compte dans le xmap.
                  je pense ne pas faire la bonne manip car au vu du template il y a tout ce qu'il faut.

                  Une autre question qui a rien a voir avec ce sujet connais tu le module ou mambot qui me permet de transformer joomla en site pour agence immobiliere. merci d'avance

                  Commentaire


                  • #10
                    Salut!
                    Est-ce toi qui a créé ton menu?
                    Si c'est le cas dans la gestion de ton module et l'onglet 'Paramètres avancés' tu as un champs 'Suffixe de classe de module'. Là tu rentres le nom de ta classe css (par exemple '_monmenu')
                    Après dans ta feuille de style tu crées ta classe comme suit:

                    Code:
                    div.moduletable_monmenu {
                    
                    ici copie les propriétés css qui t'interressent ou rédige les toi-même
                    
                    }
                    Je pense que ça devrait fonctionner

                    Commentaire

                    Annonce

                    Réduire
                    1 sur 2 < >

                    C'est [Réglé] et on n'en parle plus ?

                    A quoi ça sert ?
                    La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                    Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                    Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                    Comment ajouter la mention [Réglé] à votre discussion ?
                    1 - Aller sur votre discussion et éditer votre premier message :


                    2 - Cliquer sur la liste déroulante Préfixe.

                    3 - Choisir le préfixe [Réglé].


                    4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                    2 sur 2 < >

                    Assistance au forum - Outil de publication d'infos de votre site

                    Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                    Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                    Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                    UTILISER À VOS PROPRES RISQUES :
                    L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                    Problèmes connus :
                    FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                    Installation :

                    1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                    Archive zip : https://github.com/AFUJ/FPA/zipball/master

                    2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                    3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                    4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                    5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                    6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                    et remplacer www. votresite .com par votre nom de domaine


                    Exemples:
                    Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/
                    Pour executer le script: http://www..com/fpa-fr.php

                    Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/cms/
                    Pour executer le script: http://www..com/cms/fpa-fr.php

                    En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                    Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                    Voir plus
                    Voir moins
                    Travaille ...
                    X