In this post, we will talk about a very important topic Custom CSS for WordPress Theme, How to edit CSS in WordPress And Get a Beautiful CSS Code For GeneratePress Theme Customization

How to Add Custom CSS for WordPress Theme | How to edit CSS in WordPress In GeneratePress Theme

Let’s talk about Custom CSS for WordPress Theme, How to edit CSS in WordPress We are going to know all these topics –

GeneratePress is one of the most famous blogging themes in the WordPress space. The reason it is so popular is its simplicity. As you see it, you can start thinking about where and how your content will look and how your users will browse it. Add Custom CSS for Your WordPress theme In GeneratePress Theme

Add Custom CSS to Your WordPress In GeneratePress Theme

Each website has its own requirements, so themes can be combined with popular WordPress plugins and add more functionality. Be it custom post types, custom fields, galleries, or portfolios, GeneratePress can do it. Add Custom CSS for WordPress In GeneratePress Theme

In fact, you can even use it for an e-shop site as it is also compatible with WooCommerce. All this saves you valuable time and money so that you can focus more on the important things. Add Custom CSS for WordPress In GeneratePress Theme

GeneratePress is a lightweight theme that you can get for WordPress sites. However, the free version comes with limited features like footer links and limited theme settings. You will need to purchase the GeneratePress premium plugin to use the full features. Add Custom CSS for WordPress In GeneratePress Theme

If you are familiar with the setup of commercial WordPress themes, you will be surprised that GeneratePress has a different way of working. Custom CSS for WordPress Theme

Customize the GeneratePress theme:-

1. go to the theme Appearance >themes> add a new theme.
2. Search GeneratePress theme>install and activate
3. go to Plugins option>add a new plugin>upload plugin
4. select the downloaded GeneratePress Premium
5. install and activate this.

Where I find GeneratePress Premium?

go to gplji.com and buy GeneratePress Premium at only 199/- for Indians and then download your pc and upload it plugin section.

And Next Step –

1. Click on GeneratePress theme>Modules, and activate all modules
2. then go to customize option> Additional CSS
3. Copy CSS Code from Below and paste it into your Additional CSS
4. Simply publish it.
5. and then go to the Layout >header option> select Use Navigation as Header
6. then go to Layput>Container> Content Layout>one Container.
7. Publish it And Done.

Here are the main features of the GeneratePress Theme-

• Simplicity
• Responsive design
• Fast loading
• Great support
• Awesome documentation
• Compatible with WooCommerce, WPML, BuddyPress, and bbPress
• Compatible with Elementor and Page Builder
• Free child themes
• The theme includes all the default WordPress options plus options to:
• Change the layout of the header, content area, sidebars
• Cache CSS
• Load only the essential Font Awesome icons and not the whole library
• Change the alignment of the navigation and the title
• 9 sidebars with the option to use them per page or post

How To Edit CSS in WordPress Or Add CSS?

GeneratePress does not offer theme options like many other themes. You have to use the Elements function and set up custom hooks to put the code on your site. Follow the steps below to use the Elements feature in the GeneratePress theme.

Navigate to the “Appearance > GeneratePress” section.
You will see all the modules of the theme here.
Click on the “Activate” link against the “Elements” option.
Remember, “Disable Elements” is a different feature for disabling title. You have to
activate the “Elements” option.

Many of us believe that web page speed is very important. Google has also confirmed that mobile web page speed does indeed play a major role in mobile rankings. Google web page speed score is not a concern. Customize GeneratePress Theme With CSS

What’s more important is a good user experience, and because of that, your sites should be lightweight and even better. Customize GeneratePress Theme With CSS

GeneratePress was developed with site speed in mind. One of the most standard installs of the theme is at a little less than 28Kb which is unmatched.

Moreover, GeneratePress is coded and structured as per the latest coding standards, it looks very clean as well as structured.

Now the turn comes that you should be given that special CSS Code so that you can give a better look to your GeneratePress. Customize GeneratePress Theme With CSS

Custom CSS For WordPress In GeneratePress Theme – CSS Code Copy Here

nav {
box-shadow: 0 8px 12px rgb(0 0 0 / 20%);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.post {
box-shadow: 0 8px 12px rgb(0 0 0 / 20%);
border-radius: 20px;
padding:20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.entry-content h2,h3,h4,h5,h6{
font-weight:600;
padding: 10px 10px 10px 25px;
border-radius:25px;
color:white!important;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
/* 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;
}
}
/*Sidebar Universal*/
.widget-title{
padding: 10px 10px;
border-radius:15px;
color:white!important;
text-align:center;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.sidebar .widget {
border-radius:20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
a.read-more.button {
padding: 10px 25px;
border-radius:25px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
img {
border-radius: 12px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

/* End GeneratePress Site Custom CSS */

————————————————-
Color Body :- #04abc5

Color Nav L To R :- #0ea1b8, #04abc5, #0ea1b8

Image Size :- 220*150

---

---

Hope you liked this Custom CSS for WordPress Theme, How to edit CSS in WordPress If you liked this Custom CSS for WordPress Theme, How to edit CSS in WordPress – Must have liked if you liked these  for WordPress If you like –

“Please comment.”

To get all types of technology, blogging tips and tricks, and information related to SEO, please F O L L O W to “veinhost.com” |

• VeinHostWeb Blogging