GeneratePress Theme Customization Using CSS

So this article is all about GeneratePress Theme Customization and the best website structure, Google Adsense friendly and SEO friendly. To get Adsense approval quickly, website structure, design, and theme matter a lot. When a beginner starts their blogging journey, their first investment is domain and hosting.

He always ignores a theme that is equally important as hosting and domain. Then why do beginners not invest in premium themes? I think it’s because of its high price.

Don’t worry. Now you can order premium themes from bloggingskill at a very low and affordable price. We recommend using Generatepress Premium, which is a very light and AdSense-friendly theme.

How to Implement GeneratePress Custom CSS on Your Website

GeneratePress Premium is a very light and Adsense-friendly theme, but this theme does not provide an excellent design for your website. The official design is standard, but we can modify this from the Additional CSS section.

We have made a premium design for your website using Custom CSS to customize the GeneratePress Theme to a better look and feel with SEO and speed optimization.

This is entirely free. You can copy the custom code from here and paste it into your WordPress. We take care of every minor error. This design is very light and does not affect your website speed.

But you should take a backup of your website before applying any customization so that if anything happens, you can simply upload the previous version of your website.

Steps wise Guide GeneratePress Theme Customization

• 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.

Old CSS Code

/* Read More Button*/

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, #26bc00 0%, #35343a 51%, #26bc00 100%);
}

/* End Read More Button*/


.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;
	
}
}
.gb-image-38a00f10 {
  width: 100%;
}
img {
  height: auto;
  max-width: 100%;
}
*, ::after, ::before {
  box-sizing: inherit;
}


.wp-block-search__button {
    border-radius: 20px;
    font-size: 13px !important;
    padding: 8px 20px !important;
    text-align: center;
    color: #fff !important;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px !important;
}

.wp-block-search__button {
    background: linear-gradient(to right, #26bc00 0%, #35343a 51%, #26bc00 100%);
}
.wp-element-button {
    cursor: pointer;
}
.wp-block-search__button {
    margin-left: 0.625em;
    word-break: normal;
}


/* 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*/



.page-header-image-single .attachment-full {
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border-radius: 25px;
}




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

New Working CSS Code

/* read more button start */
a.gb-button {
    background-image: linear-gradient(to right, #1CB0FE 0, #12D7FA 51%, #1CB0FE 100%) !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;
}

/* read more button end */


/* archive featured image start */

.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;
}

/* archive featured image end */

/* post featured image start */

.page-header-image-single .attachment-full {
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border-radius: 25px;
}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
    max-width: 100%;
    height: auto;
}

/* post featured image end */


/* saerch button start */

.wp-block-search__button {
    border-radius: 20px;
    font-size: 13px !important;
    padding: 8px 20px !important;
    text-align: center;
    color: #fff !important;
    box-shadow: rgb(23 43 99 / 30%) 0 4px 28px !important;
	background-color: #1CB0FE;
}

/* saerch button end */

/* sidebar widget title start */


.widget-title {
    padding: 10px 10px;
    background-image: linear-gradient(to right, #1CB0FE 0, #12D7FA 51%, #1CB0FE 100%) !important;
    border-radius: 10px;
    font-weight: 500;
    color: #fff !important;
    font-size: 18px !important;
    text-align: center;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
#rpwwt-recent-posts-widget-with-thumbnails-1 img {
    width: 50px;
    height: 50px;
}
.rpwwt-widget ul li img {
    display: inline;
    float: left;
    margin: 0.2em 0.75em 0.75em 0;
}
.rpwwt-widget img {
    border-radius: 4px;
}


.widget-area .widget {
    padding: 30px;
}

Final Word

Thanks for reaching out to this article, where we discussed how to customize the GeneratePress Theme using the custom CSS.