[RÉGLÉ] MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principal ?

[FlodAriege]

Bonjour,

Je viens de mettre à jour Template et Framework de mon JSN BOOT PRO (qui devient au passage BOOT STANDARD).
J'ai à peu près réussi à remettre en place les consignes que les contributeurs ici m'avaient conseillées au fil du temps.

Par contre, l'affichage de la police du menu principal a changé : les "sous-titres" (attributs "titre" du lien, qui s'affichent en 2nde ligne, par exemple :
A PROPOS
qui sommes-nous

ont désormais une taille égale à celle du titre de menu lui-même.
Chez moi ça donne un rendu assez moyen, et j'aimerais bien être capable de repérer dans le css ce qu'il faut aller modifier pour changer la taille des caractères de cette attribut titre.

D'autre part, le code que PhilJ m'avait trouvé et qui fonctionnait nickel pour réduire la taille des caractères sur les écrans de taille intermédiaire semble désormais être inefficace... :

@media screen and (min-width: 961px) and (max-width: 1199px) {

div.jsn-modulecontainer ul.menu-mainmenu > li > a {
font-size: 1em; /* au lieu de 1.3em */
}

}

J'ai bien essayé de réduire encore (je suis allée jusqu'à 0.8em) mais tout se passe comme si ça ne changeait rien du tout...
J'ai bien fait quelques efforts pour apprendre le css depuis, mais ma compréhension est encore trop basique pour être capable de repérer ce qu'il faut aller changer...

Un 'tit coup de main siouplait ?
Merci !

[PhilJ]

Re : MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principa

Bonjour,

[...] le code que PhilJ m'avait trouvé et qui fonctionnait nickel pour réduire la taille des caractères sur les écrans de taille intermédiaire semble désormais être inefficace... :

@media screen and (min-width: 961px) and (max-width: 1199px) {

div.jsn-modulecontainer ul.menu-mainmenu > li > a {
font-size: 1em; /* au lieu de 1.3em */
}

}

A essayer :
—

@media screen and (min-width: 961px) and (max-width: 1199px) {

.menu-mainmenu a span span.jsn-menudescription {
font-size: 12px !important; /* au lieu de 15px */
}

ul.menu-mainmenu > li > a {
padding: 15px 18px; /* au lieu de 15px 25px */
}

}
—

