Mise en page d'articles avec Jetstrap

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

  • Mise en page d'articles avec Jetstrap

    Hello

    il y a quelque temps j’étais tombé sur Jetstrap, mais je ne m’y étais jamais vraiment intéressé, c’est chose faite et je dois dire que c’est un outil formidable pour la conception de pages web basées sur le framework Bootstrap, ça tombe bien car c’est le framework que Joomla 3 utilise. Grâce à cet outil, la création d’articles dans Joomla devient un vrai jeu d’enfant.
    Seul hic le comportement de la mise en page n’est pas le même une fois que le code est collé dans un article de mon template, bien que celui-ci soit responsive.
    Cela fait depuis hier que je me bats avec ce problème, j’en suis arrivé à la conclusion que Jetstrap ne fait pas référence au même fichier css de Bootstrap que celui qui se trouve dans Joomla, en effet à regarder de près Jetstrap lie un fichier css combined (et non minified) qui se trouve sur un CDN, pourtant au moment de créer un projet sur la plateforme Jetstrap, on a le choix entre la version 2.3.2 ou 3 de Bootstrap, qui sont les dernières versions du framework.
    Quelle est alors cette différence entre minified et combined?
    Est-ce que la dernière version de Joomla 3 utilise les mêmes versions css et jQuery que Jetstrap utilise, à savoir la version 2.3.2 pour le fichier css de Bootstrap et la version 1.7.2 pour jQuery?
    Cela m’embête fort, car j’aurai bien voulu adopter ce service pour les futures mises en pages de me articles.

    Voici un simple exemple d’une page générée par Jetstrap:

    Code HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
        rel="stylesheet">
    </head>
    
    <body>
    <div class="container">
      <div class="row-fluid">
        <div class="span4">
          <h3> Span 4 </h3>
          <p> Content </p>
        </div>
        <div class="span4">
          <h3> Span 4 </h3>
          <p> Content </p>
        </div>
        <div class="span4">
          <h3> Span 4 </h3>
          <p> Content </p>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </body>
    </html>
    Si je colle le code dans un article de Joomla en passant par un plug-in tel quel Sourcerer pour y intégrer le lien:

    Code HTML:
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    le problème est résolu, mais dans ce cas-ci d’autres règles css prennent le dessus sur mon template donc cela ne résout pas vraiment le problème…

    Si je place le code suivant dans mon article, donc sans aucun référencement aux fichiers css et js, je n’ai plus le même comportement, pourtant ce sont des règles css propre à Bootstrap donc des règles que Joomla devrait interpréter de la même façon... Que faut-il en déduire?


    Code HTML:
    <div class="container">
      <div class="row-fluid">
        <div class="span4">
          <h3> Span 4 </h3>
          <p> Content </p>
        </div>
        <div class="span4">
          <h3> Span 4 </h3>
          <p> Content </p>
        </div>
        <div class="span4">
          <h3> Span 4 </h3>
          <p> Content </p>
        </div>
      </div>
    </div>
    Si quelqu’un a envie de se pencher sur le problème afin de m’éclaircir la lanterne…. Merci!

    P.S. À titre d'information, le service Jetstrap est gratuit pour un projet, après il faut mettre la main au portefeuil, mais honnêtement déjà avec un projet on s’en sort bien, il suffit d’effacer et de récréer un projet pour chaque nouveau article que l’on veut créer dans Joomla

  • #2
    Re : Mise en page d'articles avec Jetstrap

    Retourne à tes margaritas, vacancier !!! Just kiddin'

    Re ta question
    pour tes tests bootstrap, tu ferais mieux de conserver les fichiers bootstrap css ou js distribués avec le package j315

    Si je place le code suivant dans mon article, donc sans aucun référencement aux fichiers css et js, je n’ai plus le même comportement, pourtant ce sont des règles css propre à Bootstrap donc des règles que Joomla devrait interpréter de la même façon... Que faut-il en déduire?
    Que se passe-t-il qui ne te convient pas ?
    J'ai testé ton code dans une version 315 avec le template beez3 en ayant pris soin de le paramétrer dans Options-->Composants requérant Bootstrap --> com_content
    et ca me parait correct.

    PS : si tu veux te lancer dans l'exploration de Boot 3, j'ai modifié les fichiers nécessaires ici (toujours pour beez3)
    https://github.com/ghazal/boostrap3test

    MAIS à tes risques et périls ...
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Re : Mise en page d'articles avec Jetstrap

      Retourne à tes margaritas, vacancier !!! Just kiddin'
      ...eheheh, faut bien que quelqu'un en profite ...

      Je viens de faire une installation toute propre de Joomla 3.1.5 en local en utilisant le template Beez 3 et en effet je ne rencontre pas le problème... même sans paramétrer les options "Composants requérant Bootstrap" ça passe Comment pallier ce problème avec mon template YOOtheme? pourtant cela devrait passer, comprend pas...

      Bootstrap 3 ça sera après les vacances
      Dernière édition par porcini à 23/08/2013, 00h22

      Commentaire


      • #4
        Re : Mise en page d'articles avec Jetstrap

        Là, je crois que tu es mal tombé avec un template yootheme parce qu'ils sont parmi ceux qui justement ne s'appuient pas sur bootstrap mais sur leur propre front-end framework, UIKit, pas mal du tout par ailleurs.
        UIKit est associé à leur framework WARP.
        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Re : Mise en page d'articles avec Jetstrap

          ... en effet à partir de Warp 7, mais les templates faisant appel à Warp 6 utilisent Bootstrap et c'est le cas de mon template...

          Commentaire


          • #6
            Re : Mise en page d'articles avec Jetstrap

            ah !
            dans mon yoomaster warp 6, seulement les css, pas le JS.

            Dans head.php
            yoo_master/warp/systems/joomla/layouts/head.php

            Code:
            // load jQuery
            JHtml::_('jquery.framework');
            
            // load bootstrap styles
            if ($bootstrap = $this['path']->url('css:bootstrap.css')) {
            	$this['system']->document->addStyleSheet($bootstrap);
            }
            Code:
            JHtml::_('jquery.framework');
            ne charge QUE jQuery

            Ref :
            J3.1:Javascript Frameworks - Joomla! Documentation
            http://docs.joomla.org/Javascript_Frameworks
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Re : Mise en page d'articles avec Jetstrap

              … heu, pour être honnête j’ai du mal à suivre le dernier message...

              J’ai peut-être oublié d’expliquer la partie la plus importante.
              Le template que j’utilise intègre Bootstrap mais n’est pas responsive, il y en a un petit paquet chez YOOtheme sous Warp 6 qui ne le sont pas (ils sont repris dans le tuto que je link plus loin).
              Pour pallier ce manque j’ai trouvé un tuto qui explique la procédure à suivre et je dois dire que la mise à jour fonctionne bien: mise en page fluide, dimensions en %… bref tout fonctionne SAUF le problème que j’ai énoncé plus haut.

              Puisqu’une image vaut mieux qu’un grand discours, voici mon problème illustré.

              Ici le projet Jetstrap.
              Avec une structure de type:

              Code HTML:
              <div class="container">
                <div class="row-fluid">
                  <div class="span4">
                    <h3> Span 4 </h3>
                    <p> Content </p>
                  </div>
                  <div class="span4">
                    <h3> Span 4 </h3>
                    <p> Content </p>
                  </div>
                  <div class="span4">
                    <h3> Span 4 </h3>
                    <p> Content </p>
                  </div>
                </div>
              </div>
              les blocs se redimensionnent normalement et arrivés à une certaine taille d’écran ils se superposent les uns en dessous des autres. Tout est ok.

              Ici le site en construction et la page qui me donne du souci.
              Avec la même structure énoncée plus haut, le bloc principal et son contenant restent figés, par contre mon composant com_content lui se redimensionne sans problème.
              Si je change la classe container en container-fluid (c'est la règle que j'ai adopté dans mon cas) le problème est résolu à moitié, le contenant se redimensionne, mais arrivé à une certaine résolution d’écran les blocs ne se superposent jamais, ils rétrécissent jusqu’à rendre le contenu illisible… that’s my problem!

              Donc pour faire bref, on va dire que cela fonctionne à moitié et pas vraiment comme c'est le cas dans Jetstrap ou dans le template Beez3...
              Dernière édition par porcini à 23/08/2013, 00h27

              Commentaire


              • #8
                Re : Mise en page d'articles avec Jetstrap

                Autant pour moi pour bootstrap.js qui effectivement ne gère pas les "grids".

                En revanche, du point de vue CSS, il y a peut-être un pb sur ta version (sur toukoul).
                J'ai fait un quick diff sur
                bootstrap.css original/
                bootstrap.css joomla315/
                bootstrap.css ta version

                - entre bootstrap.css original et bootstrap.css ta version
                pas mal de différences
                - entre bootstrap.css original et bootstrap.css joomla315 (in /media/jui/css/bootstrap.css)
                quelques petites diffs, surtout au niveau .modal

                * suggestion
                faudrait peut-être récupérer aussi bootstrap-responsive.css
                in /media/jui/css/bootstrap-responsive.css

                checker qd même les conflits potentiels avec responsive.css de Yootheme

                Cela dit, il y a aussi la maniere dont le bloc bootstrap est appelé, via l'API joomla (JHtml::_('bootstrap.framework'); ) ou ta méthode perso.
                Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                Commentaire


                • #9
                  Re : Mise en page d'articles avec Jetstrap

                  ... fini les vacances, retour à la case départ... et dans le bordel de mes travaux à la maison, pas marrant comme retour

                  Tout d’abord merci pour la réponse et le temps dédié à résoudre mon problème.
                  Donc si j’ai bien compris le fichier qui pose problème est le fichier Bootstrap en relation au template YOOtheme?
                  J’avoue être un peu pommé avec tous ces fichiers Bootstrap, il y en a beaucoup dans la hiérarchie de Joomla…
                  Quelle serait alors la meilleure solution pour avoir un fichier Bootstrap adoptant le même comportement que celui par exemple du template Beez3? …ou devrais-je plutôt dire quels sont les fichiers Bootstrap à comparer et à corriger afin d’avoir le résultat souhaité?
                  Dernière édition par porcini à 25/08/2013, 10h26

                  Commentaire


                  • #10
                    Re : Mise en page d'articles avec Jetstrap

                    Hey,
                    NB: je m'appuie sur yoo_master

                    normalement, tu devrais pouvoir te baser sur :
                    JHtml::_('bootstrap.loadCss', true);
                    pour les CSS, si tu n'as pas besoin de bootstrap JS

                    Rajoute cette ligne dans :
                    templates/yoo_master/layouts/template.config.php
                    vers la ligne 75
                    // load css
                    JHtml::_('bootstrap.loadCss', true);
                    $this['asset']->addFile('css', 'css:base.css');
                    $this['asset']->addFile('css', 'css:layout.css');
                    $this['asset']->addFile('css', 'css:menus.css');
                    Mais (j'ai pigé d'où vient cette version css allégée de bootstrap) il faut commenter ces lignes dans :
                    templates/yoo_master/warp/systems/joomla/layouts/head.php

                    // load bootstrap styles
                    /*
                    if ($bootstrap = $this['path']->url('css:bootstrap.css')) {
                    $this['system']->document->addStyleSheet($bootstrap);
                    }
                    */
                    Comme cela, tu ne récupères que les fichiers bootstrap du package présents dans
                    media/jui/css/
                    Mais je persiste à penser que ce n'est pas une super idée de tester bootstrap dans un template yootheme.
                    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                    Commentaire


                    • #11
                      Re : Mise en page d'articles avec Jetstrap

                      … ça marche

                      Par contre j’aimerai bien comprendre la manoeuvre effectuée, sinon ça va m’énerver et je vais me sentir con pendant le restant de mes jours… donc si tu peux me dire si mon raisonnement et juste…

                      En indiquant JHtml::_('bootstrap.loadCss', true); dans le fichier template.config.php je demande à mon template de charger le fichier bootstrap.css qui se trouve dans le dossier media/jui/css/.

                      En commentant dans le fichier head.php les lignes:
                      Code:
                      // load bootstrap styles
                      /*
                      if ($bootstrap = $this['path']->url('css:bootstrap.css')) {
                      $this['system']->document->addStyleSheet($bootstrap);
                      }
                      */
                      j’évite à mon template de charger le fichier bootstrap.css propre au template YOOtheme.
                      Par contre à chaque mise à jour de warp c’est rebelote pour les changements (commenter les lignes) dans le fichier head.php

                      Je ne comprends toujours pas cette réticence avec Bootstrap et les templates YOOtheme, c’est par rapport à quoi?

                      Commentaire


                      • #12
                        Re : Mise en page d'articles avec Jetstrap

                        En indiquant JHtml::_('bootstrap.loadCss', true); dans le fichier template.config.php je demande à mon template de charger le fichier bootstrap.css qui se trouve dans le dossier media/jui/css/.
                        Correct.
                        Plutôt LES fichiers CSS, y compris les fichiers bootstrap "extended" et "responsive".

                        j’évite à mon template de charger le fichier bootstrap.css propre au template YOOtheme.
                        Par contre à chaque mise à jour de warp c’est rebelote pour les changements (commenter les lignes) dans le fichier head.php
                        Correct.
                        Pour l'update, il arrive un moment du dev joomla où on controle ce qu"on fait.

                        Je ne comprends toujours pas cette réticence avec Bootstrap et les templates YOOtheme, c’est par rapport à quoi?
                        LOL.
                        Rien de bouleversant, simplement je pense que si les devs de yootheme ont calibré leurs templates pour leur framework (UIKit), implémenter en même temps bootstrap, alors que les deux font à peu près la même chose, ça fait un peu doublon.

                        Ils ont d'ailleurs mis en place l'équivalent de jetstrap :
                        http://www.getuikit.com/docs/customizer.html
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          Re : Mise en page d'articles avec Jetstrap

                          Salut,
                          je viens de m’apercevoir que j’ai à nouveau le même problème de redimensionnement à partir des éléments d’une petite boutique en construction via le composant HikaShop, faut-il en déduire que ce composant utilise lui aussi une autre version de Bootsrap? … ça commence à partir dans tous les sens

                          ...simplement je pense que si les devs de yootheme ont calibré leurs templates pour leur framework (UIKit), implémenter en même temps bootstrap, alors que les deux font à peu près la même chose, ça fait un peu doublon
                          oui en effet, je n’ai toujours pas compris ce changement de direction de la part des devs de YOOtheme, je suppose qu’ils veulent être autonomes à tout point de vue, ainsi tout sera fait maison, mais c’est vrai que tenir à jour plusieurs frameworks cela va être plus du boulot pour eux.
                          De toute façon de mon côté ce sont les derniers templates que je vais utiliser pour la création de sites, non pas parce qu’ils ont changé de framework, mais parce qu’ils ont un support exécrable et ça pour moi c’est inacceptable.

                          Commentaire


                          • #14
                            Re : Mise en page d'articles avec Jetstrap

                            Rien de bouleversant, simplement je pense que si les devs de yootheme ont calibré leurs templates pour leur framework (UIKit), implémenter en même temps bootstrap, alors que les deux font à peu près la même chose, ça fait un peu doublon.
                            …après UIKit l'équipe de YOOtheme lance son propre CMS PageKit, maintenant on comprend pourquoi leur support est si merdique: Joomla, WordPress et maintenant Pagekit il faudra m'expliquer comment on peut avoir un support digne de ce nom avec quatre gringos à la tête de leur support, (voir bas de page) sans oublier que Monsieur Bob ne répond plus à aucun message depuis le mois de juillet donc ce qui nous ramène à 3 gringos… tout en sachant que l'aide entre utilisateurs est quasi nulle je vous laisse imaginer la qualité de leur support: zéro.
                            Je regrette d'avoir souscrit un abonnement à leurs templates, maintenant j'y suis lié pour x mois et par contrainte… à bon entendeur...
                            Dernière édition par porcini à 05/11/2013, 15h53

                            Commentaire


                            • #15
                              Re : Mise en page d'articles avec Jetstrap

                              Envoyé par ghazal Voir le message
                              Là, je crois que tu es mal tombé avec un template yootheme parce qu'ils sont parmi ceux qui justement ne s'appuient pas sur bootstrap mais sur leur propre front-end framework, UIKit, pas mal du tout par ailleurs.
                              UIKit est associé à leur framework WARP.
                              Salut Ghazal,
                              je reviens sur ce post, non pas sur le sujet de Jetstrap, mais bien sur la politique de YOOtheme et l’adoption de deux frameworks pour un même thème, à savoir UIkit et Bootstrap.
                              J’aurais voulu avoir l’avis d’un développeur quant à ce type de manœuvre que j’ai du mal à comprendre.
                              Quel est l’intérêt à adopter deux frameworks? Ce n’est pas deux fois plus de travail? Tu peux m’éclaircir à ce sujet? Merci

                              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

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X