Site web sur MAC

[Turandot]

Bonjour,

Le site web suivant http://joom33.clubapal.com/joomla33/ est actuellement en ajustement suite à la migration de Joomla 1.5 à 3.3.

Sur un PC, la présentation est bien mais pourquoi sur un MAC, certains éléments ex. le menu horizontal haut se déplace complètement vers la droite et sort même du cadre du Template?

Merci, Diane

[messinmaisoui]

Re : Site web sur MAC

Hello Diane,

Sur mon PC / Firefox , si j'augmente la taille des caractères, le menu horizontal aussi "déborde" ...

[Turandot]

Re : Site web sur MAC

Bonjour,

Moi j'ai Internet Explorer et j'ai aussi Firefox et la présentation du site est tout à fait correcte.
C'est seulement sur Apple (I-Mac ou I-Pad que cela semble poser problème. Pourquoi?

Diane

[ghazal]

Re : Site web sur MAC

Salut,

C'est seulement sur Apple (I-Mac ou I-Pad que cela semble poser problème. Pourquoi?

Ton template est un vieux template Site-ground absolument pas préparé pour être affiché en responsive (l'ensemble des techniques permettant d'afficher un site pour les smartphones et les tablettes - Iphone, iPad, et autres tablettes Samsung).

Sur Firefox, Chrome ou Safari pour Mac, pas de pb majeur d'affichage.
Au moins pour Firefox et Chrome, il y a de moins en moins de disparités d'affichage en PC/Windows et Mac.

PS : ne laisse pas "Accueil" tout seul dans ton title de page d'accueil. Ca se règle dans Configuration-->Site-->Paramètres SEO-->Nom du site dans les titres

[Turandot]

Re : Site web sur MAC

Bonjour,

"Mon Template est un vieux Template Siteground"... pourtant Siteground -j16-42 est supposé être adapté pour Joomla 3.3. Avez-vous des templates à me conseiller avec 3 colonnes pour Joomla 3.3?

Vous disez en PS "ne laisse pas "Accueil" tout seul dans ton title de page d'accueil"... pourquoi?

Merci, Diane

[ghazal]

Re : Site web sur MAC

pourtant Siteground -j16-42 est supposé être adapté pour Joomla 3.3.

Apparemment oui, mais sans les styles spécifiques au responsive.
Entre autres, les CSS de BootStrap ne soont pas appelées.
Et d'ailleurs, je pense que si elles étaient appelées, l'affichage du site serait chamboulé.

Vous dites en PS "ne laisse pas "Accueil" tout seul dans ton title de page d'accueil"... pourquoi?

* pour te différencier des millions de site avec Accueil seulement, en page d'accueil
* pour la SEO et google
* pour tes utilisateurs, qu'ils sachent qu'ils ne sont pas sur un site qui s'appellerait Accueil, mais sur la page d'accueil du site "Clubappal"
* et pour plein d'autres raisons

[Turandot]

Re : Site web sur MAC

Bonjour,

Vous m'avez dit d'aller dans Configuration-->Site-->Paramètres SEO-->Nom du site dans les titres... Actuellement, il est inscrit NON, dois-je indiquer Avant ou Après? Quelle est la différence?

Merci, Diane

[ghazal]

Re : Site web sur MAC

Je trouve tout à fait respectable de chercher à comprendre les choses avant de les faire.
Mais parfois, il faut les faire. Point.

Actuellement, il est inscrit NON, dois-je indiquer Avant ou Après? Quelle est la différence?

Avant : nom du site avant le titre de l'article
Après : nom du site après le titre de l'article

CAD : "Club Apal - Le titre de l'article"

Et tout ca, inscrit dans la balise "title", visible dans la barre supérieure du navigateur.

[PhilJ]

Re : Site web sur MAC

Bonjour Diane,

Sur un PC, la présentation est bien mais pourquoi sur un MAC, certains éléments ex. le menu horizontal haut se déplace complètement vers la droite et sort même du cadre du Template ?

