« 1 (2)
Re : xmNews sous xSwatch4
Gérard
Gérard

Re : xmNews sous xSwatch4

Gérard 67
2024/12/2 16:08
#11
Gérard 67
2024/12/2 16:08
J'ai bataillé mais j'ai résolu ...

J'ai choisi 3 colonnes pour la homepage :
xmnews_block.tpl :
<div class="col-xs-12 col-sm-6 col-lg-4 mb-3 px-1 px-sm-2 mx-3 mx-sm-0">
                <
div class="card xmnews-border uniform-height">


L'ajout de la classe css "uniform-height" est utile pour obtenir une hauteur uniforme de tous les blocs si on veut éviter un look 'anarchique' : my_xoops.css
.uniform-height {
    
heightcalc(16 2.1rem); /* Approximativement 16 lignes */
    
overflowhidden;         /* Coupe le contenu qui dépasse */
    
displayflex;            /* Assure un alignement des enfants */
    
flex-directioncolumn;   /* Aligne les éléments verticalement */
    
justify-contentspace-between/* Uniformise l'espace entre les enfants */
}


et 2 colonnes pour la page d'actualités :
xmnews_index.tpl : (ligne 40)
<div class="row row-cols-md-2 row-cols-1 justify-content-center">


Merci de ton assistance ...
Re : xmNews sous xSwatch4
Alain T
Alain T

Re : xmNews sous xSwatch4

Alain T 727
2024/12/2 17:07
#12
Alain T 727
2024/12/2 17:07
Super cool ta réponse.
Je t'ai mis sur la voie, aiguillé sur les bons fichiers et les lignes mais tu as fait le boulot, bravo !
Et en plus tu as détaillé ta réponse, c'est exactement ce que nous recherchons ici, un échange gagnant / gagnant !

Gérard, heureux de te compter parmi nos membres !!!
Et je ne dis rien mais maintenant je connais le site web concerné !

Goog Jooooob !
Re : xmNews sous xSwatch4
Alain T
Alain T

Re : xmNews sous xSwatch4

Alain T 727
2024/12/2 17:25
#13
Alain T 727
2024/12/2 17:25
Et encore quelques remarques.
- Je vois que tu maitrises le bootstrap vu les lignes qui commencent par
<div class=

- Je vois que tu as compris la structure du thème xSwatch4 vu l'ajout dans le fichier my_xoops.css

Et pour la hauteur différentes des colonnes, je l'avais remarqué sur ta capture d'écran, c'était un peu moche, je l'avoue
Il y a aussi d'autres méthodes , peut-être, pour être complet sur mon retour d'infos :

- Méthode 1 : dans le bloc
Option "Nombre de mots à afficher pour le résumé de l'article" : mettre par exemple 50
Pas parfait car si ton résumé est très court, il peut y avoir des différences de hauteur

- Méthode 2 : Text wrapping and overflow
Quote:
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

- Méthode 3 : Card decks
En bootstrap 4.6
Par contre, Cette méthode est abandonnée en version Bootstrap 5 en lieu et place de Grid cards
Quote:
When you need equal height, add .h-100

Evidemment, ma préférence s'oriente vers la 3ieme méthode, elle purement bootstrap