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;
}

Download this override

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

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

29800 Landerneau

+33 674 502 799

daniel@web-eau.net

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.