[RÉGLÉ] header disparaît sur Safari

[clairejouy]

Bonjour,

J'ai constaté que la barre des menus est normale sur chrome mais sur safari les liens du menu ne s'affichent pas, ils sont blanc sur blanc.

EDIT : j'ai constaté qu'en vérité le header apparaît bien quand la page n'est pas trop large, il disparaît ensuite mais il est possible de cliquer sur les onglets dans le vide.... la largeur max sur safari pour qu'il s'affiche est environ 1200 pix

Pour le footer, il est blanc sur chrome et gris sur safari. Je le voudrais blanc avec texte gris. Sur les paramètres généraux, tout semble ok, mais du coup j'ai essayé de changer la couleur du texte du footer directement dans le module concerné et résultat il s'affiche en blanc sur le gris mais je ne l'ai plus sur le footer blanc de chrome. J'aurais besoin que cela soit uniformisé entre les deux moteurs, si possible texte gris sur blanc.

Mes utilisateurs utilisent à égalité ces deux moteurs de recherche.


Merci à toute personne qui passera par là !!!


infos techniques :
joomla.3.21
jd_atlanta sur helix 3 (2.5.6)

[clairejouy]

Bonjour,

On m'a appris à faire "inspecter" la page, donc j'ai regardé, et selon ce que j'ai mis dans le message édité au dessus, le css m'indique que la largeur max du media est 1200, est-ce que cette ligne du css joue un rôle dans ce qui est en train de ce passer ici ? Que puis-je faire pour corriger cela ? Je vous remercie pour votre aide !

[clairejouy]

Si jamais quelqu'un passe par ici, j'ai réalisé que j'aurais pu mettre cette question dans la catégorie css et template, au moment de poster je ne savais pas du tout quel pouvait être mon problème, je ne le sais pas encore exactement mais j'avance dans ma recherche.

J'ai d'autres sites sur lesquels la barre des menus marche très bien peu importe le moteur de recherche. Même fiche de style. Est-ce que si je récupère le css du template ou un autre css cela me permettra de retrouver une barre des menus lisible ? Est-ce que dans les dossiers sources on peut insérer un fichier d'un autre dossier source d'un autre site ? Merci pour votre aide !

[daneel]

Bonjour,

Comme dans la discussion précédente, tu peux ajouter les lignes suivantes dans la css personnalisé

afin de forcer la couleur de texte sur le menu du haut,
la couleur de fond du bas de page,
la couleur de texte du bas de page (footer) ainsi que les liens (a)

#sp-menu ul.sp-megamenu-parent > li a { color: black !important; }

footer#sp-footer { background: #595959 !important; }

#sp-footer { color: #ffffff !important; }

#sp-footer a { color: #ffffff !important; }

Désolé, je n'ai pas le temps de détailler et d'expliquer car cela fait plutôt l'objet de formation sur la css.
Tu as de nombreux tutoriels sur le sujet sur internet.

Et pour ce qui est de ta question sur le forum, tu n'est pas au bon endroit car ton site est sous Joomla 3.

Mon conseil serait de régler les trucs les plus "urgents" puis de retravailler le site sous Joomla 4.

[clairejouy]

daneel , j'ai vu que m'on post a été déplacé, je l'avais mis dans les questions générales de joomla 3, je remercie la personne qui a déplacé le post en tout cas même si c'est pas le bon joomla "

C'est super gentil pour le code, par contre petit souci, j'ai collé le code dans le css personnalisé, et maintenant même sur chrome les menus ne s'affichent plus "

Je comprends oui ce serait l'idéal, je fais comme je peux pour aider sur le site internet mais je n'ai aucune formation web donc ça n'aide pas. Pour la MAJ je ne peux pas faire un changement aussi lourd moi-même mais merci de me l'indiquer, mon père l'a pressenti quand je lui en ai parlé, à la base je l'aide en graphisme et comm et depuis que la personne du web est partie c'est la galère en attendant de trouver quelqu'un de qualifié, mais j'essaye d'apprendre un petit peu du coup !

Je continue mes recherches en tout cas ! Merci daneel

