Customizing the GeneratePress theme with custom CSS is a key step in achieving a professional and unique website design. This guide will walk you through the essential CSS techniques for enhancing your GeneratePress theme’s appearance and functionality.
This guide provides step-by-step instructions to make your GeneratePress website look professional.
📋Table of Contents
🚀Enhancing Your Blog Design with the GeneratePress Theme
Creating a visually appealing and user-friendly blog is essential for attracting and retaining readers. The GeneratePress theme, known for its lightweight design and extensive customization options, is an excellent choice for bloggers who want to stand out. Here’s how you can enhance your blog design using the GeneratePress theme.
Creating a visually appealing and highly functional website is crucial for engaging visitors and enhancing their user experience. By leveraging the power of custom CSS, we have crafted a high-quality design for your website that stands out and meets your specific needs. Here’s how we achieved this transformation.
⚙️Step-by-Step Guide to Customize GeneratePress Theme
how to customize GeneratePress theme with custom css code ?🛠️
- Login to your WordPress dashboard.
- Go to Appearance and click on Customization.
- In Customization – scroll down – click on Additional CSS – and paste the given CSS code.
- After pasting css code ,finally, click on Publish.
- Clear your cache and refresh.
⚡CSS Code
/* Common Styles for Headings and Widget Titles */
/* Default heading styles */
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
font-weight: 600;
font-family: arial;
padding: 0;
size:50px;
}
/* Custom heading styles */
.custom-heading {
font-weight: 500;
padding: 10px 10px 10px 10px;
background : #4fda00;
border-radius: 10px;
border: 1px solid yellow;
color: #000000 !important;
box-shadow: rgba(3, 3, 9, 0.3) 0 2px ;
text-align: center; /* Only for widget-title */
}
.widget-title {
font-weight: 500;
padding: 10px 10px 10px 10px;
background-image: linear-gradient(to right, #ff9a2e 0%, #ffffff 51%, #146a00 100%);
border-radius: 10px;
border: 2px solid #00bf10;
color: #000000 !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
text-align: center; /* Only for widget-title */
}
/* Image Styles */
img, .rpwwt-widget ul li img, #rpwwt-recent-posts-widget-with-thumbnails-2 img {
height: auto;
max-width: 100%;
border-radius: 4px;
display: inline;
float: left;
margin: 0.3em 0.75em 0.75em 0;
}
/* Button Styles */
.wp-block-search__button, button, input[type=button], input[type=reset], input[type=submit], a.gb-button, a.read-more.button, .wp-element-button{
background-image: linear-gradient(to right, #00b140 0%, #00b140 51%, #00b140 100%); /* Button */
color: #fff !important;
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px !important;
}
.wp-block-search__button, a.gb-button, a.read-more.button {
font-size: 14px !important;
padding: 8px 20px !important;
text-align: center;
}
a.gb-button, a.read-more.button, .wp-element-button {
transition: 0.5s;
background-size: 200% auto;
border-radius: 120px;
}
/* Image Box Shadow */
.gb-block-image img, .wp-post-image{
vertical-align: middle;
margin-top: 0px;
border-radius: 12px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
/* Author Profile */
.author-profile {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: flex;
align-items: center;
box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
border-radius: 25px;
}
.author-profile .insights-avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
.author-profile .insights-avatar img {
border-radius: 100%;
}
.author-title {
margin-bottom: 0.1em;
font-weight: bold;
font-size: 18px;
}
.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: #00bf10;
float: left;
}
@media (max-width: 768px) {
.author-profile {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
margin-bottom: 60px;
flex-direction: column;
text-align: center;
}
.sidebar .widget {
display: flex;
flex-direction: column;
padding: 20px;
margin: 10px auto; /* Center horizontally with auto margin */
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
max-width: 90%; /* Ensure widget does not exceed 90% of the viewport width */
}
.author-profile .insights-avatar {
margin-right: 0;
width: 100%;
margin-top: -60px;
}
.author-profile .insights-avatar img {
max-width: 100px;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}
/* Entire Site Social Share */
.webcreation-float-social-wrapper {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.webcreation-float-social-sharing {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
font-size: 12px;
padding: 14px 10px;
}
.webcreation-float-social-sharing:first-of-type {
border-top-right-radius: 10px;
}
.webcreation-float-social-sharing:last-of-type {
border-bottom-right-radius: 10px;
}
.webcreation-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.webcreation-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.webcreation-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.webcreation-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.webcreation-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.webcreation-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.webcreation-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.webcreation-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.webcreationa-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.webcreation-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.webcreation-social-telegram {
fill: #fff;
background-color: #1ba2f1;
}
.webcreation-social-telegram:hover {
background-color: #2686C6;
}
/* After Post Social Share */
.webcreation-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.webcreation-social-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
}
.webcreation-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.webcreation-social-sharing {
font-size: 17px;
padding: 6px 17px;
display: inline-block;
}
.webcreation-social-wrapper {
margin: 30px 0px;
font-size: 0;
}
}
.webcreation-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.webcreation-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.webcreation-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.webcreation-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.webcreation-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.webcreation-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.webcreation-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.webcreation-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.webcreation-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.webcreation-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.webcreation-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.webcreation-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.webcreation-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.webcreation-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.webcreation-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}⚡PHP Code For Author Box
- Navigate to Appearance > Elements.
- Click on ‘Add New’ to create a new element with ‘Hook’.
- Paste your code in the box provided.
- Configure the display settings, including location and conditions where the hook should be applied.
- Click ‘Publish’ to activate the new element.
<div class="author-profile">
<div class="insights-avatar">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 250, '', '', array( 'alt' => get_the_author_meta( 'display_name' ) ) ); ?>
</div>
<div class="insights-author-info">
<div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
<h2 itemprop="name"><?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?></h2>
</div>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses_post( get_the_author_meta( 'description' ) ); ?></p>
</div>
<div class="author-links">
<a href="" title="Contact this author" aria-label="Contact the author">Contact</a>
</div>
</div>
</div>⚡PHP code for floating share button In entire site
- Navigate to Appearance > Elements.
- Click on ‘Add New’ to create a new element with ‘Hook’.
- Paste your code in the box provided.
- Configure the display settings, including location and conditions where the hook should be applied.
- Click ‘Publish’ to activate the new element.
<?php
$webcreationURL = urlencode(get_the_permalink());
$webcreationTitle = urlencode(get_the_title());
$webcreationImage = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="webcreation-float-social-wrapper hide-on-mobile hide-on-tablet">
<!-- Facebook -->
<a class="webcreation-float-social-sharing webcreation-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webcreationURL; ?>" target="_blank" rel="nofollow" aria-label="Share on Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>
</a>
<!-- Twitter -->
<a class="webcreation-float-social-sharing webcreation-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webcreationTitle; ?>&url=<?php echo $webcreationURL; ?>&via=webcreation" target="_blank" rel="nofollow" aria-label="Share on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
</a>
<!-- Pinterest -->
<a class="webcreation-float-social-sharing webcreation-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webcreationURL; ?>&media=<?php echo $webcreationImage; ?>&description=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow" aria-label="Share on Pinterest">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>
</a>
<!-- LinkedIn -->
<a class="webcreation-float-social-sharing webcreation-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webcreationURL; ?>&title=<?php echo $webcreationTitle; ?>&mini=true" target="_blank" rel="nofollow" aria-label="Share on LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
</a>
<!-- WhatsApp -->
<a class="webcreation-float-social-sharing webcreation-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webcreationTitle; ?> <?php echo $webcreationURL;?>" target="_blank" rel="nofollow" aria-label="Share on WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.555-5.338 11.891-11.893 11.891-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.655zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.451 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.646 3.742-.979zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.668.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.134.297-.347.446-.521.151-.173.198-.297.298-.495.099-.198.05-.372-.025-.521-.075-.148-.668-1.611-.916-2.211-.242-.579-.487-.501-.668-.511l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.875 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.693.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.29.173-1.413z"/></svg>
</a>
<!-- Telegram -->
<a class="webcreation-float-social-sharing webcreation-social-telegram" href="https://telegram.me/submit?url=<?php echo $webcreationURL;?>&title=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow" aria-label="Share on Telegram">
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z" fill="white"></path>
</svg>
</a>
</div>
⚡PHP Code For Post Share Social Button
- Navigate to Appearance > Elements.
- Click on ‘Add New’ to create a new element with ‘Hook’.
- Paste your code in the box provided.
- Configure the display settings, including location and conditions where the hook should be applied.
- Click ‘Publish’ to activate the new element.
<?php
$webcreationURL = urlencode(get_the_permalink());
$webcreationTitle = urlencode(get_the_title());
$webcreationImage = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="webcreation-social-wrapper">
<span class="hide-on-mobile">Share this content:</span>
<a class="webcreation-social-sharing webcreation-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webcreationURL; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webcreationTitle; echo " "; echo $webcreationURL; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webcreationTitle; ?>&url=<?php echo $webcreationURL; ?>&via=webcreation" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webcreationURL; ?>&media=<?php echo $webcreationImage; ?>&description=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $webcreationURL; ?>&title=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-reddit" href="https://www.reddit.com/submit?url=<?php echo $webcreationURL; ?>&title=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>📝Conclusion
In this article, I have taught you how to customize your GeneratePress Theme using my personal CSS code to make your entire website look very professional. Thank you for reaching out to this article, where we discussed how to enhance the GeneratePress Theme using custom CSS.
Certainly. So happens. We can communicate on this theme.