[Problème] Template beez3 et smartphones

[didier l]

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]

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.

@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 :-)

[lefabdu51]

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?

[didier l]

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 ?

[lefabdu51]

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 ?

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.

[didier l]

Re : Template beez3 et smartphones

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

[lefabdu51]

Re : Template beez3 et smartphones

http://getbootstrap.com la doc officielle

[didier l]

Re : Template beez3 et smartphones

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 ?

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

[lefabdu51]

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.