Le module xmnews, un module pour gérer des articles, disposait déjà dans son dossier extra/Templates for bootstrap 4 de surcharges d'éléments permettant d'obtenir un meilleur rendu visuel des pages, grâce notamment à l'utilisation de la fameuse bibliothèque CSS Bootstrap 4.

Nous avons souhaité aller encore plus loin dans l'Expérience Utilisateur (UX en anglais) en y apportant davantage de lisibilité et de fonctionnalités.

1 - Présentation des changements et ajouts principaux

• Titre mis en avant 1
• Affichage du nombre de lectures des articles mis en valeur. 2
• Zone bien déterminée pour les méta données (auteur, date de publication, de modification et note). 3
• Optimisation de la longueur du titre selon la taille du media 4
• Optimisation du nombre de blocs affichés selon la taille du media :
  Mode blocs en lignes : 5
  • Jusqu'à 4 blocs (largeur supérieure à 991 pixels)
  • 2 blocs (si largeur comprise entre 577 et 991 pixels)
  • 1 bloc (si largeur inférieure à 576 pixels)
  Mode blocs en colonnes : 6 Nouveau
  • Jusqu'à 4 blocs (largeur supérieure à 1199 pixels)
  • 3 blocs (si largeur comprise entre 992 et 1199 pixels)
  • 2 blocs (si largeur comprise entre 577 et 991 pixels)
  • 1 bloc (si largeur inférieure à 576 pixels)

Voici le modèle (template) du résumé d'un article :

Voici le modèle des blocs "articles récents" :

2 - Mode opératoire

Nous allons ici décrire succintement les étapes à suivre pour utiliser ces surchages à disposition.
Pour fonctionner, vous devez utiliser un thème XOOPS crée sous Boostrap 4 (et pas Boostrap 3).
Vous pouvez prendre le thème xswatch4 mais tout thème compatible BT4 convient.

1. Copiez le dossier /modules/xmnews/extra/Templates for bootstrap 4/xmnews vers /themes/mon_theme/modules/
2. Vous devez donc avoir maintenant un dossier /themes/mon_theme/modules/xmnews
3. Videz votre cache afin de prendre en compte les changement (Administration / Maintenance / Sélection des 3 caches, puis bouton soumettre
4. C'est fini, le thème surchargé est maintenant opérationnel pour l'ensemble des éléments du module xmnews

C'est simple à mettre en oeuvre et le rendu est beau, n'est ce pas ?

Vous voulez présenter vos blocs en mode colonnes ? Très simple !

1. Allez dans le dossier /themes/mon_theme/modules/xmnews/blocks
2. Ecrasez le fichier xmnews_block.tpl en copiant xmnews_block_colonnes.tpl vers xmnews_block.tpl
3. Videz le cache comme indiqué précédemment

3 - Pour Aller plus loin...

Bien sur dans cet article, nous n'expliquons pas ce qu'est une surcharge de thème, comment en produire et les mettre en fonctionnement.
Nous ne manquerons de réaliser un tutoriel dans quelques semaines expliquant pas à pas comment mettre en place une surcharge, la modifier afin de répondre entièrement à vos besoins d'UX.