[Problème] Problème responsive design joomspirit76

[alva75]

Bonjour a tous,

J'utilise depuis quelques temps déjà le Template gratuit joomspirit 76, Template que j'ai trouvé le plus proche de ce que je voulais obtenir pour ma page. J'ai réussi a lui apporter quelques légères modifications (parfois grâce a votre aide) pour avoir un rendu correct. Objectif réussi pour la version pc, problème sur téléphone et sur tablette (horizontal) le rendu est horrible et je commence a avoir pas mal de visites sur mon site dont la majorité se fait sur mobile.

J'ai deux problèmes majeurs:

1. Mes deux menus apparaissent a l'horizontale ce qui oblige aux utilisateurs a parcourir un long chemin avant lecture des articles, contrairement a la version pc ou tablette ( a la verticale) qui affiche le site comme je le souhaite.

2. Le titre des mes articles se fait sans aucun espace entre les mots, les rendant pratiquement illisibles.

Cela est très pénalisant pour moi, puisque certains utilisateurs quittent le site très rapidement et je sollicite donc votre aide pour essayer de résoudre le problème, je suis ouvert a vos suggestions.

Je précise que je n'ai qu'un niveau basique en CSS, mais le CSS de Joomla me laisse complètement perdu d'ou la raison de mon post.

Voici le lien de mon site internet:

https://www.footugalfrance.fr

Cordialement Alva

[RobertG]

Re : Problème responsive design joomspirit76

Pourquoi ne passerais-tu pas au template 123 qui est la nouvelle version du 76 ?

http://www.template-joomspirit.com/joomla-free-template/product/free-joomla-template-joomspirit-123/category_pathway-12

[alva75]

Re : Problème responsive design joomspirit76

Pourquoi ne passerais-tu pas au template 123 qui est la nouvelle version du 76 ?
http://www.template-joomspirit.com/j...ory_pathway-12

Bonjour Robert, je te remercie d'avoir pris le temps de répondre a mon problème. Je ne connaissait pas l'éxistence de cette nouvelle version.
La je vais peut être avoir l'air idiot, mais j'ai essayé de l'installer après avoir telechargé le fichier, cependant cela ne marche pas:

Erreur

Unable to open archive
Impossible de trouver un pack d'installation

[alva75]

Re : Problème responsive design joomspirit76

Autant pour moi, il était écrit Unzipp first, désolé, je vais tester et je vous tiens au courant, merci

[lomart]

Re : Problème responsive design joomspirit76

Bonsoir,

Le zip téléchargé se nomme "joomspirit123_unzip_first.zip", ce qui laisse à penser qu'il faut le dézipper pour prendre la version qui nous correspond.

[alva75]

Re : Problème responsive design joomspirit76

Bonsoir a tous, je reviens vers suite a mes problèmes précédents.
Grâce a vos conseils, j'ai réussi a résoudre pas mal de problèmes.
Cependant malgré quelques heures, passé a éplucher le manuel et les explications du template joomspirit 123, il me reste quelques problèmes dont un qui persiste (bien qu'il y ait eu une amélioration) et j’espère que vous saurez m'apporter votre aide.

1°. Sur mobile, mon menu clubs (celui qui apparaît avec les petits logos) apparaît sur plusieurs lignes avec des trous parfois. Je souhaiterais que ce menu la arrive a tenir au pire sur deux lignes de 9. Je suppose que c'est au niveau des marges du menu, mais je me perde dans ce code, peut être d'ailleurs du a un héritage.

2. Toujours sur mobile, je souhaiterais changer un peu les positions d'affichage, mais sans toucher a ma version pc qui me convient. Je souhaiterais que en version mobile, le menu principal apparaisse sur la même ligne que mon logo, de préférence a sa droite et si possible y ajouter un petit bouton home a coté.

3. Enfin dernier petit ajout, je ne sais pas si ça doit forcément passer par du php ou peut être qu'il existe un plug in que vous pourrez me conseiller, je souhaiterais que mes articles en relation puisse s'afficher avec l'image des articles en relation si possible.

Cordialement, Alva

[alva75]

Re : Problème responsive design joomspirit76

N'ayant eu aucune réponse ni indication, je me permet d'uper le sujet a nouveau.

Je vous remercie par avance

[PhilJ]

Re : Problème responsive design joomspirit76

Bonjour Alva,

1°. Sur mobile, mon menu clubs (celui qui apparaît avec les petits logos) apparaît sur plusieurs lignes avec des trous parfois. Je souhaiterais que ce menu la arrive a tenir au pire sur deux lignes de 9. Je suppose que c'est au niveau des marges du menu, mais je me perde dans ce code, peut être d'ailleurs du a un héritage.

Essayez ceci dans /templates/joomspirit_123/css/custom.css :
—

.moduletablehorizontal .nav > li > a {
padding: 10px 0;
}

ou bien ce qui suit pour le cas où la précédente déclaration ne serait pas suffisamment spécifique :
—

.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 10px 0;
}