Au besoin, faire jouer les deux pour arriver à un bon équilibre (= par exemple, augmenter légèrement la taille de caractères tout en diminuant légèrement le padding latéral, ou l'inverse).


Bon dimanche (ce qu'il en reste ).



PhilJ

[FlodAriege]

Re : MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principa

Merci PhilJ

Alors : la ligne concernant le padding est apparemment sans effet (j'ai réduit peu à peu les 2 valeurs, en allant même jusqu'à 1px 1px), mais ça ne change rien à l'écran (en tout cas en simulation Mozilla).

Par contre, en réduisant encore un peu la taille des caractères (à 11 px), ça fait passer le menu sur une seule ligne.

cette modification me plait par ailleurs beaucoup (je trouvais les sous-titres bien trop gros) : où et/ou comment dois-je écrire la commande pour que TOUS les sous-titres soient TOUJOURS en 12 px (c'est-à-dire toujours sauf quand l'écran fait 961 à 1199 px, auquel cas ils passeraient en 11 px).
Je préférerais une méthode qui permette d'insérer ça dans le custom.css, parce qu'encore une fois quand j'ai fait la mise à jour du Template, j'ai bien galéré à retrouver les modifs que j'avais faites dans le Template.css ...........

Merci !!!

Florence

[messinmaisoui]

Re : MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principa

j'ai bien galéré à retrouver les modifs que j'avais faites dans le Template.css

Il existe des outils pour comparer les différences entre 2 fichiers texte (texte,css, js, php etc ...)
Cela facilite grandement et sûrement les comparaisons ex : windiff (qui date mais fait le job)

[PhilJ]

Bonjour Florence,

Alors : la ligne concernant le padding est apparemment sans effet (j'ai réduit peu à peu les 2 valeurs, en allant même jusqu'à 1px 1px), mais ça ne change rien à l'écran (en tout cas en simulation Mozilla).

...En effet. Le ciblage n'était pas assez précis. Voilà qui devrait très bien marcher :
—

div.jsn-modulecontainer ul.menu-mainmenu > li > a {
padding: 15px 18px;
}
—

C'est correct jusqu'à 15px 23px, mais pas 15px 24px.

Par contre, en réduisant encore un peu la taille des caractères (à 11 px), ça fait passer le menu sur une seule ligne.

Oui, mais réduire à ce point ce texte secondaire paraît excessif (testé sur écran 1024). C'est pourquoi j'avais suggéré 12 px (mais avec la petite modification du padding latéral comme préconisé ci-dessus, car sans elle ça ne passait pas).

cette modification me plait par ailleurs beaucoup (je trouvais les sous-titres bien trop gros) : où et/ou comment dois-je écrire la commande pour que TOUS les sous-titres soient TOUJOURS en 12 px (c'est-à-dire toujours sauf quand l'écran fait 961 à 1199 px, auquel cas ils passeraient en 11 px).

Le principe est simple : on utilise les media queyries quand on souhaite définir des directives CSS ciblées en fonction de la largeur de l'écran du visiteur. Donc, pour qu'une directive CSS s'applique quel que soit la largeur de l'écran du visiteur, il suffit de la placer en dehors de toute directive media. Typiquement : au-dessus dans le fichier CSS (mais encore une fois, 11 px c'est vraiment très petit sur écran 1024 px).

Je préférerais une méthode qui permette d'insérer ça dans le custom.css

Oui, bien sûr, c'est là qu'il faut intervenir, et uniquement là.


Bonne soirée,



PhilJ

[FlodAriege]

MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu princ...

Messinmaisoui : merci pour le tuyau, voilà qui devrait me faciliter la vie !!

PhilJ,
Quand je mets juste :
.menu-mainmenu a span span.jsn-menudescription {

font-size: 12px !important; /* au lieu de 15px */

}

Je croyais pouvoir réduire uniquement les sous-titres. Mais en fait c'était une illusion d'optique ça réduit titre et sous-titre…
Pourtant je pensais bien que jsn-menudescription faudrait référence à l'attribut sous-titre...
Aurais-tu une autre idée ?
Sinon il faut que je trouve le bon "identifiant", mais je ne sais pas trop où chercher.
Merci en tout cas.

PS: PhilJ, si tu fais un tour sur mon site tu verras que j'ai (enfin !!) mis en œuvre tes recommandations en :
a) supprimant index.php de mes URL
b) raccourcissant considérablement les alias de mes liens de menus, et donc mes URL
Globalement il y a encore du boulot pour être toujours sous les 512 pixels mais il y a déjà (beaucoup) de mieux, et c'est en très grande partie grâce à l'analyse que tu as faite il y a des mois.
Voila, je tenais juste à ce que tu le saches. MERCIIIIIIII !!





Sent from my iPhone using Forum Joomla.fr mobile app

[PhilJ]

Re,

PhilJ,

Quand je mets juste :

.menu-mainmenu a span span.jsn-menudescription {
font-size: 12px !important; /* au lieu de 15px */
}

Je croyais pouvoir réduire uniquement les sous-titres. Mais en fait c'était une illusion d'optique ça réduit titre et sous-titre…
Pourtant je pensais bien que jsn-menudescription faudrait référence à l'attribut sous-titre...
Aurais-tu une autre idée ?

...Pas d'autre idée, non, car mon code est correct, j'en suis sûr.

En revanche, ce que je trouve dans ton custom.css est inadapté, pour ne pas dire incompréhensible :

---

/* code propose par PhilJ pour resoudre le probleme du main menu qui passe sur 2 lignes quand l'ecran mesure entre 961 et 1199 pixels 2EME, VERSION PROPOSEE APRES LA MISE A JOUR DU TEMPLATE ET L'INEFFICACITE DE LA PRECEDENTE VERSION*/

@media screen and (min-width: 961px) and (max-width: 1199px) {

.menu-mainmenu a span span.jsn-menudescription {
font-size: 11px !important;
}
ul.menu-mainmenu > li > a {
padding: 1px 1px; }

}

---

...car :

ul.menu-mainmenu > li > a {
padding: 1px 1px; }
}

ne peut pas avoir d'effet, même d'un seul pixel entre 961 et 1199 px. C'est ce que j'ai reconnu dans mon précédent message (ciblage insuffisant).


...et :

.menu-mainmenu a span span.jsn-menudescription {
font-size: 11px !important;
}

a bien un effet, mais seulement entre 961 et 1199 px. Lorsque l'écran passe 1200 px, c'est la valeur par défaut de business.css (ligne 12) qui reprend le dessus, c.-à-d. 15 px. Or, tu cherches à avoir des sous-titres de 12 (ou même de 11) px quel que soit la largeur d'écran. Ce n'est donc pas ici, dans les media queyries, qu'il faut procéder.

=> S'il te plaît efface ce qui est en rouge, et ajoute ce qui est en vert dans le custom.css :

---

@media screen and (min-width: 961px) and (max-width: 1199px) {

.menu-mainmenu a span span.jsn-menudescription {
font-size: 11px !important;
}

div.jsn-modulecontainer ul.menu-mainmenu > li > a {
padding: 1px 1px;
padding: 15px 18px;
}

}

---

puis ajoute cette directive en dehors des media queyries, par exemple en haut (ou vers la haut) du custom.css :

.menu-mainmenu a span span.jsn-menudescription {
font-size: 12px !important;
}

NB :

Il n'y a aucune raison que .menu-mainmenu a span span.jsn-menudescription change la taille des liens de menu.

Ce qui est vrai en revanche, c'est que cette définition affecte aussi les sous-titres des liens situés dans les sous-menus. Ceux-ci peuvent être ciblés à part, avec ul.jsn-submenu-level-1 li a span span.jsn-menudescription.

Donc, supposons par exemple que tu veuilles 12 px pour les sous-titres des liens de menu (par exemple le texte 'Que faisons nous' en dessous de 'Nos solutions'), et 11 px pour les sous-titres des liens des sous-menus (par exemple 'basse consommation d'énergie' en dessous de 'Chauffage').

=> Les deux directives utiles seront :

.menu-mainmenu a span span.jsn-menudescription {
font-size: 12px !important; /* comme ci-dessus */
}
ul.jsn-submenu-level-1 li a span span.jsn-menudescription {
font-size: 11px !important;
}

...cela évidemment en dehors des media queyries si tu veux que ces directives s'appliquent quel que soit le format d'écran, ou bien dans des media queyries si tu veux qu'elles s'appliquent sélectivement selon le format d'écran.

PS: PhilJ, si tu fais un tour sur mon site tu verras que j'ai (enfin !!) mis en œuvre tes recommandations en :
a) supprimant index.php de mes URL
b) raccourcissant considérablement les alias de mes liens de menus, et donc mes URL
Globalement il y a encore du boulot pour être toujours sous les 512 pixels mais il y a déjà (beaucoup) de mieux, et c'est en très grande partie grâce à l'analyse que tu as faite il y a des mois.
Voila, je tenais juste à ce que tu le saches. MERCIIIIIIII !!

...Oui, j'ai aperçu cela. C'est beaucoup de travail. Bravo !


Bonne continuation,



PhilJ

[FlodAriege]

Re : MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principa

Compris !
J'ai fait plusieurs essais et finalement je me suis arrêtée sur 14 px.
Merci pour tout çà, car au-delà de l'aide ponctuelle sur cette commande, ça m'aide à apprendre peu à peu le css (en mettant du concret sur les cours openclassrooms que j'essaie de lire).