The xmnews module, a module for managing articles, already had in its folder extra/Templates for bootstrap 4 overloading elements to obtain a better rendering visual pages, thanks in particular to the use of the famous library CSS Bootstrap 4 . 

We wanted to go even further in the User eXperience (UX) by bringing more readability and functionality.

1 - Presentation of the main changes and additions

• Title highlighted 1
• Display of the number of readings of highlighted articles. 2
• Well defined area for metadata (author, date of publication, modification and note). 3
• Optimization of the title length according to the size of the media 4
• Optimization of the number of blocks displayed according to the size of the media: 
  Block mode in rows: 5
  • Up to 4 blocks (width greater than 991 pixels)
  • 2 blocks (if width between 577 and 991 pixels)
  • 1 block (if width less than 576 pixels)
  Column block mode: 6 New
  • Up to 4 blocks (width greater than 1199 pixels)
  • 3 blocks (if width between 992 and 1199 pixels)
  • 2 blocks (if width between 577 and 991 pixels)
  • 1 block (if width less than 576 pixels)

Here is the template for an article summary:

Initial BT4 template




Re-worked BT4 template

Here is the model of the "recent articles" blocks:

Recent blocks template

Recent block template

New

2 - Operating mode

Here we will briefly describe the steps to follow to use these available overloads. 
To work, you must use a theme XOOPS created under Boostrap 4 (and not Boostrap 3). 
You can take the theme xswatch4 but all theme compatible BT4 is fine.

1. Copy the folder /modules/xmnews/extra/Templates for bootstrap 4/xmnews to /themes/my_theme/modules/
2. So you should now have a folder /themes/my_theme/modules/xmnews
3. Clear your cache to take into account the changes (Administration / Maintenance / Selection of the 3 caches, then submit button
4. It's over, the overloaded theme is now operational for all the elements of the module xmnews

It's simple to implement and the rendering is beautiful, isn't it? 

Do you want to present your blocks in column mode? Very simple!

1. Go to the folder /themes/my_theme/modules/xmnews/blocks
2. Overwrite the file xmnews_block.tpl by copying xmnews_block_colonnes.tpl to xmnews_block.tpl
3. Clear the cache as previously indicated

3 - To Go further ...

Of course in this article, we do not explain what an overloading of theme, how to produce it and put it into operation. 
We will not fail to carry out a tutorial in a few weeks explaining step by step how to set up an overload, to modify it in order to fully meet your UX needs.