What if you could have different colors and other styling for each category? With the Articles - Categories Module, you can - and all it takes is a few small tweaks. Joomla offers many modules, but some powerful ones go unnoticed. The Articles - Categories Module is one of them, and with a few small code and CSS tweaks, it can do far more than expected.

We are creating a website for the famous Joomla University. They have three big sections to present: “Academic studies”, “Research and cooperation” and “Career”. These are our categories, each of them will contain several articles which will be displayed as blog layouts. Each section will have its own design color. On the start page we want to present the three sections as an Articles - Categories Module and each category should reflect its design color.

Articles - Categories Module

This module displays a list of categories (with or without their corresponding subcategories) from one parent category. A simple list with linked titles, nothing fancy. In this tutorial I will show you how to create an override for it. We will add the category image and a custom field and make the module look like a grid.    

What we need

• One parent category “Joomla University” with the three subcategories mentioned above.
• A custom field of type text as explained in “Create a banner from Joomla's category description”.
• Each category needs a title, a description, an image and the text in the custom field (we will use this text instead of the title to link to the category).

Module

We go to System -> Site Templates -> Cassiopeia Details and Files -> Create Overrides -> Modules -> mod_articles_categories. We will rename the created files to have an alternative layout: grid.php and grid_items.php

We create a Categories Module with title “Discover your opportunities” in the Position “bottom-a” (we are using Cassiopeia as template), select “Joomla University” as Parent Category and set Category Descriptions to “Show”. In the Advanced options we select the Layout “grid”, set Heading Style to h3, add the Module Class “categories-grid”, set the Header Tag to h2 and the Module Style to “noCard”.

Since we haven’t yet changed anything the module looks very simple:

Override

We replace the code in grid_items.php with this:

<?php

/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_categories
 *
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Router\Route;
use Joomla\Component\Content\Site\Helper\RouteHelper;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;

$input  = $app->getInput();
$option = $input->getCmd('option');
$view   = $input->getCmd('view');
$id     = $input->getInt('id');


foreach ($list as $item) : ?>
    <?php $jcfields = FieldsHelper::getFields('com_content.categories', $item, true);
        foreach($jcfields as $jcfield) {
            $jcfields[$jcfield->name] = $jcfield;
        }
    ?>
    <li class="category-color-<?php echo $item->id; ?>">
        <?php echo HTMLHelper::_('image', $item->getParams()->get('image'), $item->getParams()->get('image_alt')); ?>

        <div class="category-content">
            <?php $item_heading = 'h' . $params->get('item_heading', 'h4') . ' class="category-title"'; ?>
                <<?php echo $item_heading; ?>>
                    <?php echo $item->title; ?>
            </<?php echo $item_heading; ?>>

            <?php if ($params->get('show_description', 0)) : ?>
                <?php echo HTMLHelper::_('content.prepare', $item->description, $item->getParams(), 'mod_articles_categories.content'); ?>
            <?php endif; ?>

            <div class="btn-readmore">
                <a href="/<?php echo Route::_(RouteHelper::getCategoryRoute($item->id, $item->language)); ?>">
                    <?php echo $jcfields['link-text']->value; ?>
                </a>
                <span class="fa-solid fa-arrow-right" aria-hidden="true"></span>
            </div>
        </div>
    </li>
<?php endforeach; ?>

If you compare the code with the original one, you will see that we have removed several lines of code (unnecessary for our purpose), restructured things and added code to get the custom fields and the image of the categories.

Before we do changes in the CSS the module will now looks like this:

Our CSS

In order to style each category with a different color we added a class to the list elements that reflects the category id:

<li class="category-color-<?php echo $item->id; ?>">

In my example the categories have the ids 31, 32 and 33. You can modify the CSS with your ids. Each category class gets a specific color as CSS custom property (--catcolor):

.category-color-31 {
  --catcolor: #d74126;
}
.category-color-32 {
  --catcolor: #50a0c3;
}
.category-color-33 {
  --catcolor: #ffd84f;
}
/* Mod_articles_categories */
.categories-grid {
  margin-block: 3rem;
  h2 {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .mod-articlescategories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: 2rem;
    li {
      border: 1px solid #f2f2f2;
      border-block-end: 6px solid var(--catcolor);
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    img {
      aspect-ratio: 16/9;
    }
    .category-content {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .category-title {
      background-color: var(--catcolor);
      padding-inline: .25rem;
      width: fit-content;
    }
    .btn-readmore {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-block-start: auto;
      span::before {
        color: var(--catcolor);
      }
    }
  }
}

With this changes in the user.css our module looks like a grid with three columns, each of them containing an image, the title, the description and a link to the category (if you have a menu item for each category the link will lead automagically to it):

Conclusion

Core modules, overrides, custom fields and CSS are a great combination to improve your website.

On preparing this tutorial I went back and forth to find the best way to achieve this layout. I took the Articles - Categories Module, because I wanted to link directly to the category (e.g. as blog layout in the menu). But it is also possible to create the same layout using the Articles Module ;-)