...Je vous ai répondu le 13 juillet sur ce point : http://forum.joomla.fr/showthread.ph...=1#post1023366. Il suffit d'une toute petite modification CSS (une seule ligne) pour régler ce souci. Si vous ne comprenez pas ce dont il s'agit (= si vous ne comprenez pas les mots suivants : 'CSS', 'feuille de style') n'hésitez pas à revenir par ici pour recevoir de l'aide.

Quant aux expressions 'affichage sur un MAC' et 'affichage sur un PC', elles n'ont à vrai dire pas beaucoup de sens, parce que, par définition, vos tests sont faits sur deux ordinateurs différents... qui ont peu de chances d'être équipé d'un écran ayant la même résolution (quelles sont les largeurs : standard 1024 px ? 1280 px ? 1600 px ? 1920 px ? ...). Par suite, les problèmes observés sur l'un peuvent fort bien ne pas apparaître sur l'autre. C'est tout à fait normal. En outre, quel est le navigateur utilisé sur MAC, et quel est celui utilisé sur PC ? Même si vous testez avec Safari pour Mac et Safari pour PC, il pourra y avoir des différences : c'est normal là aussi, car bien que le nom soit le même, ce sont des logiciels différents.

=> Petite astuce — pas parfaite mais c'est un début pour appréhender comment les visiteurs de votre site vont voir votre site : lorsque vous visionnez votre site avec un PC, enfoncez la touche CTRL, puis agissez sur la molette de votre site. Si vous avez fait la petite correction CSS déjà mentionnée, le site s'affichera correctement au standard 1024 px, mais mal ou très mal en-dessous de cette valeur.

Alternativement, vous pouvez obtenir le même effet en utilisant les combinaisons de touches de votre clavier :

– Pour simuler une résolution plus faible : CTRL + touche + du pavé numérique.
– Pour simuler une résolution plus élevée : CTRL + touche – du pavé numérique.
– Pour revenir à la résolution standard : CTRL + touche 0 (= zéro) du pavé numérique.

Symptôme caractéristique d'inadaptation : si vous voyez apparaître un « ascenseur horizontal » en bas de la fenêtre de votre navigateur, c'est qu'il y a un problème d'affichage pour cette largeur d'écran. Le site ne devrait pas manifester ce symptôme pour les résolutions égales ou supérieures à 1024 px (ce n'est pas le cas actuellement, toujours à cause de ce petit correctif CSS encore non appliqué).

Quant à afficher ce site sur iPad : en mode paysage, soit (à condition de respecter le standard 1024, donc en appliquant le correctif évoqué), mais en mode portrait (largeur : 768 px) c'est impossible car le template ne le permet pas.



Cordialement,



PhilJ

[Turandot]

Re : Site web sur MAC

Merci pour toute cette information! Vous êtes définitivement meilleur que moi en informatique!

Je vais vous dire ce que j'ai fait selon l'info fournie:

NO 1: J'ai changé la ligne 194 pour indiquer left: 0px.
Sur mon PC avec Internet Explorer ou avec Firefox ou sur mon I-pad avec IE ou Safari, cela tasse le topmenu à gauche dans l'espace noir du Template.

NO 2: J'ai fait le petit test avec ctrl et la mollette sur le site. Cela agrandit le site à la pleine largeur de mon écran MAIS toujours avec le topmenu qui se tient sur la gauche.

NO 3: Le site s'affiche très bien sur mon iPad que ce soit en mode paysage ou en mode portrait mais toujours avec le topmenu vers la gauche.

NO 4: Je ne voie aucun ascenseur horizontal apparaître en bas de la fenêtre du navigateur.

Pourquoi n'est-il pas possible d'avoir un topmenu fixe centré au-dessus de l'image du header?

Merci, Diane

[PhilJ]

Re : Site web sur MAC

Vous êtes définitivement meilleur que moi en informatique !

C'est gentil .

ce que j'ai fait selon l'info fournie:

NO 1: J'ai changé la ligne 194 pour indiquer left: 0px.
Sur mon PC avec Internet Explorer ou avec Firefox ou sur mon I-pad avec IE ou Safari, cela tasse le topmenu à gauche dans l'espace noir du Template.

