GeneratePress Theme Customization Using My Custom CSS

4.6/5 - (34 votes)

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, 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 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 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 GeneratePress Custom CSS for GeneratePress Theme Customization.

GeneratePress Theme Customization
Preview Of GeneratePress Theme Customization

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.

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

75 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
  2. anand bhai generatepress theme ko magazine ya newspaper theme jaisa look de sakte hai kya? agarr de sakte hai toh please iske upar ek video banana.

    Reply
  3. Maine bana liya but…. Ye 1.Trending video ke niche jo watch now ka button.
    2.recent posts me jo button hain..Oh mere yaha nahi aah raha ..Jo ki maine CSS ko apply kiya

    Reply
  4. bro, achanak se pura Gp ka theme change ho gya shayad aapki CSS me koi problem aa gai, uski vajha se mobile unstability ka issue bhi aa gya abhi kya kru.

    koi aur theme use kar rha to sab theek ho jata lekin jaise he gp install karta sab gadbad

    Reply
  5. Hello Anand,

    Muje mere website ko customize krna according to my niche kya ap kar skte hai and maine apke service se order krne ka try kiya tha but waha par koi error aa rha hai “method not found” krke and maine contact bhi kiya hai apko.

    Reply
  6. Sir please make a tutorial on generatepress, How to centre content layout with no side bar. I mean post, page, search result page or every page layout centre without sidebar panel.

    Reply
  7. What is the gradient color code of webinsights’s blog’s read more button,leave a comment box,categories?
    Please, give the gradient color code of your blog’s read more button.
    Please, sir give the background gradient color.

    Reply
  8. Sir meri websites ke jo sidebar me letest post wala hota and archive and category inka tittle blue colour ka nhi show kar rha hai aur thumbnail bhi nhi show ho rha hai letest post me sir solve this problem

    Reply
  9. Hii Anand Bhai Aapne bohot supperb work kiya hai..ye css deke…maine aapke.css me kuchh changes krke site design ki hai, lekin usme heading tags (h1, h2, h3, h4, h5, h6) me css add krna bhul gya tha…ab jb mai upwr wale code se css copy krke dal raha hu…to.mera navigation wala gradient bhi ja raha hai…css kaise add kru plz batao bhai… Meri site hai https//www.IndianIdolMarathi.com

    Please reply dena…ya mail krna

    Reply
  10. Hello Anand,
    Thanks for the article. I have followed you tube video to do the customizations. Looks after this the pagespeed score has been dropped, specially for mobile. Earlier was better. I am also using WPRocket from long time along with generatepress.
    Can you please help me. My blog is http://www.cspsprotocol.com
    Thanks

    Reply

Leave a Comment