GeneratePress Theme Customization Using CSS Magic

Welcome to the world of GeneratePress Theme Customization – your gateway to a website structure that not only befriends Google Adsense but also romances SEO. When embarking on your blogging odyssey, your first financial commitment is securing your domain and hosting.

Unlocking the Potential of GeneratePress Theme with CSS Magic

Yet, it’s surprising how often the theme, a crucial pillar alongside hosting and domain, is neglected. Perhaps it’s the hefty price tag that keeps beginners at bay.

But fret not! The realm of premium themes is now within your reach, thanks to bloggingskill. You can now lay your hands on premium themes at pocket-friendly prices. Our top recommendation? GeneratePress Premium, a featherweight theme that harmonizes beautifully with AdSense.

Let’s Dive into the Art of Elevating GeneratePress with Custom CSS

GeneratePress Premium, while being incredibly light and AdSense-friendly, may not quite meet your design aspirations out of the box. Its default design is utilitarian, but fear not, for we have the solution – harnessing the power of Additional CSS.

We’ve curated a premium design for your website, infused with SEO prowess and speed optimization, all at no cost to you. Simply copy the custom code provided here and paste it into your WordPress console. We’ve meticulously ironed out any kinks, ensuring that this design remains nimble and doesn’t weigh down your website’s speed.

Of course, a word to the wise – always back up your website before applying customizations. This way, should anything untoward occur, you can effortlessly revert to the previous version of your site.

Crafting Your Path to GeneratePress Theme Customization

1. Begin your journey by logging into your WordPress dashboard.
2. Navigate to the ‘Appearance’ section and click on ‘Customization.’
3. Within the ‘Customization’ menu, scroll down until you spot ‘Additional CSS,’ and then, like a true maestro, paste the provided CSS code.
4. Seal the deal by clicking ‘Publish.’
5. Clear your cache and refresh your website.

Embark on your customization adventure, transforming GeneratePress into a bespoke masterpiece that captures your unique style and vision.

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

Final Word

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