GeneratePress Theme Customization Using My Custom CSS

Table of Contents

1. How to Implement GeneratePress Custom CSS on Your Website
2. Steps to GeneratePress Theme Customization
3. Customization Color Code change
4. Customization Header Primary Background Color Code
5. Final Verdict

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, the first investment they make is a domain and hosting. He ignored a theme that is equally important as hosting.

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 Technical Tricks 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 very standard, but we can modify this from the section Additional CSS.

We have made a premium design for your website using Custom CSS to customize 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 to GeneratePress Theme Customization

1. Login to your WordPress dashboard.
2. Go to Appearance and click on Customization.
3. Under Customization, scroll down, click on Additional CSS, and paste the given CSS code.
4. Finally, click on Publish.
5. Clear your cache and refresh.

/*GeneratePress Customization technicaltricks*/
.page-header-image-single .attachment-full{
box-shadow: rgba(23,43,99,.3) 0 7px 28px;border-radius:25px;}.entry-content h2,h3,h4,h5,h6{ font-weight:600; padding: 10px 10px 10px 25px;background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);
border-radius:10px; color:white!important;box-shadow: rgba(23,43,99,.3) 0 7px 28px;}
.entry-content h2{font-size:25px!important;}
.entry-content h3{font-size:21px!important;}
.entry-content h4{font-size:17px!important;}
.entry-content h5{font-size:15px!important;}
.entry-content h6{font-size:13px!important;}
.comment-respond .comment-reply-title{padding: 10px 10px 10px 25px; background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%); border-radius:10px; font-weight:600; color:white!important;
font-size:22px!important;box-shadow: rgba(23,43,99,.3) 0 7px 28px;} 
.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,.3) 0 7px 20px!important}
.wp-block-search__input{border:none!important;border-bottom:1px solid #cdd6d1!important;background:0 !important;font-size:15px;padding:5px 2px!important}input:focus-visible{outline:-webkit-focus-ring-color auto 0}
.wp-block-search__button{background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)!important}
.widget-area .widget {padding: 28px 35px 28px 35px;}.sidebar .widget:first-child {box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0;border-radius: 10px;}.widget-title{ padding: 10px 10px;
background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);
border-radius:10px;font-weight:500;color:white!important;font-size:18px!important; text-align:center;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;}.sidebar .widget { box-shadow: rgba(23,43,99,.3) 0 6px 18px; border-radius: 10px;}
a.read-more.button {background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)}
a.read-more.button { font-size:14px; padding: 10px 25px; text-align: center; transition: 0.5s; background-size: 200% auto; color: white;
box-shadow: rgba(23,43,99,.3) 0 7px 28px; border-radius: 120px; } a.read-more.button:hover { background-position: right center; }
@media (min-width: 769px) { .post-image-aligned-left .post-image img { margin-top: -20px; border-radius: 12px; box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;}
@media (max-width: 768px) {.post-image-aligned-left .post-image img {
margin-top: -20px; border-radius: 12px; box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;}
@media (min-width: 769px) {.site-content {display: flex;}
.inside-right-sidebar {height: 100%; }.inside-right-sidebar aside:last-child {position: -webkit-sticky;position: sticky;top: 10px;}
/*End of GeneratePress Customization technicaltricks*/

Customization Color Code change

background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)

Customization Header Primary Background Color Code

rgba(224, 224, 224, 0.42)

Watch the below video, where I have shared the features and how to order the design from the technicaltricks.info .

Final Verdict

Thanks for reaching out to this article where we discussed how to customize the GeneratePress Theme. If you like our readymade design, you can order it at a very cheap cost from the technicaltricks.info.

If you enjoyed this post, please let me know in the comment section.