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;
}Inspiration: https://codepen.io/iebert1/pen/MyZgOr
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;
}Inspiration: https://codepen.io/iebert1/pen/MyZgOr
Download this override
(sdc override-articles-list.zip) {module 811}