2. Toujours sur mobile, je souhaiterais changer un peu les positions d'affichage, mais sans toucher a ma version pc qui me convient. Je souhaiterais que en version mobile, le menu principal apparaisse sur la même ligne que mon logo, de préférence a sa droite et si possible y ajouter un petit bouton home a coté.

C'est possible, toujours en CSS, mais c'est un gros travail.

[PhilJ]

Re : Problème responsive design joomspirit76

3. Enfin dernier petit ajout, je ne sais pas si ça doit forcément passer par du php ou peut être qu'il existe un plug in que vous pourrez me conseiller, je souhaiterais que mes articles en relation puisse s'afficher avec l'image des articles en relation si possible.

Il vous faut en effet mettre en œuvre un plugin. Vous pouvez regarder sur le JED : https://extensions.joomla.org/tags/related-items, par exemple 'Related Items Extended' : https://extensions.joomla.org/extens...items-extended.



Bonne soirée,

[alva75]

Re : Problème responsive design joomspirit76

Bonjour Alva,




Essayez ceci dans /templates/joomspirit_123/css/custom.css :
—

.moduletablehorizontal .nav > li > a {
padding: 10px 0;
}

ou bien ce qui suit pour le cas où la précédente déclaration ne serait pas suffisamment spécifique :
—

.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 10px 0;
}

Bonjour PhilJ, je vous remercie d'avoir pris le temps de me répondre.
En effet cela a grandement amélioré le rendu, c'est beaucoup plus proche de ce que je souhaitais. Je regrette juste de ne pas avoir trouvé les bons paramètres pour réussir a en placer 9 logos sur la ligne du haut et 9 sur celle du bas, j'ai joué un peu avec les valeurs mais le mieux voila le mieux que j'ai réussir a obtenir. Je regrette juste que ça ai forcement eu une influence sur le design du site version pc, mais bon on peut pas tout avoir.

2. Toujours sur mobile, je souhaiterais changer un peu les positions d'affichage, mais sans toucher a ma version pc qui me convient. Je souhaiterais que en version mobile, le menu principal apparaisse sur la même ligne que mon logo, de préférence a sa droite et si possible y ajouter un petit bouton home a coté.

C'est possible, toujours en CSS, mais c'est un gros travail.

Auriez vous un tutoriel a me conseiller ou autre ? Je peux prendre le temps de faire les choses, et j'ai des bases correctes en php (mais le php sur joomla me frustre énormément).

Citation Envoyé par alva75 Voir le message
3. Enfin dernier petit ajout, je ne sais pas si ça doit forcément passer par du php ou peut être qu'il existe un plug in que vous pourrez me conseiller, je souhaiterais que mes articles en relation puisse s'afficher avec l'image des articles en relation si possible.
Il vous faut en effet mettre en œuvre un plugin. Vous pouvez regarder sur le JED : https://extensions.joomla.org/tags/related-items, par exemple 'Related Items Extended' : https://extensions.joomla.org/extens...items-extended.

Merci beaucoup, par contre tout les bons plugins sont payants, n'en connaissez vous pas un gratuit ? J'ai cherché sur le plugin francophone de joomla mais rien qui y ressemble...

J'en profite je suis peut être un peu HS mais je remarque que je n'ai pas encore vu de template spécial pour mobiles. Je trouve des template responsive, des créateurs de templates responsive, (je me tâte a essayer). Mais existe-il quelque chose qui permette d'avoir un template pc et un autre template qui prendrais le relais lors d'une connexion mobile ou tablette ?

[PhilJ]

Re : Problème responsive design joomspirit76

[...] Je regrette juste que ça ai forcement eu une influence sur le design du site version pc, mais bon on peut pas tout avoir.

En l'occurrence si, à condition de cibler la largeur de l'écran du visiteur grâce à des media queries :

—

