GeneratePress Theme Customization Using My Custom CSS

Do You know what Steve Jobs says about design? 

“Design is not just how it’s looks like and feel like, Design is how it works”.

Steve Jobs

So this article is all about GeneratePress Theme Customization and the best website structure that is 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 very first investment he makes is 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 our services page at a very low and affordable price.

We recommend using Generatepress Premium that is a very light and AdSense-friendly theme.

How To implement GeneratePress Custom CSS In Your Website

GeneratePress Premium is a very light and Adsense-friendly theme, but this theme does not provide a great design for your website.

The official design is very normal, but we can modify this from the section Additional CSS. We have made a premium design for your website using GeneratePress Custom CSS for GeneratePress Theme Customization.

GeneratePress Theme Customization
Preview Of GeneratePress Theme Customization

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

Also, Read – Remove more Keyword from Post URL In GeneratePress premium

By Web Insights

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 code.
  4. Finally, click on Publish.
  5. Clear your cache and refresh.
/*GeneratePress Customization by web insights*/

.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, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 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, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%);
border-radius:10px;
font-weight:600;
color:white!important;
font-size:22px!important;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
}

/*End of Article Page Design*/

/*Sidebar Universal*/
.recent-posts-widget-with-thumbnails .widget-title{
padding: 10px 10px;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 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: 5px;
}

.sidebar .widget:first-child {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%)}

.button.light {
background-color: #fff;
border-radius: 50px;
font-weight: 700;
color:#333;
}

.button.light:hover {
background: #333;
color: #fff;
}

/*End of sidebar code*/

/*End of sidebar code*/

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

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

/* Read More button Style */

a.read-more.button {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 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; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}

/* Read More button Style */

blockquote {
background: #dcdcdc54;
border-left: 5px solid #1EA4FF;
padding: 15px;
font-style: inherit;
font-size: 18px;
margin: 0 0 1.5em;
}

If you are still facing any issues, you should watch this video until the end. I have given a complete tutorial about GeneratePress Theme Customization for Free using custom CSS.

Sharing Is Caring:

A professional blogger, Since 2016, I have worked on 100+ different blogs. Now, I am a Team Leader at Web Insights...

14 thoughts on “GeneratePress Theme Customization Using My Custom CSS”

  1. archieve page not look like feature image -exceprt like your website. it coming above feature image and below text. how to correct it?

    Reply

Leave a Comment