This Joomla 4 override allows you to display your articles in an Google SERPs style simply using Joomla's mod_articles_latest 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_latest
 * @author		web-eau.net
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

if (!$list)
{
	return;
}

?>
<div class="navbar-serp">
	<div class="lft-nav">
		<div id="logo">
			<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
		</div>
		<div class="search-area">
			<div class="search-field">
				<form>
					<input class="search" type="search" placeholder="">
				</form>
				<div class="new-mic"><i class="fa fa-search"></i></div>
			</div>
		</div>
	</div>
	<div class="rght-nav d-none d-lg-block">
		<div class="rght-nav-content">
			<ul>                 
				<li class="apps">
					<i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i> 
				</li>
				<li>
					<div class="sign-in">
						Sign In
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="navbar2">
	<div class="lft-nav2">
		<ul>
			<li>
				<div class="all-item">
					<a href="#">All</a>
				</div>
			</li>
			<li>
				<div class="news">
					<a href="#">News</a>
				</div>
			</li>
			<li>
				<div class="videos">
					<a href="#">Videos</a>
				</div>
			</li>
			<li>
				<div class="images">
					<a href="#">Images</a>
				</div>
			</li>
			<li>
				<div class="app">
					<a href="#">Apps</a>
				</div>
			</li>
			<li>
				<div class="bitchass">
					<a href="#" role="menu">
						<span class="more">More</span>
					</a>
				</div>
			</li>
			<li>
				<div class="search">
					<a class="srch-tools" href="#">Search Tools</a>
				</div>
			</li>
		</ul>
	</div>
</div>
<div class="topbar-1">
	<p>About 1,040,000,000 results (0.60 seconds)</p>
