how to customize Generatepress theme with css code free in 2024?

by

This article focuses on how to customize Generatepress theme with css or the customization of the GeneratePress Theme and the importance of having a website structure that is both Google Adsense friendly and SEO friendly. The design and theme of your website play a crucial role in obtaining Adsense approval promptly. As beginners embark on their blogging journey, their initial investment typically involves purchasing a domain and hosting.

You don’t have to worry anymore! At bloggingskill, you can now get premium themes at an incredibly low and affordable price. We highly recommend trying out Generatepress Premium, a lightweight and AdSense-friendly theme.

How can you enhance your blog design with GeneratePress theme?

GeneratePress Premium is an incredibly lightweight and Adsense-friendly theme. However, it may not offer the most outstanding design for your website. The default design is pretty standard, but fear not! We can easily customize it to your liking using the Additional CSS section.

We have created a high-quality design for your website by utilizing Custom CSS to enhance the appearance and user experience of the GeneratePress Theme. Our design also includes SEO and speed optimization to ensure optimal performance.

The best part is that this service is completely free! You can easily copy the custom code provided here and paste it into your WordPress website. Rest assured, we pay attention to every detail and take care of any minor errors that may arise.

Furthermore, our design is lightweight and will not negatively impact your website’s speed. However, we recommend taking a backup of your website before applying any customizations, just in case. This way, if anything unexpected occurs, you can easily revert back to the previous version of your website.

how to customize Generatepress theme with css code in 2024?

how to customize Generatepress theme with css code
how to customize Generatepress theme with css code
  • Login to your WordPress dashboard.
  • Go to Appearance and click on Customization.
  • Under Customization, scroll down, click on Additional CSS, and paste the given CSS code.
  • Finally, click on Publish.
  • Clear your cache and refresh.

.entry-content h2, h3, h4, h5, h6 {
    font-weight: 500;
    padding: 10px 10px 10px 25px;
    background-image: linear-gradient(to right, #04a17a 0%, #3cd3ad 51%, #04a17a 100%);
    border-radius: 10px;
    color: #fff !important;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}




.widget-title {
    font-weight: 500;
    padding: 10px 10px 10px 25px;
    background-image: linear-gradient(to right, #04a17a 0%, #3cd3ad 51%, #04a17a 100%);
    border-radius: 10px;
    color: #fff !important;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
	text-align: center;
}



#rpwwt-recent-posts-widget-with-thumbnails-2 img {
    width: 50px;
    height: 50px;
}
.rpwwt-widget ul li img {
    display: inline;
    float: left;
    margin: 0.2em 0.75em 0.75em 0;
}
.rpwwt-widget ul li img {
    display: inline;
    float: left;
    margin: 0.3em 0.75em 0.75em 0;
}
.rpwwt-widget img {
    border-radius: 4px;
}
img {
    height: auto;
    max-width: 100%;
}



.wp-block-search__button {
    background: linear-gradient(to right, #04a17a 0%, #3cd3ad 51%, #04a17a 100%);
}
.wp-block-search__button {
    border-radius: 10px;
    font-size: 14px !important;
    padding: 8px 20px !important;
    text-align: center;
    color: #fff !important;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px !important;
}


a.gb-button {
    font-size: 14px;
    padding: 10px 25px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border-radius: 120px;
}
a.gb-button {
    background-image: linear-gradient(to right, #04a17a 0%, #3cd3ad 51%, #04a17a 100%);
}



.gb-block-image img {
    vertical-align: middle;
    margin-top: 0px;
    border-radius: 12px;
    box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}



button, input[type=button], input[type=reset], input[type=submit] {
    background-image: linear-gradient(to right, #04a17a 0%, #04a17a 51%, #04a17a 100%);
    color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-appearance: button;
    padding: 10px 20px;
    border-radius: 10px;
}



/* 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: #04A17A;
	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*/




/* Entire Site Social Share Design by loan patrika*/

.loanpatrika-float-social-wrapper {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9999;
}

.loanpatrika-float-social-sharing {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    min-height: 30px;
    font-size: 12px;
    padding: 14px 10px;
}


.loanpatrika-float-social-sharing:first-of-type {
    border-top-right-radius: 10px;
}

.loanpatrika-float-social-sharing:last-of-type {
    border-bottom-right-radius: 10px;
}

.loanpatrika-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);
}

.loanpatrika-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.loanpatrika-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.loanpatrika-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.loanpatrika-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.loanpatrika-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.loanpatrika-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.loanpatrika-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.loanpatrika-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.loanpatrika-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.loanpatrika-social-telegram {
    fill: #fff;
    background-color: #1ba2f1;
}

.loanpatrika-social-telegram:hover {
    background-color: #2686C6;
}






/* After Post Social Share Design by loan patrika*/

.loanpatrika-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.loanpatrika-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.loanpatrika-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .loanpatrika-social-sharing {
        font-size: 17px;
        padding: 6px 17px;
        display: inline-block;
    }
	.loanpatrika-social-wrapper {
    margin: 30px 0px;
    font-size: 0;
}


}

.loanpatrika-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.loanpatrika-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.loanpatrika-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.loanpatrika-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

.loanpatrika-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.loanpatrika-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.loanpatrika-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.loanpatrika-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.loanpatrika-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.loanpatrika-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.loanpatrika-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.loanpatrika-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.loanpatrika-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.loanpatrika-social-reddit {
    fill: #fff;
    background-color: rgba(255, 87, 0, 1);
}

.loanpatrika-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

PHP code for Author Box

Go to Appearance and then click on Elements and create new elements with Hooks, paste code in box.

<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/" title="Contact this author">Contattaci</a>
       </div>
    </div>
</div>

PHP code for floating share button for entire site

Go to Appearance and then click on Elements and create new elements with Hooks, paste code in box.

<?php
$loanpatrikaURL = urlencode(get_the_permalink());
$loanpatrikaTitle = urlencode(get_the_title());
$loanpatrikaImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>

<div class="loanpatrika-float-social-wrapper hide-on-mobile hide-on-tablet">
	<a class="loanpatrika-float-social-sharing loanpatrika-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $loanpatrikaURL; ?>" 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="loanpatrika-float-social-sharing loanpatrika-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $loanpatrikaTitle;?>&amp;url=<?php echo $loanpatrikaURL;?>&amp;via=loanpatrika" 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="loanpatrika-float-social-sharing loanpatrika-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $loanpatrikaURL; ?>&amp;media=<?php echo $loanpatrikaImage;   ?>&amp;description=<?php echo $loanpatrikaTitle; ?>" 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="loanpatrika-float-social-sharing loanpatrika-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $loanpatrikaURL; ?>&amp;title=<?php echo $loanpatrikaTitle; ?>&amp;mini=true" 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="loanpatrika-float-social-sharing loanpatrika-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $loanpatrikaTitle; echo " "; echo $loanpatrikaURL;?>" 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="loanpatrika-float-social-sharing loanpatrika-social-telegram" href="https://telegram.me/submit?url=<?php echo $loanpatrikaURL;?>&title=<?php echo $loanpatrikaTitle; ?>" target="_blank" rel="nofollow"><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 social share button in GeneratePress theme

Go to Appearance and then click on Elements and create new elements with Hooks, paste code in box.

<?php
$loanpatrikaURL = urlencode(get_the_permalink());
$loanpatrikaTitle = urlencode(get_the_title());
$loanpatrikaImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="loanpatrika-social-wrapper"> <span class="hide-on-mobile">Sharing Is Caring:</span> <a class="loanpatrika-social-sharing loanpatrika-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $loanpatrikaURL; ?>" 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="loanpatrika-social-sharing loanpatrika-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $loanpatrikaTitle; echo " "; echo $loanpatrikaURL;?>" 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="loanpatrika-social-sharing loanpatrika-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $loanpatrikaTitle;?>&amp;url=<?php echo $loanpatrikaURL;?>&amp;via=loanpatrika" 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="loanpatrika-social-sharing loanpatrika-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $loanpatrikaURL; ?>&amp;media=<?php echo $loanpatrikaImage;   ?>&amp;description=<?php echo $loanpatrikaTitle; ?>" 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="loanpatrika-social-sharing loanpatrika-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $loanpatrikaURL; ?>&amp;title=<?php echo $loanpatrikaTitle; ?>&amp;mini=true" 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="loanpatrika-social-sharing loanpatrika-social-reddit" href="https://reddit.com/submit?url=<?php echo $loanpatrikaURL;?>&title=<?php echo $loanpatrikaTitle; ?>" 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>

GeneratePress News Theme CSS Code 2024

/* GeneratePress Site CSS */ .auto-width.gb-query-loop-wrapper {
    flex: 1;
}
@media (min-width: 768px) {
.sticky-container > .gb-inside-container,.sticky-container {
    position: sticky;
    top: 80px;
}
#right-sidebar .inside-right-sidebar {
    height: 100%;
}
}
select#wp-block-categories-1 {
    width: 100%;
} /* End GeneratePress Site CSS */