@media screen and (min-width: 980px) and (max-width: 1024px) {

.moduletablehorizontal .nav > li > a {

padding: 10px 11px;

}

}

Signification : définir les marges internes de la classe ciblée lorsque l'écran du visiteur a une largeur comprise entre 980 et 1024 px à 10px pour le haut et le bas, et à 11px pour les côtés gauche et droit.

Autre exemple :

—

@media screen and (max-width: 979px) {

moduletablehorizontal .nav > li > a {

padding: 10px 0;

}

}

Signification : définir les marges internes de la classe ciblée lorsque l'écran du visiteur a une largeur inférieure à 980 1024 px à 10px pour le haut et le bas, et à 0px pour les côtés gauche et droit.

Auriez vous un tutoriel a me conseiller ou autre ? Je peux prendre le temps de faire les choses, et j'ai des bases correctes en php (mais le php sur joomla me frustre énormément).

Comme je vous le disais c'est un gros travail... et de mon côté je ne peux pas prendre le temps. En résumé, pour vous mettre sur la (ou plutôt les) piste(s), il faut là aussi utiliser les media queries de façon à cibler les types d'écrans à traiter. Avec le réglage actuel de votre template, le basculement de desktop vers mobile se situe à 979 px. Donc les traitements devront se faire dans un media query comme :

—

@media screen and (max-width: 979px) {

/* règle CSS 1 */
/* règle CSS 2 */
/* etc. */

}

Il vous faudra, au moins : une règle pour diminuer les dimensions du logo, une autre pour le déporter sur la gauche, puis une autre encore pour remonter le menu, plus une pour le déporter sur la droite. Restera à voir le comportement du menu ainsi modifié, et il y a fort à parier que vous aurez là aussi du pain sur la planche. Il va sans dire qu'une excellente connaissance du positionnement CSS vous sera indispensable.

Une autre solution consisterait à modifier le template lui-même, mais le risque d'un cambouis plus épais encore est à prévoir.

Merci beaucoup, par contre tout les bons plugins sont payants, n'en connaissez vous pas un gratuit ?

