Affichage des tags

[pjuignet]

Bonjour,

Je suis en Joomla 4.1.4 template cassiopéia.

Dans la page "liste de tous les tags", l'affichage des tags et des résultats de recherche à partir des tags s'affichent en titre niveau 3 (h3).
Je trouve ça beaucoup trop gros. Surtout pour les résultats qui sont illisibles sur écrans étroits.

Pourrait-on modifier l'affichage et le mettre au format paragraphe (p) ?

[chmst]

Je suis d'accord pour dire que c'est visuellement inesthétique.
Une aide rapide est un user. css qui rend le h3 comme un <p dans la liste des tags.

Une issue dans Joomla issues aurait cependant de bonnes chances de trouver une solution dans Joomla.

[pjuignet]

Une aide rapide est un user. css qui rend le h3 comme un <p dans la liste des tags.

> Oui il faut juste trouver le bon code

[chmst]

quelque chose comme ca:


.com-tags-tag__category.category.list-group h3 a {
font-size: 1em;
font-weight: 400;
}

[chmst]

Additional information (sorry for english)
There could be a hierarchy of tags. Then the big h3 headline would make sense. It depends on your tags structure.

[sarki]

Hello,
Sur le site d'un client j'ai mis une liste de tags dont j'ai adapté les styles pour que les éléments se suivent : https://www.bases-netsources.com/liste-tags
Pour cela j'ai utilisé les styles suivants :

Code: Select all

.tag-category ul.thumbnails {
  margin: 0;
  padding: 0;
  display: block;
}
.tag-category ul.thumbnails li {
  display: flex;
  float: left;
  padding: 3px 20px 3px 0;
}
.tag-category ul.thumbnails li h3, 
.tag-category ul.thumbnails li h3 a {
  color: #105778;
  display: block;
  font-size: 18px;
  margin: 0 5px 0 !important;
  padding: 0 !important;
}

[pjuignet]

Bonjour,

Merci pour vos idées.

j'ai trouvé une solution partielle
Pour l'affichage des tags dans la liste des tags, ils ont une classe : < h3"class mb-0">
j'ai mis dans le user css
. mb-0 {font-size : 1 rem;}
ça marche. Les tags restent en h3 mais ont une taille normale correspondant à 1 rem.

Par contre la liste des articles correspondant aux tags est en h3 sans aucune classe.
Je me suis dit qu'en attribuant la même classe mb-0 à la liste articles en h3 ça marcherait aussi mais je ne trouve pas le bon code.
quelque chose comme :

.com-tags-tag category.category list-group h3 "class mb-0"

????????

[sarki]

Quand il n'y a pas de classe spécifique tu peux remonter pour voir ce que tu peux prendre qui limite à ce type d'affichage, là en l'occurance la catégorie des tags et la liste des résultats avec le lien sur le titre ce qui donne :

Code: Select all

.tag-category .category.list-striped a

[pjuignet]

Bonjour Sarki
je viens d'essayer

Code: Select all

.tag-category .category.list-striped a {
font-size: 1rem;
} 

et

Code: Select all

.tag-category .category.list-striped h3 a {
font-size: 1rem;
}

ça ne fonctionne pas : https://philosciences.com/component/tag ... et-patrick

Cet énorme affichage est vraiment ridicule.

[sarki]

Je vois que le code est un peu différent sur J4 avec le template Cassiopea...
Il existe une fonction dans les navigateurs qui s'appelle "Inspecter", cela permet d'afficher le code de la page et ainsi de voir les différentes classes appliquées, et de faire des tests de style en les écrivant pour les prévisualiser.
Je te mets une capture qui t'explique cela avec le code que tu dois mettre pour ta page...

styles-css.png

[sarki]

Code: Select all

.tag-category .list.group.item a {
font-size: 1rem;
}

[pjuignet]

Désolé mais le code donné

Code: Select all

.tag-category .list.group.item a {
font-size: 1rem;
}

ne marche pas.

J'utilise "Inspecter", et je fais des essai, mais ce n'est pas toujours efficaces. Dans le cas présent j'obtiens la modif voulue en mettant

Code: Select all

  {
font-size: 1rem;
}

sur le lien <a>....<a/>

Mais je ne trouve pas la traduction en css pour l'appliquer.

[sarki]

J'ai mal noté, mais tu n'as pas regardé la capture...
le bon code est

Code: Select all

.tag-category .list-group-item a {
  font-size: 1rem;
}

Pour l'inspecteur, comme je t'ai dit cela permet de tester les styles, après faut copier et mettre dans le fichier .css

[pjuignet]

Oui merci pour ces conseils. C'est ce que j'ai fait.
Ci dessous copie de la fin de mon user.css concernant les tags:

Code: Select all

/* change lettrage liste tags en h3*/
.mb-0 {
font-size: 1rem;
} 

/* change lettrage liste articles tags h3*/
.tag-category .list.group-item a {
font-size: 1rem;
}

Pour une raison qui m'échappe et qui n'a peut être rien à voir avec ce problème de tags, le nouveau code ajouté ne s'applique pas (pas pris en compte par le navigateur). Mystère. Je précise que j'ai vidé le cache.

[sarki]

tu as remis des points, je t'ai exprès remis le code correct, tu n'as qu'à le copier, et vérifies avec la capture qui te montre que ça fonctionne, le code est à droite

[pjuignet]

Désolé, j'ai bêtement recopié l'ancien code. En fait il y bien le bon code dans mon user.css

Code: Select all

/* change lettrage liste articles par tags en h3 trop gros*/
.tag-category .list-group-item a {
  font-size: 1rem;
}
 
/* change lettrage liste tags en h3 trop gros redéfini class mb-0*/
.mb-0 {
font-size: 1rem;
}*/

Quand je fais inspecter dans le navigateur, .mb-0 { font-size: 1rem;} apparait bien, mais
.tag-category .list-group-item a { font-size: 1.1rem;} n'apparait pas.

ça ne vient pas du code. J'ai fait d'autres changements dans le user.css pour tester et ils ne sont pas pris en compte non plus. C'est l'ancien user.css qui apparait, bien que j'efface les caches.

Le 12 juin les codes que tu m'avais donné

Code: Select all

.article-info-term {
  display: none;
}
.article-info dd {
  display: inline-block;
  margin-right: 15px;
}

ont été pris en compte sans difficulté. Entre temps, il ne s'est rien passé. Comprends pas.

[sarki]

Hello Patrick,
Je pense que tu as un cache, une compression Gzip ou une fusion de fichiers CSS activée qq part...
J'ai vérifié et ne vois pas de valeur qui pourrait supplanter le style ajouté, cela se fait avec la valeur "!important" mis en fin de style, genre "font-size: 1rem !important;"

J'ai repéré un autre problème, quand on clique en bas de page pour voir la suite des tags on arrive sur une page 404...
Si tu me fais confiance, tu peux me créer un compte Super Admin provisoire et j'irai voir ce qu'il en est de ces styles et de ce problème 404. Si tu le fais envoie-moi les accès par MP ou Email via mon profil

[pjuignet]

Bonjour,

Je t'ai créé un accès mais ton profil n'indique pas d'email et le mien ne permet pas de MP. Bien que je sois inscrit depuis 2015, il indique "Vous ne pouvez pas utiliser cette fonctionnalité. Vous devez vous inscrire et participer activement aux discussions du forum". Quant à ton site Sarki multimédia je ne vois pas non plus d'email indiqué.

PS : j'ai supprimé ton mail, plus besoin de l'afficher ici, cela peut être une source pour des spammeurs. Sarki