[daneel]

daneel
j'ai collé le code dans le css personnalisé, et maintenant même sur chrome les menus ne s'affichent plus

ok pas de soucis, on procède étape par étape...

#sp-menu ul.sp-megamenu-parent > li a { color:[COLOR=#202124][FONT=consolas][SIZE=12px] #000000[/SIZE][/FONT][/COLOR] !important; }

le code ci-dessus indique que les liens ( a ) de la liste (li) doivent avoir la couleur #000000 ou black ou #000, c'est à dire le noir RVB en hexa.
On précise les éléments parents comme #sp-menu pour distinguer les liens du menu des autres liens.

En utilisant l'inspecteur du navigateur (touche F12 du clavier), on peut le voir directement dans le code :


Astuce : en double-cliquant par exemple sur la couleur, tu peux tester virtuellement tes modifications :

J'ai ajouté !important pour passer au-dessus des réglages présent dans le fichier css.

Perso, je teste toujours avant de finaliser la css.

En réduisant la fenêtre, le texte reste en bien en noir jusqu'à l'apparition de l'icône "sandwich" ou "hamburger".

[clairejouy]

Bonjour daneel

Merci beaucoup à toi pour ce détail !! Malheureusement je n'avais pas pensé qu'il me faudrait l'accès aux fichiers et je ne l'ai pas encore obtenu (je travaille à distance et je n'arrive pas à me reconnecter au VPN) J'ai communiqué l'info à mon père qui va voir ce qu'on peut faire pour que j'obtienne un accès ou pour qu'une personne le fasse en interne

En tout cas, depuis que j'ai découvert la possibilité de rentrer dans le code des sites je n'ai toujours pas osé faire quoique ce soit dessus pour m'entraîner au code, dès que j'essaye je te dirai ce que ça donne, je testerai sur Chrome et Safari. Il faudrait peut-être aussi que je teste sur Firefox car on ma signalé aussi que la barre des menus ne s'y affichait pas à partir d'une certaine largeur, comme d'hab elle redevient normal quand on la réduit à partir de 1 200 et ensuite disparaît pour le sandwich.

Bonne soirée, bon week-end et j'espère pouvoir revenir au plus vite pour te dire si la manip a marché !

[daneel]

Bonjour,

Je n'ai pas parlé de modifier directement la css mais de copier la première ligne de ce que je propose comme la fois précédente dans le paramètre css personnalisé.
Et de faire un retour sur ce que tu obtiens.

L'astuce de l'inspecteur, c'est pour tester "virtuellement"... bon oublie, tu n'est pas encore prête !
De plus, je te conseille de ne pas modifier la css existante comme tu le suggère car ce serait écrasé par les mises à jour mais bien de l'ajouter dans cette zone prévue à cet effet.

Tu peux aussi créer un fichier de personnalisation mais là, ce n'est pas la peine de se prendre la tête pour un simple copier/coller.
On verra par la suite pour l'optimisation et les explications, toute info supplémentaire fait perdre l'objectif, allons à l'essentiel.

Donc s'il te plait, copie la ligne et colle dans le paramètre de template que je t'ai déjà indiqué. Et indique le résultat, merci !

#sp-menu ul.sp-megamenu-parent > li a { color: #000000 !important; }

[clairejouy]

Bonjour daneel

Je suis navrée de répondre aussi tard, je n'ai pas repris mon ordi depuis vendredi après-midi. Désolée de ne pas avoir compris que j'avais juste à refaire le copier coller de la ligne dans la case custom css... Je viens tout juste de faire le copier/coller, j'ai ouvert la page sur safari et ça marche du tonnerre !!

Merci beaucoup pour ton aide !!

[lesoutier]

C'est parfait, il ne reste plus qu'un détail : passer la discussion en [RÉGLÉ]

https://forum.joomla.fr/announcement.php?f=230

[clairejouy]

lesoutier c'est fait pardon

daneel j'ai aussi tenté de copier/coller la suite du code qui était à mettre dans le custom css, j'ai juste inversé le gris et le blanc et ça marche aussi ! Merci encore et bonne journée !