NO 2: J'ai fait le petit test avec ctrl et la mollette sur le site. Cela agrandit le site à la pleine largeur de mon écran MAIS toujours avec le topmenu qui se tient sur la gauche.

Donc le site s'affiche maintenant de la même façon sur PC et Mac. Cela règle votre problème tel que vous l'avez posé...

...Mais vous ajoutez :

Pourquoi n'est-il pas possible d'avoir un topmenu fixe centré au-dessus de l'image du header ?

...C'est possible, oui. Pourquoi ne le serait-ce pas ? Il suffit de formuler la demande (ce que vous avez omis de faire, distraite que vous êtes ).

Pour cela, changez, aux environs de la ligne 193 du fichier template.css : width: 740px; par : width: 100%;

Une explication, si vous aimez comprendre :

La valeur width du container top-menu fixe la largeur totale du menu à 740px de façon arbitraire dans le template.css (du moins sur écran de bureau ou d'ordinateur portable). Étant donné que la même règle (= .top-menu {... }) contient la propriété margin: 0 auto 17px, le menu est centré (valeur auto), mais par rapport à cette largeur (= 740 px), laquelle est bien inférieure à la largeur de votre écran. Du coup, le menu est bien centré, mais dans une zone bloquée à gauche de l'écran.

En définissant la largeur de l'écran à 100% (= 100 % de la largeur du site), votre menu sera centré non plus dans un espace de 740 px de large, mais par rapport à... vous avez deviné : par rapport à la largeur totale de l'écran, et cela quel que soit la largeur de l'écran utilisé.

NO 4: Je ne vois aucun ascenseur horizontal apparaître en bas de la fenêtre du navigateur.

...Tout dépend du sens de rotation de la molette .

NO 3: Le site s'affiche très bien sur mon iPad que ce soit en mode paysage ou en mode portrait [...].

...Effectivement, vous avez raison :-)
En revanche, sur les écran plus étroits (smartphones), le template n'est vraiment pas prévu pour afficher le site correctement.

______________________

Encore un petit conseil concernant l'aspect du menu ?

OK : la taille des caractères des liens de menu est faible (11 px). Pourquoi ne pas l'augmenter un peu afin d'améliorer la lisibilité ?

Essayez par exemple d'ajouter font-size: 14px aux environs de la ligne 683 du template.css :

#sgmenu ul.menu li a span {
float: left;
font-size: 14px;
padding: 0 15px 0 5px;
}

______________________

Enfin, vous pouvez trouver un catalogue de nombreux sites utilisant le template J16-42 : http://lesh.fr/joomla-websites-2/ind...etail&teId=473. Peut-être pour vous une source d'inspiration...



Bonne continuation,



PhilJ

[Turandot]

Re : Site web sur MAC

Bonjour,

Vos conseils sont extraordinaires et oui j'adore comprendre pourquoi je fais quelque chose.

J'ai regardé le catalogue que vous m'avez envoyé et je remarque que le headerimg a été changé dans certains cas. J'aimerais beaucoup le faire.

Regardez notre site avec la version Joomla 1.5 www.clubapal.com et voyez l'image de tête. Nous avons le logo du club de photo et un slideshow. Est-ce possible de faire quelque chose de similaire?
Sinon, mettre une autre image qui représenterait notre club de photo...
Et serait-il possible de mettre le logo du club en haut à côté du nom du site soit Club APAL?

Merci, merci, merci, Diane

[PhilJ]

Re : Site web sur MAC

Bonjour Diane,

j'adore comprendre pourquoi je fais quelque chose.

Ah !

Vos conseils sont extraordinaires

...Précède presque toujours une nouvelle demande.

Regardez notre site avec la version Joomla 1.5 [...] et voyez l'image de tête. Nous avons le logo du club de photo et un slideshow. Est-ce possible de faire quelque chose de similaire?

Gagné !

Slideshow (ne dit-on pas plutôt diaporama au Québec ?) sur votre site en 1.5 : il ne fonctionne pas / plus (Firefox v 30, Chrome v 36).

