GeneratePress Theme Customization Using CSS

Learn GeneratePress Theme Customization Using CSS code.You can edit each element of your page as you want.

Hello Friends, I hope that you are well. If you are seraching that how to customize GeneratePress theme using css code then you are at the right place .Here you will learn GeneratePress theme customization using css with step wise.

GeneratePllress theme is a best SEO friendly theme for a blogger, who wants to earn money through blogging . If you are going to start your journey in blogging then you have to give more priorities to themes also, as domain and hosting. Beacause theme is first thing which attract your user.

Don’t worry. Now you can order premium themes from techforguide at a very low and affordable price. We recommend using Generatepress Premium theme, which is a very light and AdSense-friendly theme. In GeneratePress Premium Theme you can customize your every page as you want.

Table of Contents :

How to Implement GeneartePress Custom CSS in Your Website
GeneratePress theme customization using css with step wise
Final Word

How to Implement GeneartePress Custom CSS in Your Website

GeneratePress Theme is very light ,fast speed loading and SEO friendly theme. But in free version GeneratePress theme have limited features like footer link and limited theme setting.

If you want to use all the features of GeneratePress Theme then you have to purchase premium version of GeneratePress plugin.

We have design a custom design for your website with help of css to customize your generatePress theme. when you will use this code you can see diffrence in your website design and theme.

This is totally free for you .You can copy the custom css code from our website and paste it into your WordPress.

Note – Before applying this css code please take a backup of your website so that if you will find any error or anything happens , you can upload your previous version of your website and You will be safe to use last version of your website.

GeneratePress Theme Customization Using CSS With Step Wise

4 steps to customize generatepress theme using css code

Login to your WordPress dashboard,
Click on Apperance then click on Customize
and go into Additional CSS ,and paste the given CSS code.
Now you can refresh the page and see the changes.

GeneratePress Custom CSS Code :

.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}

Final word

Thanks for spending your time.

Here we have learned how to customize GeneratePress Theme using CSS code ( the custom CSS Code) .I hope that you will like this content and you have gotten some useful learnings.

FAQ :

Customization WordPress Theme
Customization WordPress Menu
GeneratePress Premium Theme