mettre un menu fun dans thème enfant cassiopea

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

  • mettre un menu fun dans thème enfant cassiopea

    Salut
    Bon j'essaie de passer a de "sérieux"; mettre un menu css fun si possible en bootstap 5
    Il y a des codes intéressants sur codepen ; https://codepen.io/rizkykurniawanritonga/pen/rNOgGa ou https://codepen.io/mburakerman/pen/xpZJYL
    ou en boostrap sur https://www.tutorialrepublic.com/twi...strap-navs.php comme https://www.tutorialrepublic.com/cod...nav-with-icons

    Comment faire, j'imagine en modifiant le fichier php qui contient la navigation ?
    Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

  • #2
    Perso, pour ajouter du javascript ou du css sur toutes les pages ou sur une sélection, je crée un module "custom HTML", je crée un Alternate Layout que je sélectionne dans le module
    Et dans cet alternate layout je mets p ex ceci.
    Du coup, c'est très propre...

    Code PHP:
    <?php
    // https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
    // Note: explains also how/when the hash is regenerated
    // See whether web assets in Joomla 4 would be helpful to reach the same result
    // https://docs.joomla.org/J4.x:Web_Assets
    // https://docs.joomla.org/J4.x:Http_Header_Management
    // https://www.joomlashack.com/blog/tutorials/web-assets-in-joomla-4/

    // with J!4 could apparently also use something like this (see also https://www.webmastros.com/joomla-htmlhelper-class/)
    // use Joomla\CMS\HTML\HTMLHelper;
    // HTMLHelper::_('script', 'mod_xxx/custom.js', ['version' => 'auto', 'relative' => true]); // Custom JS
    // HTMLHelper::_('stylesheet', 'mod_xxx/custom.css', ['version' => 'auto', 'relative' => true]); // Custom CSS
    use Joomla\CMS\Factory;
    defined('_JEXEC') or die;
    $doc Factory::getDocument();
    $doc->addStyleSheet("/media/templates/site/cassiopeia_carine/css/animate.min.css", array('version'=>'auto'));
    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

    Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Bonsoir,

      Comment faire, j'imagine en modifiant le fichier php qui contient la navigation ?
      Tu as raison, le mod_menu de Joomla ne passe pas les bonnes classes ni la bonne syntaxe HTML

      J'ai écrit un module menu personnalisé qui permet de construire le code qui va bien par paramétrage. Il charge aussi les css et js nécessaire.

      J'ai différé sa sortie pour cause de présentation de UP au Joomladay (merci Marc )

      Si tu as un besoin urgent, avant la mi-juin, je peux t'envoyer le module, mais la doc est très sommaire. Il est compatible J4 et me sert exactement pour ton besoin depuis plusieurs années.
      woluweb aime ceci.
      UP, le plugin universel à découvrir sur https//up.lomart.fr
      bgMax
      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

      Commentaire


      • #4
        sinon, pour inspiration, voici un Alternate Layout de mod_menu... pcq mon but était d'avoir un menu off-canvas et que Cassiopeia ne chargeait pas ce qu'il fallait pour cela et qu'il fallait aussi adapter la structure html.

        Voici :

        herve aime ceci.
        Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

        Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Bonjour
          Merci pour ces pistes que je vais certainement explorer.
          Néanmoins je ne suis pas sûr que cela solutionne ma demande. Je pensai avant tout à modifier le rendu HTML plutôt que l'ajout de code css
          Exemple code sur cassiopéa

          Code HTML:
          <nav class="navbar navbar-expand-lg"> <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Basculer la navigation"> <span class="icon-menu" aria-hidden="true"></span> </button> <div class="collapse navbar-collapse" id="navbar1"> <ul class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list"> <li class="metismenu-item item-101 level-1 default"><a href="/">Accueil</a></li><li class="metismenu-item item-112 level-1"><a href="/media-web">Médias web</a></li><li class="metismenu-item item-113 level-1 current active"><a href="/livre" aria-current="page">Livres</a></li><li class="metismenu-item item-114 level-1"><a href="/film">Films</a></li><li class="metismenu-item item-115 level-1"><a href="/video">Vidéos</a></li><li class="metismenu-item item-116 level-1"><a href="/audio-podcast">Audio, podcasts</a></li><li class="metismenu-item item-118 level-1"><a href="/autres">Autres</a></li></ul> </div> </nav>
          Alors que sur un site avec un menu fun, c'est
          Code HTML:
          <div class="container">
          <nav>
          <ul class="mcd-menu">
          <li>
          <a href="">
          <i class="fa fa-home"></i>
          <strong>Home</strong>
          <small>sweet home</small>
          </a>
          </li>
          <li>
          <a href="" class="active">
          <i class="fa fa-edit"></i>
          <strong>About us</strong>
          <small>sweet home</small>
          </a>
          </li>
          <li>
          <a href="">
          <i class="fa fa-gift"></i>
          <strong>Features</strong>
          <small>sweet home</small>
          </a>
          </li>
          <li>
          <a href="">
          <i class="fa fa-globe"></i>
          <strong>News</strong>
          <small>sweet home</small>
          </a>
          </li>
          <li>
          <a href="">
          <i class="fa fa-comments-o"></i>
          <strong>Blog</strong>
          <small>what they say</small>
          </a>
          <ul>
          <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
          <li>
          <a href="#"><i class="fa fa-group"></i>Our Team</a>
          <ul>
          <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
          <li>
          <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
          <ul>
          <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
          <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
          </ul>
          </li>
          <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
          </ul>
          </li>
          <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
          <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
          </ul>
          </li>
          <li>
          <a href="">
          <i class="fa fa-picture-o"></i>
          <strong>Portfolio</strong>
          <small>sweet home</small>
          </a>
          </li>
          <li>
          <a href="">
          <i class="fa fa-envelope-o"></i>
          <strong>Contacts</strong>
          <small>drop a line</small>
          </a>
          </li>
          <li class="float">
          <a class="search">
          <input type="text" value="search ...">
          <button><i class="fa fa-search"></i></button>
          </a>
          <a href="" class="search-mobile">
          <i class="fa fa-search"></i>
          </a>
          </li>
          </ul>
          </nav>
          </div>
          J'ai essayé d'adapter les termes mais je n'ai pas vraiment le rendu souhaité. Probable que je dois modifier le fichier qui comprends le menu? si oui comment ?

          Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

          Commentaire


          • #6
            Je pensai avant tout à modifier le rendu HTML plutôt que l'ajout de code css
            Tu es obligé d'ajouter le code CSS. mais les difficultés sont au niveau du HTML
            • Il faut mettre les bonnes classes dans le HTML ou modifier le CSS pour utiliser celles retournées de Joomla
            • dans ton exemple, tu as un titre et un sous-titre. Joomla ne sait pas gérer cela.
              Dans ce cas, j'utilise le caractère tilde pour les séparer dans l'item menu. Exemple : "Portfolio ~ sweet home".
              Ensuite la surcharge de mod_menu fait le code qui va bien pour avoir la forme attendue
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #7
              Bonjour
              Très bonne piste si je peux faire une surcharge en mettant mon code HTML
              J'ai donc généré un site enfant de cassiopéa puis je l'ai activé et j'ai créee une surcharge
              /templates/cassiopeia_test/html/mod_menu/
              J'ai une floppé de fichiers créees:
              collapse-default.php
              default.php
              default_component.php
              default_heading.php
              default_separator.php
              default_url.php

              j'ai trouvé le code html dans collapse-default.php
              j'ai ajoutté un terme juste pour voir si je pointer dans le bon dossier
              <nav class="navbar navbar-expand-md" aria-label="<?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?>">
              ....
              <p>test</p>
              </nav>
              Rien n'apparait dans le rendu et pas de cache !
              Une idée?
              Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

              Commentaire


              • #8
                C'est plutôt dans default_url.php
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  re
                  c'est du pur code php et je ne vois pas ce qui génère le rendu html ?
                  Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

                  Commentaire


                  • #10
                    Envoyé par herve Voir le message
                    re
                    c'est du pur code php et je ne vois pas ce qui génère le rendu html ?
                    On prépare les variables qui sont assemblées et retournées à la dernière ligne
                    UP, le plugin universel à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                    Commentaire


                    • #11
                      ok c'est plus compliqué que je ne pensai . je ne vois pas comment je peux m'approcher de l'html des codes exemples. Je vais chercher une alternative en attendant peut-être de confier ce travail a un dev. Je veux bien aussi tester ton module sans attendre 1 mois
                      Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

                      Commentaire


                      • #12
                        herve
                        Je t'ai envoyé un MP
                        UP, le plugin universel à découvrir sur https//up.lomart.fr
                        bgMax
                        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                        Commentaire


                        • #13
                          Mmmh, même mon exemple d Alternate Layout pour avoir un menu off canvass ne t aide pas ??
                          Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                          Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                          Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                          Commentaire


                          • #14
                            Bonjour
                            @woluweb
                            Envoyé par woluweb Voir le message
                            Mmmh, même mon exemple d Alternate Layout pour avoir un menu off canvass ne t aide pas ??
                            Ben j'ai un doute ou incompréhension car je veux pouvoir faire un beau menu principal (voir mes exemples au début du fil vs le menu principal que je trouve assez basique sur les cms dont joomla!)
                            Je ne vois pas comment un custom module peut remplacer le menu principal. Je parlai de surcharger le fichier qui contient la navigation du menu principal

                            Finalement si ce n'est pas si courant, peut-être que ce besoin est peut-être un peu compliqée a mettre en oeuvre.

                            Je suis parti sur le test du module de@lomart
                            A suivre

                            Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

                            Commentaire


                            • #15
                              j'ai pas le temps de faire le test pour toi, mais voici le paragraphe que je visais dans ma présentation :

                              See https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

                              There are two Alternate Layouts: one for “default” menu and one for “metismenu”:
                              • The files should be copied into /templates/cassiopeia/html/mod_menu
                              • There are a few lines of css to be added to /media/templates/site/cassiopeia/css/user.css in J4.1+ (was /templates/cassiopeia/css/user.css in J4.0)
                              Avec le lien Gist, tu as un exemple concret de code qui fait que mon menu "normal" devient un menu offcanvas sur smartphone
                              Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                              Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                              Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X