Bootstrap et masquage de modules ...

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

  • [Problème] Bootstrap et masquage de modules ...

    Bonjour,

    Il était une fois (en 2016) un utilisateur Joomla qui utilisait les classes hidden-phone et visible-phone pour masquer ou afficher certains modules en fonction de la taille de l'écran ; j'avais choisi cette astuce pour changer la taille de la police de caractères dans le header du site (module contenu personnalisé).

    Maintenant les choses ont changé : Joomla 4 et template basé sur T4 de Joomlart qui déclare utiliser Bootstrap4 alors que je vois du bootstrap5 dans les plugin system/T4 ...

    C'est quoi la commande magique pour masquer ou rendre visible un module en fonction de la taille de l'écran ?

    Merci pour votre aide

    Didier L
    Didier L
    Le webmaster de quelques sites associatifs développés sur Joomla !

  • #2
    Bonsoir,

    Je n'utilise pas bs5, mais ce lien doit vous aider : https://www.w3schools.in/bootstrap5/...hide-on-mobile

    Vous pouvez aussi recréer ces règles CSS
    Code:
    @media (max-width: 480px) {
      .hidden-phone{display: none;}
    }​
    @media (min-width: 480px) {
      .visible-phone{display: none;}
    }​​
    Pour rendre invisible un module, le souci est qu'il sera seulement possible de cacher le contenu et non le titre.
    Si c'est un module personnalisé, essayez le mien qui le permet : https://lomart.fr/extensions/lm-custom

    Il existe aussi l'action filter de UP.

    Mes 2 solutions masquent le contenu au niveau du php en fonction du type d'appareil et non de la taille de l'écran.
    Cela veut dire qu'il ne sera pas visible dans le source de la page.
    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
      Merci pour cette réponse

      En cherchant un peu plus, cette fonction de masquage s'appelle display property en anglais :

      Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.


      Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.


      Par contre, je n'arrive pas à le faire marcher ! Pour le module header-right, j'ai ajouté la classe d-none qui devrait avoir pour effet de masquer tout le temps le module et cela n'a aucun effet.


      Cliquez sur l'image pour l'afficher en taille normale

Nom : image.png 
Affichages : 112 
Taille : 34,0 Ko 
ID : 2052119
      Dernière édition par didier l à 06/06/2023, 07h09
      Didier L
      Le webmaster de quelques sites associatifs développés sur Joomla !

      Commentaire


      • #4
        Bonjour,

        Avec le template Cassiopeia le « d-none » fonctionne correctement.
        Le problème doit être ton template.

        Commentaire


        • #5
          Bonjour,

          Je crois que le problème vient de mon template ; j'ai retenu JA Stark de JoomlArt, basé sur le plug in T4 ; ce framework fait pas mal de choses assez facilement mais on perd certaines fonctionnalités : le comosant T4 "overides" c'est à dire passe par dessus certaines règles définies ailleurs.
          Didier L
          Le webmaster de quelques sites associatifs développés sur Joomla !

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X