How to Customize GeneratePress Author Box
How to Customize GeneratePress Author Box
Today you will learn how to customize your blog author box using some line of coding and CSS. After applying this your author box will going to be very professional like bloggingskill.com.
Contents hide
1 GeneratePress Author Box CSS Code
2 GeneratePress Author Box PHP Script
3 GeneratePress Author Box Video Tutorial
GeneratePress Author Box CSS Code
/* bloggingskill author box*/
.bloggingskill-author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
border-radius: 25px;
}
.bloggingskill-author-box .insights-avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
.bloggingskill-author-box .insights-avatar img {
border-radius: 100%;
}
.author-title {
margin-bottom: 0.1em;
font-weight: 500;
font-size:18px;
font-weight:bold;
}
.author-description {
line-height: 1.6em;
font-size:16px;
}
.author-links a {
margin-top: -2em;
font-size: 14px;
line-height: 2em;
font-weight:bold;
color: #26BC00;
float: left;
}
@media (max-width: 768px) {
.bloggingskill-author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
margin-bottom: 60px;
flex-direction: column;
text-align: center;
}
.bloggingskill-author-box .insights-avatar {
margin-right: 0;
width: 100%;
margin-top: -60px;
}
.bloggingskill-author-box .insights-avatar img {
max-width: 100px;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}
/*end of bloggingskill author box*/
GeneratePress Author Box PHP Script
<div class="bloggingskill-author-box">
<div class="insights-avatar">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
</div>
<div class="insights-author-info">
<div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
</div>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
<a href="https://bloggingskill.com/about-us/" title="Read more about this author">Read More</a>
</div>
</div>
</div>
Post a Comment