Skip to content

Instantly share code, notes, and snippets.

@AchalJ
Created February 20, 2024 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AchalJ/916aeb53db16d49fe7c29f5ab688d7a3 to your computer and use it in GitHub Desktop.
Save AchalJ/916aeb53db16d49fe7c29f5ab688d7a3 to your computer and use it in GitHub Desktop.
PowerPack Content Grid - Replicate Style 8 with custom layout (Beaver Themer)
<div class="pp-content-grid-post-body">
[wpbb-if post:featured_image]
<div class="pp-content-grid-post-image">
[wpbb post:featured_image size="large" display="tag" linked="yes"]
</div>
[/wpbb-if]
<div class="pp-content-grid-post-text">
<h3 class="pp-content-grid-post-title">[wpbb post:link text="title"]</h3>
<div class="pp-content-grid-post-meta">
[wpbb post:date format="F j, Y"]
</div>
<div class="pp-content-grid-post-more-link">
<a href="[wpbb post:url]"><span class="fa fa-angle-right"></span> Read More</a>
</div>
</div>
</div>
.pp-content-grid-post {
font-size: 14px;
padding: 0;
}
.pp-content-grid-post-body {
display: flex;
}
.pp-content-grid-post-image {
padding: 0;
flex-basis: 30%;
}
.pp-content-grid-post-text {
padding: 20px;
}
.pp-content-grid-post-title {
font-size: 20px;
line-height: 26px;
margin: 0;
padding: 0;
}
.pp-content-grid-post-meta {
padding: 0;
}
.pp-content-grid-post-meta a {
text-decoration: none;
}
.pp-content-grid-post-meta,
.pp-content-grid-post-meta a {
color: #888;
font-size: 12px;
}
.pp-content-grid-post-meta a:hover {
color: #000;
}
.pp-content-grid-separator {
min-height: 2px;
width: 60px;
background: #000;
margin-top: 10px;
margin-bottom: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment