[RÉGLÉ] Cassiopeia : changer taille titre des articles et catégories

[fgen]

Bonjour,
Je fais mes premiers pas avec la migration de mon site de J3.10 vers Joomla 4.1.2 et suis donc utilisateur de Cassiopeia. Pas trop de problème mais je me retrouver en front end avec des titres d'articles énormes, les catégories aussi alors que sous Protostar de Joomla 3 les titres de mes articles avaient des tailles raisonnables; (Voir fichier joint).
Quel css modifier, et surtout comment, pour modifier la taille implicite des balises J1, J2...
J'ai tenté quelques modif dans media/templates/site/cassiopeia/css sur le fichier template.css (lignes 133 et 137 pour J1) mais sans succès... La visualisation en front end d'un titre sous Firefox / Inspecter m'orienterait vers la modification de template.min.css mais là je tombe sur un bloc imbuvable (non par ligne) et je n'y touche pas.
Alors si quelqu'un a une idée, merci !
FG

[pmleconte]

Bonjour,

Si l'anglais ne vous rebute pas trop, Marc a fait un mode d'emploi très complet sur la customisation de Cassiopeia : https://magazine.joomla.org/all-issu...of-tips-tricks

Pascal

[fgen]

Merci Pascal. J'ai regardé ce mode d'emploi sans découvrir une customisation de la taille des caractères dans les balises h1, h2. J'ai tenté de modifier template.min.css malgré le pavé imbuvable. Ici : .... .h1,h1{font-size:calc(1.375rem + .0125vw)}@media (min-width:1200px){.h1,h1{font-size:1.5rem}}..... (1.5rem au lieu de 2.5rem).
La modification du fichier est prise en compte. mais pas de résultat à l'affichage d'une page.

Donc c'est ailleurs que ça se passe...

[abmag]

Un user.css classique avec par exemple

h1, .h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1, .h1 {
[B]font-size: 1.5rem;[/B]
}
}

semble fonctionner.

A affiner bien sur

J'ai oublié

Pense à raffraichir le cache de ton navigateur pour recharger les CSS (Ctrl F5)

[fgen]

Grand merci à Abmag, le "user.css" est en effet la solution pour définir les balises h1, h2, etc... J'ai cependant dû adapter l'élément :

font-size: calc(1.375rem + 1.5vw)

en le changeant en : font-size: calc(24px) (ou autre valeur)

car il se trouve que le système reste indifférent à une modification de la parenthèse (1.375rem + 1.5vm)... Je peux mettre +1.5vm ou + 2vm ou 3vm...etc... (dans le user.css) cela ne change strictement rien à l'affichage de mes titres en front-end et pourtant l'inspection de ce titre (Firefox/inspecter) montre que ce +1.5vm ou + 2.vm est bien présent !

Je suppose que rem et vw sont des variables (que je ne connais pas) mais le fait est qu'elles sont inactives pour l'affichage des titres.

En d'autres termes je suis bien arrivé à ce que je veux en définissant la taille en pixels... mais : y a-t-il des effets collatéraux à craindre ?....

Je verse cela à la sagacité des participants à ce forum que je remercie une nouvelle fois.

F.G.

[Helloo]

essaye voir comme ça:

h1, .h1 {
font-size: calc(1.375rem + 1.5vw)!important;
}

[abmag]

pour en savoir plus sur Rem / em / px / vw / etc

whats-the-difference-between-px-em-rem-vw-and-vh/ en anglais

et en français https://developer.mozilla.org/fr/doc...lues_and_units

[fgen]

Merci à nouveau à abmag et helloo mais je suis désolé, leur proposition d'utiliser [CODE] ou [HTML] ne fonctionne pas chez moi. Seule fonctionne les tailles en valeur absolue, 24px, 20px... je comprends que ce n'est peut-être pas joli, joli. Est-ce que c'est grave, docteur ?
Je ne veux pas abuser de leur temps, s'ils le veulent, ils trouveront dans le fichier en lien quelques captures des différents user.css que j'ai essayés sous leur conseil et du résultat que cela donne chaque fois. Le site sur lequel il renvoie contient mes essais Joomla 4 avant basculement sur mon "vrai" site.
Je pourrais leur donner en privé un accès administrateur à ce site essai... ils verront peut-être plus facilement ce qui cloche.
Qu'ils passent quand même d'abord de bonnes fêtes...
FG

[Helloo]

fgen , il ne faut pas mettre HTML.. il faut mettre uniquement cette partie ici, et adapter la valeur rem si besoin:


h1, .h1 { font-size: calc(0.8rem + 1.5vw)!important; }

[abmag]

Je pense que tu n'as pas tout compris.
Dans mon exemple j'ai mis en gras la valeur

[B]font-size: 1.5rem;[/B]

en gras, mais c'est juste pour que tu le vois mieux. Il ne faut pas le répercuter dans ton fichier CS ou je vois les balises Bold

[B] font-size: 1.5rem; [/B]

As tu compris également à quoi servait ce bout de code?

@media (min-width: 1200px)

Je pense que si tu veux y arriver tout seul essaies de lire avec attention des tutos CSS

pour cette règle c'est ici (par exemple)

https://developer.mozilla.org/fr/docs/Web/CSS/@media

[fgen]

Voilà, voilà, cela va mieux en effet quand on essaie de comprendre plutôt de que faire des changements au petit bonheur la chance ! J'ai trouvé la signification et la valeur pour mon poste de travail des variables rem et vw, j'aurais dû commencer par cela... du coup j'ai pu adapter leurs coefficients dans les formules à ce que je voulais. Et qui sont proprement écrites cette fois. Donc j'ai :

h1, .h1 {
font-size: calc(0.9rem + 1vw);
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 1.8rem;
}
}
h1,.h1 {color: darkblue;} ....ça c'est juste pour voir si ça marchait...

h2, .h2 {
font-size: calc(0.8rem + 0.9vw);
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 1.6rem;
}
}

etc... pour h3, h4...
Je considère donc ce post comme "Réglé"... je ne sais pas où mettre cette indication... quelqu'un pourra le faire ?
Grand merci à abmag et Helloo pour leur immense patience avec un old-papy-new-developper-in-css !....

FG

[lesoutier]

Si le probleme est réglé merci de l'indiquer :

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

[abmag]

Bon he bien bravo. En croyant perdre du temps à lire les tutos on finit toujours par en gagner

Pour passer en régler

Comment ajouter la mention [Réglé] à votre discussion ?

1 - Aller sur votre discussion et éditer votre premier message :

2 - Cliquer sur la liste déroulante Préfixe.

3 - Choisir le préfixe [Réglé].

Quand on est content et que la proposition fonctionne on peut appuyer sur le "j'aime" du post valide


Bonne continuation et joyeuse Paques (je ne suis pas sur que tu sois beaucoup plus vieux que moi )