.inside-header {
  padding: 7px 40px;
}

.gb-container-3388e468 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 20px;
  background-color: var(--contrast);
  color: var(--base-3);
  border-radius: 15px;
}


.gb-container-e1e8bef5 {
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 20px 20px 20px 21px;
  background-color: var(--contrast);
  color: var(--base-3);
  border-radius: 15px;
}



.gb-image-83844dda {
  width: 100%;
  vertical-align: middle;
  border-radius: 15px;
}



.gb-image-65748d05 {
  vertical-align: middle;
  border-radius: 15px;
}



.gb-container-d3a5d53a {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 20px;
  background-color: var(--contrast);
  color: var(--base-3);
  border-radius: 15px;
}



.gb-container-63a7591b {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: center;
  padding: 100px 20px 20px;
  background-color: var(--contrast);
  color: var(--base-3);
  border-radius: 15px;
}



.gb-image-743f9534 {
  object-fit: cover;
  vertical-align: middle;
  border-radius: 15px;
}


.gb-image-ca0acbdc {
  object-fit: cover;
  vertical-align: middle;
  border-radius: 15px;
}

Conclusion

In this article I will teach you that how can you customize your GeneratePress Theme with my personal css code and your entire website will look very professional. Thanks for reaching out to this article, where we discussed how to customize the GeneratePress Theme using the custom CSS.

Also Read:

Hello friends, my name is Neeraj Yadav, I am the Writer and Founder of this blog and share all the information related to Blogging, SEO, Internet, Review, WordPress, Make Money Online, News and Technology through this website.🔁

Read More
Sharing Is Caring:

3 thoughts on “how to customize Generatepress theme with css code free in 2024?”

  3. नीरज भाई अब आपको क्या ही कहूँ। हम मोबाइल से ब्लॉगिंग करते हैं, इतना लंबा चौड़ा code copy करने में काफी दिक्कत होती है, टाइम जाता है। एकं plugin आता है, “Copy Anything to Clipboard” आपसे गुज़ारिश है कि उसको इनस्टॉल करने के बाद, अपने post में उसके अंदर यह कोड डालें ताकि एक क्लिक में ही पूरा कोड कॉपी हो जाये। 😐😏🥺

    Reply

Leave a Comment