Template overrides

If you are using Joomla as your CMS, there is a way to customize your website. These are called Template overrides. You can override almost everything in Joomla to fit your needs. You need some basic knowledge of PHP, but otherwise, it is pretty straightforward.

|In this tutorial, we will create a price table for displaying our services. The override is to be in the templates/[YOUR TEMPLATE NAME]/html/mod_articles_category/ folder.

The Fields - Which fields to use for our Template override

To make a working pricing table, you should have several features. In this example, I have created eight different features using Radio buttons, and these trigger CSS styles for the checkmarks that use Font Awesome (https://www.fontawesome.com).

  • Price - Text field
  • Short description - Textarea field
  • Features - Radio buttons (As many features you want to have)
  • Best Price - Radio button
  • Short description - Textarea
  • Label Text / Label Color - Checkboxes (Additional features)
  • Link to store, ie. to PayPal

- The article continues after this ad -

How is the structure for the Template Override

If you are familiar with how a template override works, you know that the overrides need to be in the html folder of your template. Since this is a module override and is for an article category, it must be inside the folder mod_article_category inside the html folder. The file’s name is entirely up to you, but good practice is to use a meaningful name. Remember to use letters and replace spaces with a dash (-) and not an underscore (_). The file type needs to be set to .php since it is an override.

See how the pricing table look

Here is the PHP Code for the Template override

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @Author 		JoomlaForever.com
 * @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;

?>
<!-- partial:index.partial.html -->
<div class="maintenance-cards">
<div class="price-tables">
   <div class="price-table-row row">
      

      <?php foreach ($list as $item) : ?>
      <!-- Price Table -->
      <?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
							foreach ($customFields as $customField){
							$customFields[$customField->name] = $customField;
						}?>
      <div class="price-table-col <?php echo $customFields['wm-featured']->value; ?>">
      
      <div class="pricing-table <?php echo $customFields['wm-label-color']->value; ?>">
            <!-- Table Head -->
            
            <div class="pricing-label"><?php echo $customFields['wm-label']->value; ?></div>
            <h2 class=""><?php echo $item->title; ?></h2>
            <h5><?php echo $customFields['wm-description']->value; ?></h5>
      
      
         
            <!-- Features -->
            <div class="pricing-features">
               
               <div class="support-features">
                  <div class="feature wm-support-time">
<?php echo $customFields['wm-support-time']->label; ?>
<span><?php echo $customFields['wm-support-time']->value; ?></span></div>
                  <div class="feature wm-backup"><?php echo $customFields['wm-backup']->label; ?>
<span><?php echo $customFields['wm-backup']->value; ?></span></div>
               </div>
               
               <div class="other-features">
                  <div class="feature wm-updates-core">
<?php echo $customFields['wm-updates-core']->label; ?>
<span class="icon <?php echo $customFields['wm-updates-core']->value; ?>">&nbsp;</span></div>
                  <div class="feature wm-updates-other"><?php echo $customFields['wm-updates-others']->label; ?>
<span class="icon <?php echo $customFields['wm-updates-others']->value; ?>">&nbsp;</span></div>
                  <div class="feature wm-security"><?php echo $customFields['wm-security']->label; ?>
<span class="icon <?php echo $customFields['wm-security']->value; ?>">&nbsp;</span></div>
                  <div class="feature wm-uptime"><?php echo $customFields['wm-uptime']->label; ?>
<span class="icon <?php echo $customFields['wm-uptime']->value; ?>">&nbsp;</span></div>
                  <div class="feature wm-seo"><?php echo $customFields['wm-seo']->label; ?>
<span class="icon <?php echo $customFields['wm-seo']->value; ?>">&nbsp;</span></div>
               </div>
            </div>
            <!-- Price -->
            <div class="price-tag">
               <span class="symbol">$</span>
               <span class="amount"><?php echo $customFields['wm-price']->value; ?></span>
               <span class="after">/month</span>
            </div>
            <!-- Button -->
            <a class="price-button" href="/<?php echo $item->link; ?>">Get Started</a>
         </div>
      </div>
      <?php endforeach; ?>
   </div>
</div>
</div>

The CSS code for the template override is as follows:

.services-pages div[itemprop="articleBody"] .maintenance-cards {
	max-width: 75%;
	margin: 5rem auto;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-table-col {
	max-width: 315px;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	h5 {
	margin: 2rem 0;
	line-height: 1.25;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	h2 {
	margin: 1rem 0;
	line-height: 1;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table {
	background: #fff;
	box-shadow: 0px 1px 10px -6px rgba(0, 0, 0, 0.15);
	padding: 2rem;
	border-radius: 4px;
	transition: 0.3s;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.pricing-label {
	border-radius: 2px;
	padding: 0.25rem 0.5rem;
	margin-bottom: 1rem;
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	h2 {
	color: #3b3b3b;
	font-size: 3rem;
	font-weight: 800;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	h5 {
	color: #b3b3b3;
	background-color: #3b3b3b;
	font-size: 0.85rem;
	font-weight: 400;
	padding: 0.5rem;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.pricing-features {
	margin-top: 2rem;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.pricing-features
	.feature {
	font-size: 1rem;
	margin: 0.125rem 0;
	padding: 0 0.5rem;
	color: #151414;
	display: flex;
	justify-content: space-between;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.pricing-features
	.feature:nth-child(even) {
	background-color: #c5baba;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.pricing-features
	.feature:nth-child(odd) {
	background-color: #c5baba73;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	span {
	color: #3b3b3b;
	font-weight: 900;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.price-tag {
	margin-top: 2rem;
	text-align: center;
	font-weight: 500;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.price-tag
	.symbol {
	font-size: 24px;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.price-tag
	.amount {
	letter-spacing: -2px;
	font-size: 64px;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.price-tag
	.after {
	color: #3b3b3b;
	font-weight: 500;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.price-button {
	display: block;
	color: #fff;
	margin-top: 2rem;
	padding: 0.75rem;
	border-radius: 2px;
	text-align: center;
	font-weight: 500;
	transition: 0.3s;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table
	.price-button:hover {
	text-decoration: none;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-table-row
	.pricing-table:hover {
	box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.15);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-cards {
	font-family: "Rubik", sans-serif;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.purple
	.pricing-label {
	background: var(--clr-primary-dark);
	color: var(--clr-primary-text);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.purple
	.price-tag {
	color: var(--clr-primary-dark);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.purple
	.price-button {
	background: var(--clr-primary-dark);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.purple
	.price-button:hover {
	background: var(--clr-secondary-dark);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.turquoise
	.pricing-label {
	background: var(--clr-primary-blue);
	color: var(--clr-primary-text);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.turquoise
	.price-tag {
	color: var(--clr-primary-blue);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.turquoise
	.price-button {
	background: var(--clr-primary-blue);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.turquoise
	.price-button:hover {
	background: var(--clr-seconary-blue);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.red
	.pricing-label {
	background: var(--clr-indianred);
	color: var(--clr-primary-text);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.red
	.price-tag {
	color: var(--clr-indianred);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.red
	.price-button {
	background: var(--clr-indianred);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.red
	.price-button:hover {
	background: var(--clr-indianred-hover);
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.icon::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.no::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "";
	color: red;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.yes::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "";
	color: green;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.price-cards {
	margin: 4rem 0 3.5rem 0;
	background-color: var(--clr-secondary-dark);
	padding: 2rem 0.5rem;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.no-featured {
	background-color: transparent;
}
.services-pages
	div[itemprop="articleBody"]
	.maintenance-cards
	.price-tables
	.featured {
	font-size: 16px !important;
	/* This ribbon is based on a 16px font side 
    and a 24px vertical rhythm. I've used em's 
    to position each element for scalability. 
    If you want to use a different font size 
    you may have to play with the position 
    of the ribbon elements */
	position: relative;
	outline: var(--clr-indianred-hover) 15px solid;
	color: #fff;
	/* Adjust to suit */
	z-index: 1;
	margin-bottom: auto;
	/* Based on 24px vertical 
    rhythm. 48px bottom margin 
    - normally 24 but the ribbon 'graphics' 
    take up 24px themselves so we double it. 
    &::before {
        left: -2em;
        border-right-width: 1em;
        border-left-color: transparent;
    }
    &::after {
        right: -2em;
        border-left-width: 1em;
        border-right-color: transparent;
    }*/
}

This is a fork from CodePen

This tutorial is a replica of Vincent Van Googles - Codepen (https://codepen.io/Gogh/pen/rNxOYYx) with modifications for our template override. Remember to have Bootstrap enabled for your template.

- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -

Comments powered by CComment