</div>
<div class="main-content-lg">
	<div class="content-md">
		<div class="content-s">
			<?php foreach ($list as $item) : ?>
			<div class="serp-section">
				<div class="c1-s2">
					<h3 class="r"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h3> 
					<div class="r2">
						<span class="r21"><?php echo JHTML::_('string.truncate', $item->link, 80, false, false) ; ?> <i class="fa fa-caret-down"></i> </span> 
					</div>
					<div class="r3">
						<span class="r31"><?php echo \JHtml::_('date', $item->created, 'DATE_FORMAT_LC3'); ?> - <!-- article date -->
						<?php echo JHTML::_('string.truncate', $item->introtext, 150, false, false) ; ?></span> 
					</div>
				</div>
			</div>
			<?php endforeach; ?>
			<hr>
			<div class="section-three">
				<div class="s3-header">
					<h3>Searches related to free codecamp</h3>
				</div>
				<div class="cards">
					<div id="card1">
						<p class="lnk"><a href="#"><b>Github</b></a></p>
						<p class="lnk"><a href="#">free codecamp<b>review</b></a></p>
						<p class="lnk"><a href="#">free code camp <b>review</b></a></p>
						<p class="lnk"><a href="#"><b>the odin project</b></a></p>
					</div>
					<div id="card2">
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
					</div>
				</div>
			</div>
			<hr>
			<div class="section-four">
				<div class="s4-data">
					<div class="glogo"><img src="images/overrides/Gooooogle.jpg">
					</div>
					<div class="s4-data-numbers">
						<ul>
							<li>1</li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">8</a></li>
							<li><a href="#">9</a></li>
							<li><a href="#">10</a></li>
							<li><a href="#">Next</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.navbar-serp{
  margin: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 65px;
}
.lft-nav{
  display: flex;
  flex-direction: row;
  align-items: center;
}
#logo img{
  width: 115px;
  padding: 6px 21px 0px 15px;
}
.search-area{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-field{
  position: relative;
  width: 490px;
  /*display: flex;*/
}
form input[type=search]{
  position: relative;
  box-sizing: border-box;
  width: 490px;
  height: 36px;
  padding: 19px 15px;
  outline-color: #4285f4;
  direction: ltr;
  font-size: 16px;
  font-family: sans-serif;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 24px !important;
  margin-bottom: 1px;
 }
.new-mic i{
  position: absolute;
  width: 4%;
  right: 6px;
  top: 8px;
  color: #4285F4;
}
.apps{
  font-size: 1.5em; 
  color: #727272; 
  padding-top: 18px;
  cursor: pointer;
}
.apps i {
  margin-right: 2px;
}
.rght-nav-content ul{
  width: auto;
  display: flex;
  align-items: center;
  padding: 0px 30px;
}
.rght-nav-content ul li{
  text-decoration: none;
  display: inline-block;
  padding-left: 19px;
}
.sign-in{
  margin-top: 15px;
  font-weight: bold;
  background-color: #4285f4;
  background-size: auto;
  border-image-repeat: stretch;
  line-height: 28px;
  border-radius: 2px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #fff !important;
  font-size: 13px;
  font-family: sans-serif;
}
.navbar2{
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  margin: 0px;
  height: 59px;
  background-color: rgb(255, 255, 255);
  align-items: center;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.lft-nav2 ul{
  display: flex;
}
.lft-nav2 ul li{
  line-height: 54px;
  display: inline-block;
  margin: 0px 8px;
}
.lft-nav2 ul li a{
  text-decoration: none;
  color: rgb(119, 119, 119);
  font-size: 13px;
  font-family: arial, sans-serif;
  padding: 0px 8px;
  margin: 0px;
}
.lft-nav2 .all-item{
  padding: 0px;
  border-bottom: 3px solid #4285f4;
  margin-left: 84px;
}
.lft-nav2 .all-item a{
  color: #4285f4;
  font-weight: bold;
}
.topbar-1{
  display: flex;
  height: 43px;
  justify-content: flex-start;
  align-items: center;
}
.topbar-1 p{
  display: block;
  line-height: 43px;
  font-size: 13px;
  color: rgb(128, 128, 128);
  font-family: arial, sans-serif;
  margin: 0 0 0 134px;
}
.main-content-lg{
  width: 1250px;
  height: 1300px;
  margin-top: 3px;
  clear: both;
}
.content-md{
  width: 616px;
  margin-left: 120px;
  margin-right: 254px;
  padding: 0 8px;
}
.content-s{
  width: 600px;
  padding: 0 8px;
}
.serp-section{
  display: flex;
  flex-direction: column;
  width: 600px;
  text-align: left;
  padding-top: 6px;
  margin-bottom: 23px;
}
.section-one-header{
  display: flex;
  flex-direction: column;
}
.r{
  font-size: 18px;
  margin-top: 0px;
}
.r a{
  color: rgb(26, 13, 171);
  font-weight: normal!important;
  text-decoration: none;
}
.r a:hover{
  cursor: pointer;
  text-decoration: underline;
}
.r2{
  display: flex;
  justify-content: flex-start;
  height: 17px;
  padding-bottom: 11px;
}
.r21{
  color: rgb(0, 102, 33) !important;
  font-size: 14px;
  line-height: 16px;
}
.r31{
  color: rgb(84, 84, 84);
  font-size: 13px;
}
hr{
  margin-bottom: 16px;
  margin-left: -8px;
  margin-right: -8px;
  opacity: 0.35;
}
.section-two{
  width: 600px;
  height: 692px;
}
.c1-s2{
  width: 600px;
  height: 74px;
  margin-bottom: 23px;
}
.section-three{
  width: 600px;
  height: 133px;
  margin: 0px;
  padding-left: 8px;
  padding-right: 8px;
}
.s3-header{
  height: 18px;
  padding-bottom: 7px;
  padding-top: 0px;
}
.s3-header h3{
  color: rgb(128, 128, 128);
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: normal!important;
  margin-top: 0px;
}
.cards{
  padding-top: 2px;
  display: flex;
  justify-content: flex-start;;
}
.cards #card1{
  display: block;
  float: left;
  width: 152px;
  height: 100px;
  padding-right: 16px;
}
.cards #card2{
  display: block;
  float: right;
  width: 152px;
  height: 100px;
}
.lnk{
  margin: 0px;
  padding-bottom: 7px;
}
.cards p a{
  text-decoration: none;
  font-size: 13px;
  color: rgb(26, 13, 171);
}
.section-four{
  width: 616px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s4-data{
  height: 55px;
  margin-top: 18px;
}
.s4-data-numbers{
  padding-left: 15px;
}
.s4-data-numbers ul{
  display: flex;
  justify-content: center;
  padding-left: 0px;
  margin-top: 0px;
}
.s4-data-numbers ul li{
  display: inline-block;
  font-size: 13px;
  font-family: arial, sans-serif;
  padding: 0 6px;
}
.s4-data-numbers ul li:nth-child(11){
  padding-left: 30px;
}
.s4-data-numbers ul li a{
  color: rgb(66, 133, 244);
  text-decoration: none;
}

This Joomla 3 override allows you to display your articles in an Google SERPs style simply using Joomla's mod_articles_latest 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_latest
		* @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="navbar-serp">
	<div class="lft-nav">
		<div id="logo">
			<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
		</div>
		<div class="search-area">
			<div class="search-field">
				<form>
					<input class="search" type="search" placeholder="">
				</form>
				<div class="new-mic"><i class="fa fa-search"></i></div>
			</div>
		</div>
	</div>
	<div class="rght-nav d-none d-lg-block">
		<div class="rght-nav-content">
			<ul>                 
				<li class="apps">
					<i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i> 
				</li>
				<li>
					<div class="sign-in">
						Sign In
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="navbar2">
	
	<div class="lft-nav2">
		<ul>
			<li>
				<div class="all-item">
					<a href="#">All</a>
				</div>
			</li>
			<li>
				<div class="news">
					<a href="#">News</a>
				</div>
			</li>
			<li>
				<div class="videos">
					<a href="#">Videos</a>
				</div>
			</li>
			<li>
				<div class="images">
					<a href="#">Images</a>
				</div>
			</li>
			<li>
				<div class="app">
					<a href="#">Apps</a>
				</div>
			</li>
			<li>
				<div class="bitchass">
					<a href="#" role="menu">
						<span class="more">More</span>
						
					</a>
				</div>
			</li>
			<li>
				<div class="search">
					<a class="srch-tools" href="#">Search Tools</a>
				</div>
			</li>
		</ul>
		
	</div>
	
</div>


<div class="topbar-1">
	<p>About 1,040,000,000 results (0.60 seconds)</p>
</div>

<div class="main-content-lg">
	<div class="content-md">
		<div class="content-s">
		
			<?php foreach ($list as $item) : ?>
			<div class="serp-section">
				<div class="c1-s2">
					<h3 class="r"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h3> 
					<div class="r2">
						<span class="r21"><?php echo $item->link; ?> <i class="fa fa-caret-down"></i> </span> 
					</div>
					<div class="r3">
						<span class="r31"><?php echo \JHtml::_('date', $item->created, 'DATE_FORMAT_LC3'); ?> - <!-- article date -->
						<?php echo JHTML::_('string.truncate', $item->introtext, 150, false, false) ; ?></span> 
					</div>
				</div>
			</div>
			<?php endforeach; ?>
			
			<hr>
			
			<div class="section-three">
				<div class="s3-header">
					<h3>Searches related to free codecamp</h3>
				</div>
				<div class="cards">
					<div id="card1">
						<p class="lnk"><a href="#"><b>Github</b></a></p>
						<p class="lnk"><a href="#">free codecamp<b>review</b></a></p>
						<p class="lnk"><a href="#">free code camp <b>review</b></a></p>
						<p class="lnk"><a href="#"><b>the odin project</b></a></p>
					</div>
					<div id="card2">
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
					</div>
				</div>
			</div>
			
			<hr>
			
			<div class="section-four">
				<div class="s4-data">
					<div class="glogo"><img src="images/overrides/Gooooogle.jpg">
					</div>
					<div class="s4-data-numbers">
						<ul>
							<li>1</li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">8</a></li>
							<li><a href="#">9</a></li>
							<li><a href="#">10</a></li>
							<li><a href="#">Next</a></li>
						</ul>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</div>

CSS

.navbar-serp{
  margin: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 65px;
}
.lft-nav{
  display: flex;
  flex-direction: row;
  align-items: center;
}
#logo img{
  width: 115px;
  padding: 6px 21px 0px 15px;
}
.search-area{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-field{
  position: relative;
  width: 490px;
  /*display: flex;*/
}
form input[type=search]{
  position: relative;
  box-sizing: border-box;
  width: 490px;
  height: 36px;
  padding: 19px 15px;
  outline-color: #4285f4;
  direction: ltr;
  font-size: 16px;
  font-family: sans-serif;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 24px !important;
  margin-bottom: 1px;
 }
.new-mic i{
  position: absolute;
  width: 4%;
  right: 6px;
  top: 8px;
  color: #4285F4;
}
.apps{
  font-size: 1.5em; 
  color: #727272; 
  padding-top: 18px;
  cursor: pointer;
}
.apps i {
  margin-right: 2px;
}
.rght-nav-content ul{
  width: auto;
  display: flex;
  align-items: center;
  padding: 0px 30px;
}
.rght-nav-content ul li{
  text-decoration: none;
  display: inline-block;
  padding-left: 19px;
}
.sign-in{
  margin-top: 15px;
  font-weight: bold;
  background-color: #4285f4;
  background-size: auto;
  border-image-repeat: stretch;
  line-height: 28px;
  border-radius: 2px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #fff !important;
  font-size: 13px;
  font-family: sans-serif;
}
.navbar2{
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  margin: 0px;
  height: 59px;
  background-color: rgb(255, 255, 255);
  align-items: center;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.lft-nav2 ul{
  display: flex;
}
.lft-nav2 ul li{
  line-height: 54px;
  display: inline-block;
  margin: 0px 8px;
}
.lft-nav2 ul li a{
  text-decoration: none;
  color: rgb(119, 119, 119);
  font-size: 13px;
  font-family: arial, sans-serif;
  padding: 0px 8px;
  margin: 0px;
}
.lft-nav2 .all-item{
  padding: 0px;
  border-bottom: 3px solid #4285f4;
  margin-left: 84px;
}
.lft-nav2 .all-item a{
  color: #4285f4;
  font-weight: bold;
}
.topbar-1{
  display: flex;
  height: 43px;
  justify-content: flex-start;
  align-items: center;
}
.topbar-1 p{
  display: block;
  line-height: 43px;
  font-size: 13px;
  color: rgb(128, 128, 128);
  font-family: arial, sans-serif;
  margin: 0 0 0 134px;
}
.main-content-lg{
  width: 1250px;
  height: 1300px;
  margin-top: 3px;
  clear: both;
}
.content-md{
  width: 616px;
  margin-left: 120px;
  margin-right: 254px;
  padding: 0 8px;
}
.content-s{
  width: 600px;
  padding: 0 8px;
}
.serp-section{
  display: flex;
  flex-direction: column;
  width: 600px;
  text-align: left;
  padding-top: 6px;
  margin-bottom: 23px;
}
.section-one-header{
  display: flex;
  flex-direction: column;
}
.r{
  font-size: 18px;
  margin-top: 0px;
}
.r a{
  color: rgb(26, 13, 171);
  font-weight: normal!important;
  text-decoration: none;
}
.r a:hover{
  cursor: pointer;
  text-decoration: underline;
}
.r2{
  display: flex;
  justify-content: flex-start;
  height: 17px;
  padding-bottom: 11px;
}
.r21{
  color: rgb(0, 102, 33) !important;
  font-size: 14px;
  line-height: 16px;
}
.r31{
  color: rgb(84, 84, 84);
  font-size: 13px;
}
hr{
  margin-bottom: 16px;
  margin-left: -8px;
  margin-right: -8px;
  opacity: 0.35;
}
.section-two{
  width: 600px;
  height: 692px;
}
.c1-s2{
  width: 600px;
  height: 74px;
  margin-bottom: 23px;
}
.section-three{
  width: 600px;
  height: 133px;
  margin: 0px;
  padding-left: 8px;
  padding-right: 8px;
}
.s3-header{
  height: 18px;
  padding-bottom: 7px;
  padding-top: 0px;
}
.s3-header h3{
  color: rgb(128, 128, 128);
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: normal!important;
  margin-top: 0px;
}
.cards{
  padding-top: 2px;
  display: flex;
  justify-content: flex-start;;
}
.cards #card1{
  display: block;
  float: left;
  width: 152px;
  height: 100px;
  padding-right: 16px;
}
.cards #card2{
  display: block;
  float: right;
  width: 152px;
  height: 100px;
}
.lnk{
  margin: 0px;
  padding-bottom: 7px;
}
.cards p a{
  text-decoration: none;
  font-size: 13px;
  color: rgb(26, 13, 171);
}
.section-four{
  width: 616px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s4-data{
  height: 55px;
  margin-top: 18px;
}
.s4-data-numbers{
  padding-left: 15px;
}
.s4-data-numbers ul{
  display: flex;
  justify-content: center;
  padding-left: 0px;
  margin-top: 0px;
}
.s4-data-numbers ul li{
  display: inline-block;
  font-size: 13px;
  font-family: arial, sans-serif;
  padding: 0 6px;
}
.s4-data-numbers ul li:nth-child(11){
  padding-left: 30px;
}
.s4-data-numbers ul li a{
  color: rgb(66, 133, 244);
  text-decoration: none;
}

Download this override

(sdc override-articles-list.zip) {module 811}

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net

Quick links