Concernant le site en refonte : une diaporama en en-tête c'est possible, mais pas simple avec ce template car il n'y a pas de position module prévue pour cela. Il faudrait donc en créer une nouvelle et modifier le template en profondeur. Si vous y tenez, il vaudrait sans doute mieux ouvrir un nouveau fil de discussion sur ce sujet.

Et serait-il possible de mettre le logo du club en haut à côté du nom du site soit Club APAL?

Même réponse, car sauf erreur il n'y a pas non plus de position logo prévue sur ce template.

Sinon, mettre une autre image qui représenterait notre club de photo...

Oui, en effet. C'est d'ailleurs la solution qui est prévue par le template. Il vous suffit de remplacer l'image templates/siteground-j16-42/images/headerimg.jpg par un montage que vous aurez réalisé. Les dimensions de l'image actuelle : 980 X 508 px. Il est bien sûr très recommandé de ne pas modifier la largeur (= 980 px).


Autre chose : je vois que vous avez suivi mon conseil concernant la taille des caractères des liens de menu du 'top menu'. Ne devriez-vous pas faire quelque chose de semblable un peu partout ? En effet, les caractères sont vraiment petits par défaut sur ce template, et votre site serait certainement plus agréable à consulter avec des caractères un peu plus grands (par exemple 13px au lieu des 11px actuels). Par la même occasion, vous pourriez peut-être aussi en accentuer le contraste (par exemple #ddd ou #eee conviendrait bien pour les textes courants, et #fff pour les titres).


Cordialement,



PhilJ

[Turandot]

Re : Site web sur MAC

Merci, merci, merci!

Cela semble si simple à vous lire mais un peu chinois pour moi même si effectivement je suis québécoise!

J'imagine que c'est toujours dans template.css que je trouve où faire les changements proposés car effectivement je trouve moi aussi que le texte est petit et pas très clair. Si vous pouvez me pister dans le Template, j'apprécierais beaucoup!

Diane

[PhilJ]

Re : Site web sur MAC

Re,

Merci, merci, merci!

...Pas de quoi, pas de quoi, pas de quoi.
-[ vous pouvez gagner du temps en cliquant 'Remerciements', ci-dessous à gauche ]-

Cela semble si simple à vous lire mais un peu chinois pour moi même si effectivement je suis québécoise!

Personne n'est parfait... je veux dire : moi non plus je n'arrive pas toujours à bien lire le chinois.

J'imagine que c'est toujours dans template.css que je trouve où faire les changements proposés car effectivement je trouve moi aussi que le texte est petit et pas très clair. Si vous pouvez me pister dans le Template, j'apprécierais beaucoup!

D'accord.

Pour cela je vous propose de travailler proprement, car modifier le template.css présente un risque d'écrasement en cas de mise à jour du template.

=> PREMIERE ÉTAPE :

L'astuce va consister à ajouter une nouvelle feuille de style, que l'on nommera par exemple custom.css. Il existe de nombreuses extensions Joomla qui permettent cela, et de diverses façons.

Pour l'occasion, je vous propose de télécharger et d'installer un petit plugin bien adapté : 'Add Custom CSS'

• Téléchargez la chose ici : http://joomla.impression-estudio.gr/...s/download.php.
• Dézippez-la pour obtenir les deux versions : pour Joomla 2.5 et pour Joomla 3.x.
• Installez la version pour Joomla 3.x que vous venez d'extraire.
• Dans le champ 'Custom CSS File Path 1', saisissez le chemin suivant : templates/siteground-j16-42/css/custom.css
• Activez le plugin et cliquez 'Enregistrer et fermer'.
• Recommandé, une fois le plugin activé et enregistré : déplacez le plugin en fin de liste. De cette façon, il chargera la feuille custom.css après template.css, et il aura de ce fait le dernier mot.

Ceci fait, créez un fichier texte, avec un éditeur de texte tout simple, le Bloc Notes (NotePad) par exemple — surtout pas un traitement de textes ! Enregistrez le fichier ainsi créé sous le nom custom.css, puis envoyez-le dans le dossier templates/siteground-j16-42/css.

Pendant que vous faites cela, je vous trouve les premières directives CSS à modifier (s'il y a du chinois ci-dessus, revenez ici, je tâcherai de vous traduire ).




A+