Tout le monde aime le gratuit, vous par exemple, et moi aussi , mais vous avez pu vous apercevoir par vous-même que pour une extension de ce type, ce n'est pas possible. Cela dit, Related Items Extended' coûte ~ 7.00 € TTC incluant les mises à jour logicielles et le support technique durant 6 mois. Si vous trouvez un artisan (par exemple le bon chauffagiste dont j'ai actuellement besoin pour cause de chaudière récalcitrante) pour moins cher, merci de bien vouloir me communiquer ses coordonnées sans tarder .

J'en profite je suis peut être un peu HS mais je remarque que je n'ai pas encore vu de template spécial pour mobiles. Je trouve des template responsive, des créateurs de templates responsive, (je me tâte a essayer). Mais existe-il quelque chose qui permette d'avoir un template pc et un autre template qui prendrais le relais lors d'une connexion mobile ou tablette ?

C'est en effet un peu limite HS, mais pour vous répondre brièvement : à mon sens votre idée est à oublier., sauf si vous avez de gros moyens et beaucoup beaucoup de temps devant vous. Ne serait-ce que parce que les positions modules des 2 templates seront différentes et seront nommées différemment, vous serez obligé de gérer 2 sites au lieu d'un, ou alors de procéder de façon acrobatique pour tous vos contenus en les dédoublant systématiquement. Bref, la mise en œuvre de votre idée conduirait à une véritable usine à gaz, ce que vous ne souhaitez pas, je suppose. Et c'est d'ailleurs pourquoi les développeurs ont inventé les templates hybrides, mobile ready, c.-à-d. capables, avec un peu d'astuce(s), d'afficher les mêmes contenus sans devoir créer un deuxième site, ni même de mobiliser plusieurs templates.

Attention aussi : 'mobile' et 'desktop' sont des termes génériques, par nature assez vagues. Par exemple, un petit PC (desktop) peut avoir une largeur d'écran aussi faible que 980 px, tandis qu'un grand écran de bureau pourra afficher jusqu'à 1920 px. Or on ne traitera pas les grands écrans de PC comme on traite les petits écrans de PC. Il en va de même pour les mobiles, qui incluent les tablettes — là aussi petites et grandes — et les smartphones, dont la variété est également bien connue : ce qui peut convenir sur un Samsung 360 px peut ne pas passer correctement sur un iPhone 320 px. => A suivre votre idée jusqu'au bout, il faudrait donc non pas 2 templates par sites, mais près d'une dizaine .



Bonne journée,

[PhilJ]

Re : Problème responsive design joomspirit76

Aux modérateurs : merci de supprimer les posts #11 et #12 de ce fil (cause : « Je ne suis pas un robot » récalcitrant).

[fynhooft]

Re : Problème responsive design joomspirit76

Bonjour,

1°. Sur mobile, mon menu clubs (celui qui apparaît avec les petits logos) apparaît sur plusieurs lignes avec des trous parfois. Je souhaiterais que ce menu la arrive a tenir au pire sur deux lignes de 9. Je suppose que c'est au niveau des marges du menu, mais je me perde dans ce code, peut être d'ailleurs du a un héritage.

Voilà le code à mettre pour un affichage responsive de tes fanions.
Tu rajoutes ce code à la fin de ton fichier "custom.css" qui doit se trouver dans le dossier "css" du template joomspirit_123. Si ce fichier n'existe pas, tu le crées.
J'ai essayé de prendre en compte toutes les tailles.

@media screen and (min-width: 320px) {.nav > li > a > img {width:29px; }}
@media screen and (min-width: 360px) {.nav > li > a > img {width:32px; margin-right: 0px;}}
@media screen and (min-width: 480px) {.nav > li > a > img {width:29px; margin-right: 17px;}}
@media screen and (min-width: 600px) {.nav > li > a > img {margin-right: -2px;}}
@media screen and (min-width: 640px) {.nav > li > a > img {margin-right: 0px;}}
@media screen and (min-width: 768px) {.nav > li > a > img {margin-right: 7px;}}
@media screen and (min-width: 800px) {.nav > li > a > img {margin-right: 8px;}}
@media screen and (min-width: 900px) {.nav > li > a > img {margin-right: 14px;}}
@media screen and (min-width: 980px) {.nav > li > a > img {margin-right: 19px;}}
@media screen and (min-width: 1024px) {.nav > li > a > img {margin-right: 21px;}}
@media screen and (min-width: 1280px) {.nav > li > a > img {margin-right: 27px;}}

[lesoutier]

Re : Problème responsive design joomspirit76

@PhilJ
Voila qui est fait. Et vive les antispams

[alva75]

En l'occurrence si, à condition de cibler la largeur de l'écran du visiteur grâce à des media queries :

—

@media screen and (min-width: 980px) and (max-width: 1024px) {

.moduletablehorizontal .nav > li > a {

padding: 10px 11px;

}

}

Signification : définir les marges internes de la classe ciblée lorsque l'écran du visiteur a une largeur comprise entre 980 et 1024 px à 10px pour le haut et le bas, et à 11px pour les côtés gauche et droit.

Autre exemple :

—

@media screen and (max-width: 979px) {

moduletablehorizontal .nav > li > a {

padding: 10px 0;

}

}

Signification : définir les marges internes de la classe ciblée lorsque l'écran du visiteur a une largeur inférieure à 980 1024 px à 10px pour le haut et le bas, et à 0px pour les côtés gauche et droit.

Vous êtes énorme, merci infiniment, je connaissait les médias queries, mais je ne savais pas vraiment comment les utiliser. Grâce a vous je me suis informé sur les différentes tailles existantes, les possibilités de modification, j'ai du chercher les tailles viewports pour les divers appareils, je les ais testés sur phone, sur tablette et j'ai réussi a trouver la bonne règle et un rendu satisfaisant, merci beaucoup.

Je regrette de ne pas avoir une expérience suffisante comme la vôtre pour pouvoir chercher, trouver et modifier un template crée par quelqu'un d'autre, mais comme on dit c'est en forgeant qu'on devient forgeron.

Si je peux me permettre, j'ai juste besoin d'une dernier coup de main avant de mettre le topic en résolu. Comme je l'ai dit plus haut, j'ai obtenu un rendu satisfaisant. Je dis satisfaisant puisque je me retrouve bien avec deux lignes de fanions, mais sur la deuxième, en début de ligne, je me retrouve avec un blanc dont je ne comprend pas la cause. J'ai pourtant joué avec divers paramètres mais je n'ai pas réussi a identifier le problème, de plus la ligne du haut compte 10 fanions et celle du bas 8, l'idéal aurait été 9 sur la première ainsi que sur la deuxième, donc si vous avez une petite idée sur le sujet, je vous en serait reconnaissant.

Comme je vous le disais c'est un gros travail... et de mon côté je ne peux pas prendre le temps. En résumé, pour vous mettre sur la (ou plutôt les) piste(s), il faut là aussi utiliser les media queries de façon à cibler les types d'écrans à traiter. Avec le réglage actuel de votre template, le basculement de desktop vers mobile se situe à 979 px. Donc les traitements devront se faire dans un media query comme :

—
@media screen and (max-width: 979px) {
/* règle CSS 1 */
/* règle CSS 2 */
/* etc. */
}

Il vous faudra, au moins : une règle pour diminuer les dimensions du logo, une autre pour le déporter sur la gauche, puis une autre encore pour remonter le menu, plus une pour le déporter sur la droite. Restera à voir le comportement du menu ainsi modifié, et il y a fort à parier que vous aurez là aussi du pain sur la planche. Il va sans dire qu'une excellente connaissance du positionnement CSS vous sera indispensable.

Une autre solution consisterait à modifier le template lui-même, mais le risque d'un cambouis plus épais encore est à prévoir.

Je vais quand même essayer, le boulot ne me fait pas peur, ce qui me fait peur c'est de me retrouver bloqué et avoir travaillé pour rien...
Mais je vais m'y mettre, c'est long ? Tans pis, si je ne le fait pas en une semaine je le ferais en trois mois ou plus tant pis... Cela va me permettre de tester mes connaissances en PHP, d'apprendre des choses, et de m'améliorer.
Et puis si je bloque je demanderais conseil sur le forum en espérant que je ne resterais pas bloqué très longtemps... En tout cas merci je vais suivre vos conseils et traiter les différentes étapes que vous m'avez décrites une par une, quitte a ressortir mes cours de CSS

Tout le monde aime le gratuit, vous par exemple, et moi aussi , mais vous avez pu vous apercevoir par vous-même que pour une extension de ce type, ce n'est pas possible. Cela dit, Related Items Extended' coûte ~ 7.00 € TTC incluant les mises à jour logicielles et le support technique durant 6 mois. Si vous trouvez un artisan (par exemple le bon chauffagiste dont j'ai actuellement besoin pour cause de chaudière récalcitrante) pour moins cher, merci de bien vouloir me communiquer ses coordonnées sans tarder .

Vous avez raison, c'est juste que je n'ai jamais payé pour une extension, de peur de ne pas obtenir le résultat espéré...

De plus je ne comprend pas vraiment comment ça marche, 6 mois de MAJ cela veut dire que au bout de cette période mon extension ne fonctionnera plus ? Je devrais a nouveau payer les 7 euros ?

Voilà le code à mettre pour un affichage responsive de tes fanions.
Tu rajoutes ce code à la fin de ton fichier "custom.css" qui doit se trouver dans le dossier "css" du template joomspirit_123. Si ce fichier n'existe pas, tu le crées.
J'ai essayé de prendre en compte toutes les tailles.

Code:
@media screen and (min-width: 320px) {.nav > li > a > img {width:29px; }}
@media screen and (min-width: 360px) {.nav > li > a > img {width:32px; margin-right: 0px;}}
@media screen and (min-width: 480px) {.nav > li > a > img {width:29px; margin-right: 17px;}}
@media screen and (min-width: 600px) {.nav > li > a > img {margin-right: -2px;}}
@media screen and (min-width: 640px) {.nav > li > a > img {margin-right: 0px;}}
@media screen and (min-width: 768px) {.nav > li > a > img {margin-right: 7px;}}
@media screen and (min-width: 800px) {.nav > li > a > img {margin-right: 8px;}}
@media screen and (min-width: 900px) {.nav > li > a > img {margin-right: 14px;}}
@media screen and (min-width: 980px) {.nav > li > a > img {margin-right: 19px;}}
@media screen and (min-width: 1024px) {.nav > li > a > img {margin-right: 21px;}}
@media screen and (min-width: 1280px) {.nav > li > a > img {margin-right: 27px;}}

Bonjour fynhooft, je vous remercie d'avoir pris le temps de me répondre. J'ai essayé votre solution, j'ai apprécié le faite, qu'elle ai en partie résolu mon problème d'obtenir les deux lignes de 9 fanions comme je le souhaitais. Cependant pour obtenir ce rendu mes fanions étaient trop petits et je n'ai pas vraiment été emballé par le rendu final, c'est bien dommage...

Merci pour vos conseils