Afficher les modules dans le bon ordre en responsive

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

  • [Problème] Afficher les modules dans le bon ordre en responsive

    Bonjour tout le monde,

    j'ai un etit soucis avec mon template. J'aimerai faire en sorte que sur mobile, les colone left et right s'affichent après l'article.

    Là actuellement j'ai dans cet ordre, left, center, right. Moi j'aimerai avoir center, left, right.
    Comment puis je faire ?
    Merci d'avance.

    Exemple de page :
    www.actugame.net

  • #2
    Re : Afficher les modules dans le bon ordre en responsive

    Bonjour,

    Du boulot en perspective, si ton template ne le prévoit pas ...

    Il faut modifier le index.php pour que le contenu s'affiche dans l'ordre pour mobile. Dans ton cas, tu as un bloc gauche, puis un second bloc main qui contient le centre et la droite. Il faudra séparer tour cela.
    Ensuite, en vue desktop, il faudra récupérer l'ordre à grands coups de CSS. La colonne centrale sera déplacée vers la droite afin de laisser de la place pour celle de gauche (la 2è dans l'ordre de index.php) qui sera mise en float

    Bref, pas évident ...
    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


    • #3
      Re : Afficher les modules dans le bon ordre en responsive

      Un sacré bazar donc... je ne penses pas avoir ça dans mes compétences. Pour le moment je suis obligé de cacher le module gênant quand on est sur mobile.
      www.actugame.net

      Commentaire


      • #4
        Re : Afficher les modules dans le bon ordre en responsive

        Bonjour,

        J'utilise beaucoup le template joomspirit_99 qui prévoit le mode responsive pour les positions left & right (http://www.template-joomspirit.com/j...ory_pathway-12).

        Vous pouvez le télécharger à souhait et regarder comment la gestion "responsive" est faite : une classe "visible-desktop" dans le aside (ligne 370 pour le left, ligne 376 pour le right) que l'on retrouve un peu plus loin après le main_content en ligne 446 (pour le left) ou ligne 452 (pour le right )avec une classe hidden-desktop.

        Donc, c'est assez simple avec un peu de CSS et une "petite" modification du template.

        Attention: j'ai eu des problème avec googlemap par exemple car on duplique les modules (erreur du type map déjà définie).

        Pascal
        If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

        Commentaire


        • #5
          Re : Afficher les modules dans le bon ordre en responsive

          salut
          de mon côté je ne connais que Flexbox qui permet de modifier l'ordre des éléments facilement, mais ça veut dire modifier le comportement natif des colonnes
          CEd
          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


          • #6
            Re : Afficher les modules dans le bon ordre en responsive

            Vous pouvez le télécharger à souhait et regarder comment la gestion "responsive" est faite : une classe "visible-desktop" dans le aside (ligne 370 pour le left, ligne 376 pour le right) que l'on retrouve un peu plus loin après le main_content en ligne 446 (pour le left) ou ligne 452 (pour le right )avec une classe hidden-desktop.
            Salut pascal,
            Tu veux dire qu'il duplique le code ET que par mediaqueries, il en dissimule une des occurrences.
            C'est vrai que cela doit fonctionner, mais c'est un peu lourd
            Bootstrap doit permettre de déplacer les colonnes sans les dupliquer avec les pull et push

            L'autre avantage, d'un code dans l'ordre contenu, gauche, droite est d'optimiser le référencement en reléguant les éléments moins significatifs en fin de page
            Dernière édition par lomart à 05/12/2016, 09h10
            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
              Re : Afficher les modules dans le bon ordre en responsive

              Bonjour Lomart,

              que par mediaqueries, il en dissimule une des occurrences
              C'est juste du CSS très simple :

              Code:
              .hidden-desktop {
              display: none !important;
              }
              .visible-desktop {
              display: block !important;
              }
              Pascal
              If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

              Commentaire


              • #8
                Re : Afficher les modules dans le bon ordre en responsive

                C'est juste du CSS très simple
                Je viens de télécharger le template. Il affiche bien 2 fois le code et il en masque un des 2 selon la largeur écran.
                Lourd mais efficace

                Je persiste à penser qu'il est mieux de déplacer les colonnes en CSS pour optimiser le référencement.
                Un exemple en Boostrap 3.0 : http://getbootstrap.com/css/#grid-column-ordering
                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 : Afficher les modules dans le bon ordre en responsive

                  Il affiche bien 2 fois le code
                  ça fait pas du duplicate content ça ? pas sur que ce soit très efficace côté référencement ...
                  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


                  • #10
                    J'ai modifié l'ordre d'affichage responsive de Joomspirit pour placer le contenu avant les modules droit et gauche en exécutant :
                    Extensions -> Templates -> Styles -> oomspirit_99 - Par défaut -> Responsive design -> Display left and right column under the content in small resolution -> Yes
                    Chambres d'hôtes près du cirque de Navacelles

                    Les amis de Sherpagaun

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X