This Joomla 4 override allows you to display a knowledge base simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @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\Language\Text;
if (!$list)
{
return;
}
?>
<div class="row row-cols-1 row-cols-md-3"> <!-- because we want 3 columns -->
<?php if ($grouped) : ?>
<?php foreach ($list as $group_name => $group) : ?>
<section class="knowledge-base-section">
<div class="mod-articles-category-group">
<h3><?php echo $group_name; ?></h3>
</div>
<hr class="slash-2">
<ul class="col list-unstyled article-list">
<?php foreach ($group as $item) : ?>
<li>
<!-- Article title -->
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
<i class="fa fa-arrow-circle-right"></i> <?php echo $item->title; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</section>
<?php endforeach; ?>
<?php endif; ?>
</div>CSS
.knowledge-base {
display: inline-block;
vertical-align: top;
width: 100%;
}
.knowledge-base-section {
padding: 20px;
margin-top: 10px;
width: 33%;
display: inline-block;
vertical-align: top;
}
.knowledge-base-section h3 {
color: #777777;
font-size: 18px;
font-weight: 600;
margin: 25px 0 5px;
text-transform: uppercase;
}
hr {
border: 0;
margin-top: 0px !important;
margin-bottom: 20px !important;
margin: 1.35em auto;
max-width: 100%;
background-position: 50%;
box-sizing: border-box;
}
.slash-2 {
height: 8px;
background-image: url('data:image/svg+xml,');
background-size: 4px 4px;
width: 100%;
}
.article-list li {
margin-bottom: 10px;
font-size: 0.85em;
}
.section h3 a {
color: inherit;
}Inspiration: https://codepen.io/genrbr/pen/avbbZe
This Joomla 3 override allows you to display a knowledge base simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.
Joomla 3 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="knowledge-base">
<?php if ($grouped) : ?>
<?php foreach ($list as $group_name => $group) : ?>
<section class="knowledge-base-section">
<div class="mod-articles-category-group">
<h3><?php echo $group_name; ?></h3>
</div>
<hr class="slash-2">
<ul class="list-unstyled article-list">
<?php foreach ($group as $item) : ?>
<li>
<!-- Article title -->
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
<i class="fa fa-arrow-circle-right"></i> <?php echo $item->title; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</section>
<?php endforeach; ?>
<?php endif; ?>
</div>CSS
.knowledge-base {
display: inline-block;
vertical-align: top;
width: 100%;
}
.knowledge-base-section {
padding: 20px;
margin-top: 10px;
width: 33%; /* 3 columns */
display: inline-block;
vertical-align: top;
}
.knowledge-base-section h3 {
color: #777777;
font-size: 18px;
font-weight: 600;
margin: 25px 0 5px;
text-transform: uppercase;
}
hr {
border: 0;
margin-top: 0px !important;
margin-bottom: 20px !important;
margin: 1.35em auto;
max-width: 100%;
background-position: 50%;
box-sizing: border-box;
}
.slash-2 {
height: 8px;
background-image: url('data:image/svg+xml,');
background-size: 4px 4px;
width: 100%;
}
.article-list li {
margin-bottom: 10px;
font-size: 0.85em;
}
.section h3 a {
color: inherit;
}Inspiration: https://codepen.io/genrbr/pen/avbbZe