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

[venusmemnoch]

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 :

https://www.actugame.net/actu-jeux-video/1019-final-fantasy-xv-les-details-du-patch-day-one

[lomart]

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 ...

[venusmemnoch]

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.

[pmleconte]

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

[ced1870]

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

[lomart]

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

[pmleconte]

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 :

.hidden-desktop {
display: none !important;
}
.visible-desktop {
display: block !important;
}

Pascal

[lomart]

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

[ced1870]

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 ...

[jjkuro]

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