Template beez3 et smartphones

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

  • [Problème] Template beez3 et smartphones

    Bonjour,

    J'ai migré un site de Joomla 2.5 vers Joomla 3.15 ; comme j'utilisais le template beez2, j'ai choisi de passer en template beez3 et j'ai réussi à obtenir un look comparable. ça marche bien sur ordinateur et sur tablette mais sur smartphone, c'est pas terrible ..

    Je sais bien que ce template n'est pas un vrai template "responsive" mais il y a quand m^me dans le modèle (fichier personal.css) une partie mobile à la fin.

    Y a-t'il une documentation quelque part sur ces facilités ?

    Mes attentes :
    - changer le logo et plus généralement la partie header
    - gérer différemment les menus (donc des modules) pour le smartphone

    merci pour votre assistance

    le site : http://www.libre-association-freudienne.org/
    Didier L
    Le webmaster de quelques sites associatifs développés sur Joomla !

  • #2
    Re : Template beez3 et smartphones

    Quelques éléments de réponse :

    à la fin du fichier personnal.css, il y a une zone pour traiter les smartphones :

    la déclaration @media only screen and (max-width: 480px) permet de traiter le cas des smartphones et il suffit alors de re définir certains styles, comme le logoheader pour l'en tête de la page.

    Code HTML:
    @media only screen and (max-width: 480px) {
    
    	img {
      max-width: 100%;
      height: auto;
      border: 0;
      -ms-interpolation-mode: bicubic;
    }
    
    
    
    	#fontsize{display:none}
    	#nav,#wrapper2,#wrapper,.cols-3 .column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
    		{
    		float: none;
    		width: 100%
    	}
    	#header {padding-top:3em}
    	#header form  {margin:0}
    Par contre, je n'ai pas encore trouvé le truc pour avoir des menus spécifiques au smartphone (c'est à dire des menus différents de ceux présentés pour les autres terminaux (micro ordinateur, tablette)

    je voudrais aussi avoir des articles spécifiques: j'ai un tableau dans un article qui ne passe pas sur un smartphone ...

    Avez-vous des pistes à me fournir ?

    Merci :-)
    Didier L
    Le webmaster de quelques sites associatifs développés sur Joomla !

    Commentaire


    • #3
      Re : Template beez3 et smartphones

      ah bon, beez 3 n'est pas responsif?
      secundo, ton menu ne se modifies pas quand tu est dans une petite résolution?

      Commentaire


      • #4
        Re : Template beez3 et smartphones

        J'ai poursuivi mes investigations ... Je me suis trompé bien sûr car le template s'adapte à la taille de l'écran avec une certaine élégance ...

        Il me reste cependant quelques points à régler ...
        - peut-on définir des menus spécifiques au smartphones ? je voudrais une arborescence plus compacte ?
        - comment traiter un tableau sur un smartphone ou à défaut ne pas afficher un article avec le tableau sur un smartphone ?
        Didier L
        Le webmaster de quelques sites associatifs développés sur Joomla !

        Commentaire


        • #5
          Re : Template beez3 et smartphones

          Envoyé par didier l Voir le message
          J'ai poursuivi mes investigations ... Je me suis trompé bien sûr car le template s'adapte à la taille de l'écran avec une certaine élégance ...

          Il me reste cependant quelques points à régler ...
          - peut-on définir des menus spécifiques au smartphones ? je voudrais une arborescence plus compacte ?
          - comment traiter un tableau sur un smartphone ou à défaut ne pas afficher un article avec le tableau sur un smartphone ?
          pour definir un menu specifique aux smartphone, tu peut creer deux menus et utiliser les classes bootstrap correspondantes comme suffixes de classes css.

          dans ta requete media cible #contentarea table en lui appliquant la propriété display:none.
          tu peut aussi cibler des modules specifique en utilisant l'id de ceux ci et la propriété ci dessus.

          Commentaire


          • #6
            Re : Template beez3 et smartphones

            Envoyé par lefabdu51 Voir le message
            pour definir un menu specifique aux smartphone, tu peut creer deux menus et utiliser les classes bootstrap correspondantes comme suffixes de classes css.

            dans ta requete media cible #contentarea table en lui appliquant la propriété display:none.
            tu peut aussi cibler des modules specifique en utilisant l'id de ceux ci et la propriété ci dessus.
            Bonjour,

            Merci pour ces informations mais je ne connais pas Bootstrap ... Pourrais-tu m'indiquer des documents en français ou en anglais sur ce sujet ?

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

            Commentaire


            • #7
              Re : Template beez3 et smartphones

              http://getbootstrap.com la doc officielle

              Commentaire


              • #8
                Re : Template beez3 et smartphones

                Envoyé par lefabdu51 Voir le message
                pour definir un menu specifique aux smartphone, tu peut creer deux menus et utiliser les classes bootstrap correspondantes comme suffixes de classes css
                J'ai quelque mal à suivre ... la documentation sur Bootstrap définit les classes suivantes : .visible-xs, .visible-sm , .visible-md, .visible-lg, .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg ... est bien ces classes qu'il faut utiliser dans la gestion du module menu ? Dans l'onglet Options - paramètres avancés, dans le champ Suffixe de classe CSS ?




                Envoyé par lefabdu51 Voir le message
                dans ta requete media cible #contentarea table en lui appliquant la propriété display:none.
                tu peut aussi cibler des modules specifique en utilisant l'id de ceux ci et la propriété ci dessus.
                Là, j'ai du mal à te suivre ...

                Merci pour ton aide
                Didier L
                Le webmaster de quelques sites associatifs développés sur Joomla !

                Commentaire


                • #9
                  Re : Template beez3 et smartphones

                  ce sont les classes bootstrap v3 que tu cites.
                  Mais avec la version embarquée dans Joomla,
                  ce sont les classes visible-desktop, visible-tablet, visible-phone, qu il faut utiliser.
                  Les classes inverses sont hidden-desktop, hidden-tablet, hidden-phone.

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X