|

Customize GeneratePress Theme With My Custom CSS | Best CSS Code For WordPress

In the article, How To Add Custom CSS for WordPress, Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress has been given to you. Due to this the look of your website will be changed very well, I hope you will definitely like this Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress

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 to think about where and how your content will look and how your users will browse it. Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress

how to Customize GeneratePress Theme With CSS
Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress

Customize GeneratePress Theme With My Custom CSS

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. Customize GeneratePress Theme With Best CSS

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

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 need to purchase the GeneratePress premium plugin to use full features. Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress

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

Here are some tips by which you can customize GeneratePress theme-

  1. Change published date to last updated date
  2. Add Google Analytics without a plugin
  3. Insert Yoast breadcrumb
  4. Insert author bio box without plugin
  5. Insert advertisements without a plugin
  6. Add leave a reply above the comment section
  7. Remove links from the author and post dates
  8. Using Elements in GeneratePress

Main features of the GeneratePress Theme

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

How To Activate GeneratePress Theme Modules And Elements

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 titles. 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 My Custom CSS, Best CSS Code For WordPress

how to Customize GeneratePress Theme With CSS
Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress

 

Customize GeneratePress Theme – CSS Code Copy Here

.page-header-image-single .attachment-full, nav {
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;
border-radius:25px;
}
img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;
}
.sidebar .widget
{
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}
/* Featured widget */
.sidebar .widget:first-child {
background-color: background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
color: #fff;
border-radius:25px;
}
img {
margin-top: -20px;
border-radius: 25px;
box-shadow: rgba(0,117,226,0.86) 5px 5px, rgba(0,117,226,0.5) 10px 10px, rgba(0,117,226,0.4) 15px 15px, rgba(0,117,226,0.2) 15px 15px!important;
}

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #fff;
}

.sidebar .widget li {
margin-bottom: 15px;
}

.button.light {
background: #fff;
color: #000;
}

.button.light:hover {
background: #fafafa;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.page-header h1 {
font-size: 30px;
}

@media (max-width: 768px) {
.post-image img {
max-width: 100%;
}
}
.wpsp-related-posts1 {
background-color: #fff;
padding: 24px 20px 10px 20px;
margin-top: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.page-numbers{padding:5px 10px;background-color:#187cd6;border-radius:15px;color:#fff!important;border:5px solid #187cd6;margin-right:.30em;box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;!important}
.page-numbers:hover,
.page-numbers.current{background-color:#fff;color:#187cd6!important}#top-bar-notify{text-align:center!important;top:0;z-index:99;border-bottom:2px dashed #eaf1f8;background-image:linear-gradient(135deg,#006ff5 0%,#a400c7 105%)!important;color:#fff;font-size:18px}

blockquote {
border-left: 5px solid rgba(10, 0, 0, 0.05);
padding: 20px;
font-size: 1.2em;
font-style:italic;
margin: 0 0 1.5em;
position: relative;
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
@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;
}
/* max-width: 300px; */margin-top: -20px;
border-radius: 10px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
}
}

@media( max-width: 769px ) {
.inside-article .post-image a img {
margin: -1.1em 1em 0 0 !important;
border-radius: 10px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
}
}
h3,h4 {
border-left: 8px solid blue;
border-right: 8px solid blue;
border-radius: 25px;
background-color: whitesmoke;
padding:15px;
font-family: #fff;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;!important;
}
.mobile-header-navigation .mobile-header-logo img {
width:160px;
}

/* End GeneratePress Site CSS */

GeneratePress CSS Code to download by clicking on the Download button

GeneratePress CSS CodeGeneratePress Theme Customization

Buy GeneratePress Premium in Just 199/- only @ Our Website’s Store


Hope you liked this Customize GeneratePress Theme With My Custom CSS, Best CSS Code For WordPress you liked this How To Add Custom CSS for WordPress, Customize GeneratePress Theme With My Custom CSS, Best CSS Code For 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 “tips.sursaritatechknow.com” |

Please S U B S C R I B E to my y o u t u b e channel “Blogging Scholar-Youtube” – To You tube  | P L E A S E  C O M M E N T and please share || Thanks ||

  • Web Blogging
Share on:

Leave a Comment