GeneratePress Theme Customization Using My Custom CSS

4.4/5 - (202 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, 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 theme9 at a very low and affordable price. We recommend using Generatepress Premium, which is a very light and AdSense-friendly theme.

Order GeneratePress Customization For Your Website.

If you are looking for the GeneratePress theme customization for your website, then my team can do it for you at a very affordable cost.

theme9
Cost of design.

Click on the below link to order the same design for @2699 INR.

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.

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 you can upload the previous version of your website if anything happens.

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.
.page-header-image-single .attachment-full{box-shadow:rgba(23,43,99,.3) 0 7px 28px;border-radius:25px; margin-top:-100px;}.comment-respond .comment-reply-title,.widget-title{border-radius:10px;color:#fff!important;box-shadow:rgba(23,43,99,.3) 0 7px 28px;background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 50%,#1fa2ff 100%)}.entry-content h2,h3,h4,h5,h6{font-weight:900;padding:0 10px 10px 25px;background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 50%,#1fa2ff 100%);border-radius:1px;color:#fff!important;box-shadow:rgba(23,43,99,.3) 0 7px 28px}.entry-content h2{font-size:5px!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;font-weight:600;font-size:22px!important}.widget-title{padding:10px;font-weight:500;font-size:18px!important;text-align:center}.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:900;color:#333}.button.light:hover{background:#333;color:#fff}@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){.post-image-aligned-left .post-image img{margin-top:-20px;border-radius:12px;box-shadow:rgba(23,43,99,.2) 0 7px 28px!important}.site-content{display:flex}.inside-right-sidebar{height:100%}.inside-right-sidebar aside:last-child{position:-webkit-stcky;position:sticky;top:100px}}a.read-more.button{background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 51%,#1fa2ff 100%);font-size:10px;padding:0 25px;text-align:center;transition:.5s;background-size:500% auto;color:#fff;box-shadow:rgba(23,43,99,.3) 0 7px 28px;border-radius:12px}a.read-more.button:hover{background-position:right center;color:#fff;display:none;}blockquote{background:#dcdcdc54;border-left:5px solid #1ea4ff;padding:15px;font-style:inherit;font-size:18px;margin:0 0 1.5em}

Video Tutorial GeneratePress Theme Customization And Readymade Design

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

Final Verdict

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

If you like our readymade design, you can order it cheaply from the theme9 store.

Please let me know if you enjoyed this post in the comment section.


One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
Avatar of ANAND

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

139 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
  11. Sir Meri site pe aap ki theme install hai. saari video almost 10 baar dekhi, laiken meri site me side bar waale latest posts show nhi ho rahe. Even mai ne Marketer wagaira b sab use kya. Please help me how to add side bar like recent posts and sidebar advertisements. meri website oceanofapps.net hai. aap ki videos dekh ke sikh raha tha designing.

    Reply
  12. sir, you are great thanx for helping us also I have seen many people who charge for all this kind of work, but you are helping us for free, and seriously I’m very happy after the CSS you gave to us all the best for your future ad just keep helping people

    Reply
  13. Very Nice Bro….., One que HOW CAN I DELETE RIGHT TOP SIDEBAR That is Legacy page (product Highlight) without interferring CSS Code ?

    Reply
  14. everything is working fine, the button on the search widget on the sidebar showing white. here is the link, (cutepetsblog dot com/) if you can guide I will be very thankful to you.

    Also if possible to make one video on how to create a homepage with generate press that would be a big help.

    Reply
  15. sir maine kiya hai but sirf color change hua read more wala ni hua

    pls reply asap

    also, check, please kitchentimes dot net

    Reply
  16. Check my website
    please tell me how to move a recent post layout below and follow the layout above your CSS works properly
    tech-crunchs dot com

    Reply
  17. Sir main ne apk channel Web Insights pe boht c videos watch ki hain ap kafi details se aur boht ziada jaldi samjh m aa jati h apki smjhaai hoi chezain sir apki videos kml hoti hain aisa he content dalty rahye sir kc SEO k bary m backlinks k bary m details se videos laaien please sir Chek my website teleseryeflix(dot)su/

    Reply
  18. hello sir,
    my self jeet from India and I am a student so I cannot able to buy a domain, sir, I request to give me one .com domain for starting my website online
    thank you

    Reply
  19. sir apne blog page ko kaise design karen jis tarah bloggerspassion.com me anil sir ne design kiya, please sir hame bhi bataye.
    iss topic par video banaye.

    Reply
  20. Sir pls, check my website 247moneyideas(dot)com
    I saw your video and make this.. but not properly. Pls visit and tell me.

    Reply
  21. You can check my site successpeoplestory(dot)com. Please sir 1 help me my home page post not showing the Read More button.

    Sir mene sab kuch try kar liya hai dekh ke aapke videos bhi dekhe hai lekin mujhe iska koi salustion nahi mil raha hai ki kaise thik karu ise sir aap ek baar jarur dekhe please sir

    Reply
  22. Anand bro I think you haven’t made a tutorial on social sharing buttons in WordPress just like sharing buttons on your website (webinsights.in).

    Reply
  23. Sir, Thanks for the codes, GeneratePress codes helped me to gain some initial boost to customize and do major changes. I feel happy if you visit my site “LetsExploreTech (dot) com” in your free time to improve my website error.

    Reply
  24. Anand sir maine aapki services me se Gp Premium lifetime ke liye purchase kiya tha, lekin kisi reasons ki wajah se I lost update key, In this situation what can I do and kya aap update key provide karwa skte hai, please help me.

    Reply
  25. Very helpful video sir
    Bahut accha css code hai apka
    Dil se thank you
    Aur ek swal hai
    apke jaisa Categories kaise add krenge?

    Reply
  26. Brother, I’m a big fan of your honest work and the value you provide through your videos. I tried this CSS TOO.. and faced some problems like the H2 content padding was less than H3 and H4. However, I managed to fix that but the read more button is creating an issue as it is vibrating on hover. this is my website link https://shiproarticles.com/. Anand bhai if you have time kindly look into it.

    Reply
    • and anand please ek bar dekhiyega.. kyuki sab kuch perfect hai bas ek read more button ka issue hai jo pure site ko hamper kr rha hai… so, please ek bar dekhiyega.

      Reply
  27. Sir, you used marketer, but i am using defult one,
    I have to swicth to marketer to use your CSS code, Can I change it now?
    I already have some posts, will is affect or something?

    Reply

Leave a Comment