Templates Bootstrap4 (comme Helix Ultimate) et extensions telles que Tabs, Slides etc

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

  • Templates Bootstrap4 (comme Helix Ultimate) et extensions telles que Tabs, Slides etc

    Juste une petite info que je partage : avec des templates basés sur le tout récent Bootstrap4 (comme le framework Helix Ultimate), on peut avoir certains effets de bord.
    Par exemple, j'ai réalisé hier que des extensions que j'utilise régulièrement telles que Tabs ou Slides (de Regular Labs dans mon cas) ne fonctionnent pas correctement.
    En cherchant, j'ai réalisé qu'il avait d'autres extensions (Offlajn, ...) et finalement j'ai trouvé cette info :
    https://www.regularlabs.com/extensio...rap-4-template

    Au moins c'est clair: il ne s'agit pas juste d'une ligne css à changer, c'est plus lourd que ça... et beaucoup d'extensions ne sont donc pas compatibles.

    (dans le cas de Tabs, changer d'onglet fonctionne... mais l'apparence des Onglets n'est pas changée. Si qqun trouve un petit workaround pour ça, je suis bien sûr preneur. Mais l'objectif du message ici était surtout de conscientiser qu'il peut y avoir des effets de bord à utiliser un template basé sur BS4).
    Présentations : slides.woluweb.be, ...
    Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
    Coordonnées complètes : www.woluweb.be

  • #2
    Bonjour Marc,

    Effectivement, ce sont des extensions nécessitant des surcharges ou directement obsolètes. Par exemple, il n'est plus nécessaire d'installer une extension avec une css à part pour créer des onglets ou des slides, bootstrap 4 possède déjà les qualités nécessaires. Le développeur du template ajoutera des addons au page builder pour faciliter la création soit dans une page ou dans un module. C'est pour cela que je possède beaucoup plus d'addon pour sppb car ce sont des compléments créés spécifiquement pour activer les éléments inclus à l'origine dans bootstrap 4.

    Perso, j'aime beaucoup cette méthode car cela évite d'obtenir des fichiers css dans des modules à indiquer dans robots.txt, on soigne le style des onglets en proposant plusieurs variantes, aucune extension supplémentaire qui pourrait bloquer lors du passage en joomla 4. Perso je travaille sur plusieurs templates dont une version helix ultimate avec material design. Je suis parti sur un developpement similaire à MDB ( https://mdbootstrap.com/material-design-for-bootstrap/ ) et cela se présente plutôt bien mais c'est du travail ! Cela me permet de revisiter en option des composants comme jcomment à la sauce php7+recaptcha invisible complétement intégré avec le design du template.

    Pour l'instant, je fais une pause car j'ai beaucoup de demandes sur la réglementation européenne et l'adaptation pour cms, pages html et applications. Bref, pas d'effets de bords mais je conseille de faire une vrai sélection pour éviter d'alourdir inutilement votre site.

    Dernière édition par daneel à 12/06/2018, 11h36
    Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

    Commentaire


    • #3
      Merci Yann pour tes lumières, toujours aussi précises

      En fait, je n'utilise que très rarement SP Page Builder (SPPB)
      Et installer SPPB juste pour faire des Tabs, ça ferait lourd dans ce cas-ci
      Surtout que c'est au sein des articles que les Tabs doivent apparaître et qu'il y en aura beaucoup (c'est un site présentant des rapports Santé avec plein de statistiques).

      Pour garder qqch de léger, j'ai installé l'extension Tabs de JoomlaShack, qui elle n'est pas basée sur Bootstrap et fonctionne donc sur Helix Ultimate (Bootstrap4).
      Code:
      Ca fonctionne quasi comme celle de RegularLabs : on tape
      {tab=Mon premier tab}
      blabla
      {tab=Mon second tab}
      toto
      {/tabs}
      Mais si qqun pense encore à une autre solution (ou peut-on utiliser un addon sppb sans installer tout sppb ?), je suis toujours curieux
      Dernière édition par woluweb à 15/06/2018, 10h35
      Présentations : slides.woluweb.be, ...
      Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
      Coordonnées complètes : www.woluweb.be

      Commentaire


      • #4
        Bonjour Marc,

        Tu as aussi https://up.lomart.fr/demo/action-tab

        Il charge un petit JS de 8Ko et la feuille de style est en SCSS ;-)

        UP peut aussi rendre responsive tes tableaux et plein d'autres choses
        woluweb likes this.
        Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
        ---
        UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Pas de souci Marc,

          sans le pagebuilder, on a déjà travaillé la-dessus via des shortcodes similaires, ce qui évite d'être supprimé par les filtres de l'éditeur html.
          Je pense que Loïc (lomart) pourrait les implanter via ses extensions (comme up) car il ne s'agit que d'éléments existants dans la librairie bootstrap.

          Cependant, je fais attention avec les shortcodes car j'exporte le contenu de site joomla sous d'autres formats ( flux xml type rss, json en rest api pour smartphone, assistant ou bot) ou sous google amp.

          Edit : grillé par lomart... effectivement on retrouve le système d'onglets dans l'extension "up"
          Dernière édition par daneel à 15/06/2018, 12h11
          Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

          Commentaire


          • #6
            lomart

            Suis-je bête : et dire que j'étais à la présentation de UP au #jd18fr :-D
            J'avais pas vu qu'il y avait aussi la possibilité de Tabs.
            'faut que j'étudie la liste par coeur

            Gé-nial !
            En plus, le fait qu'il bascule en accordéon sur smartphone est bien pensé...
            Et aussi le fait qu'il ne faut pas mettre de balises autour de chaque nom d'onglet, c'est encore mieux

            Tiens, en faisant quelques tests, je vois que l'option
            tab=accordion
            n'a pas l'air de déclencher (?)

            J'essayais aussi l'option
            title-tag=h5
            (après avoir mis mes titres à considérer comme onglets en h5 bien sûr), mais ça ne marche pas.

            Ai-je mal compris l'utilisation des options ?

            (Sinon, question idiote : je ne vois pas pourquoi il y a un espace de quelques pixels entre les Tabs proprement dits et le Contenu correspondant. Je ne vois rien en css dans ce sens...)
            Présentations : slides.woluweb.be, ...
            Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
            Coordonnées complètes : www.woluweb.be

            Commentaire


            • #7
              Marc, tu es un beta-testeur hors pair

              Il y avait bien un petit bug sur le paramètre accordion. C'est corrigé sur cette version https://up.lomart.fr/telechargements...actions/27-tab
              Il suffit de remplacer le dossier tab du dossier /plugins/content/up/actions/ par celui du zip

              J'en ai profité pour forcer le css pour l'espace sous les onglets. Je n'avais pas osé le faire jusqu'ici, car je voulais trouver la raison !

              En ce qui concerne le title-tag=h5, ça fonctionne bien chez moi avec ce shortcode
              Code:
              <h2>test h5</h2>
              <p>{up tab | title-tag=h5}</p>|
              <h5>question n°1+</h5>
              <p>texte pour la question n°1</p>
              <h5>{up icon=plus} question n°2</h5>
              <p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
              <h5>question n°3</h5>
              <p>4 : {up lorem=3,decorate}</p>
              <h5>question n°4</h5>
              <p>4 : {up lorem=2}</p>
              <p>{/up tab}</p>
              Si tu trouves d'autres soucis, n'hésite pas à les remonter

              Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
              ---
              UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                Loïc,
                Merci pour cette nouvelle version !

                Je confirme : tab=accordion fonctionne
                Pour le title-tag=h5, j'ai réessayé et ça marche. J'ai dû glisser...

                Merci aussi pour l'espace sous les onglets, c'est nickel !

                Le seul souci que j'ai rencontré concerne l'usage des ID ou des classes sur le titre H4 qui sert de nom d'onglet : j'ai découvert pcq sur le site j'utilise aussi RegularLabs Quick Index, qui ça ajoute une classe ou un ID à H4... et du coup il n'est plus capturé par ta moulinette (d'ailleurs, c'est vrai même si on ajoute une classe soi-même sur le titre H4 je pense). Bref, éventuellement ajouter un petit regex pour qu'il capture le H4, qu'il y a un ID et/ou une classe ou pas, ça pourrait faire sens...
                Présentations : slides.woluweb.be, ...
                Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
                Coordonnées complètes : www.woluweb.be

                Commentaire


                • #9
                  Ah, encore autre chose : un petit souci avec tab.css : à cause de ces lignes, je vois que partout sur mon site les listes à puces et numérotées sont affectées.
                  Il faudrait contextualiser ce "ul, li" j'imagine

                  ul, li {
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  }
                  Présentations : slides.woluweb.be, ...
                  Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
                  Coordonnées complètes : www.woluweb.be

                  Commentaire


                  • #10
                    Tu m'énerves je viens de corriger ma regex. j'avais prévu d'intercepter les attributs, mais il manquait un point ;(
                    A récupérer ici : https://up.lomart.fr/telechargements...actions/27-tab

                    Sinon, tu peux utiliser n'importe quelle balise. Elle est convertie en LI
                    Je viens de faire le test avec un h7, ça marche impec. Pas conventionnel, mais ça marche

                    Sinon, il serait mieux de mettre UP devant RegularLabs Quick Index dans la liste des plugins. Comme cela, le h4 sera converti avant l'analyse par l'autre plugin. Même sans UP, il serait plus logique de le lancer une fois tous le contenu mis à jour.
                    Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                    ---
                    UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                    Commentaire


                    • #11
                      Envoyé par woluweb Voir le message
                      Ah, encore autre chose : un petit souci avec tab.css : à cause de ces lignes, je vois que partout sur mon site les listes à puces et numérotées sont affectées.
                      Il faudrait contextualiser ce "ul, li" j'imagine

                      ul, li {
                      margin: 0;
                      padding: 0;
                      list-style: none;
                      }
                      Ces lignes ne servaient à rien. J'ai ajouté les propriétés dans les définitions contextualisées juste après dans le SCSS
                      A récupérer ici : https://up.lomart.fr/telechargements...actions/27-tab

                      Merci pour ce débogage. C'est une action que je n'utilise pas (encore), donc difficile de tester tous les cas en situation.
                      Dernière édition par lomart à 15/06/2018, 15h36
                      Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                      ---
                      UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        Yes !
                        Problème de ul,li bien corrigé

                        Pour l'ordre des plugins, j'y avais pensé, mais UP est un plugin de Content tandis que Index est un plugin System.
                        Donc pas de classement possible.

                        Concernant le regex, je confirme : ça marche maintenant si on ajoute une classe.
                        Avec {index} cependant j'ai encore un souci de conflit : j'ai deux Tabs, mais le contenu du Tab2 apparaît à la suite du contenu du Tab1 (et pas dans le Contenu du Tab2, qui du coup est vide).

                        Le plus simple serait que tu testes en installant Quick Index, tu pourras plus facilement voir ce qui coince (là pour moi c'est difficile : tu me pousses dans mes retranchements :-D)

                        Voilà, maintenant tu pourras causer avec cavo789 de la dure vie des développeurs quand je me mets à tester
                        Présentations : slides.woluweb.be, ...
                        Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
                        Coordonnées complètes : www.woluweb.be

                        Commentaire


                        • #13
                          Voilà, maintenant tu pourras causer avec cavo789 de la dure vie des développeurs quand je me mets à tester
                          Il me semble qu'il m'avait prévenu. Mais je pensais qu'il exagérait, mais non tu es redoutable

                          Je vais tester Quick Index. Tu mets des {index} dans le contenu des onglets ?

                          Perso, j'utilise Autotoc que tu peux voir à l’œuvre ici : https://kb.joomla.fr/procedures/sauvegarder-site-joomla
                          L'avantage est que tu n'as rien à faire et tu peux l'exclure pour une page
                          Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                          ---
                          UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire


                          • #14
                            Non non, le {index} je le mets en tête d'article, pas dans les Tabs (ne provoque pas un testeur :-D).
                            (et juste pour les articles où c'est utile)

                            Pour ce que je vois de auto-toc (https://extensions.joomla.org/extens...icle-auto-toc/) que je ne connaissais pas, c'est sensiblement la même chose.
                            Présentations : slides.woluweb.be, ...
                            Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
                            Coordonnées complètes : www.woluweb.be

                            Commentaire


                            • #15
                              Test fait avec juste un {index} en tête
                              QuickIndex est appelé en premier (normal pour un plugin system) et il modifie le contenu de l'article. Quand UP arrive, il a un code qui ne veut plus rien dire
                              Le seul moyen que j'ai trouvé est d'utiliser des balises h7 qui sont ignorés par QuickIndex

                              J'ai fait le test avec Autotoc qui est un plugin de contenu que l'on peut mettre après UP dans la liste des plugins. Ça marche bien sans configuration particulière.

                              Ma réflexion : je ne comprend pas qu'un plugin qui réalise un sommaire le fasse avant que le contenu soit mis en forme par les plugins content.
                              Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                              ---
                              UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                              bgMax
                              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                              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