Live demo
Knowledge Base
DNS
- How to enable or add SPF records?
- How many MX records I can have?
- I accidentally deleted DNS zone, how to restore it?
- Can DNS clustering be enabled?
Domain names
- Do you support SSL?
- ICANN Domain Verification Regulation
- EPP code and all about it
- Domain is suspended for ICANN domain verification
Email Accounts
- How to get email configuration?
- How can I setup Outlook?
- I need to send mass mail, can I use external SMTP?
- I cannot receive/send emails
FTP Accounts
- Where is the configuration file for my script located?
- How to make directory/file writable?
- Why does the login to additional FTP account fail?
- How do I extract compressed files?
Servers
- Do you support foreign keys in phpmyadmin?
- How can I fix/repair and optimize database myself?
- How to fix MySQL timeout errors?
- How to import/export database?
Your account
- Can I choose any payment period I want?
- What about my data?
- Can I prepay for hosting service or domains?
- When will you claim my PayPal payment?
Links are disabled in the demo
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>
<?php if ($params->get('link_titles') == 1) : ?>
<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>
<?php else : ?>
<i class="fa fa-arrow-circle-right"></i> <?php echo $item->title; ?>
<?php endif; ?>
</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: 49%;
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,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="hsla(0, 0%, 65%, 1.0)"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"/><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"/></svg>');
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
