Improved User Experience on the Xmnews module
Category : Modules
Published by alain01 on 04-Apr-2020 06:50

Untitled 1

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

Here is the template for an article summary:

Original Image

Initial BT4 template

Original Image

Re-worked BT4 template

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

Original Image

Recent blocks template

Original Image

Recent block template

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.