Custom Css For Generate Press

Generate Press

Most famous and affordable theme for WordPress which comes with lots of features. You can also use it free but some features are missing for it. With premium you can customize almost everything as per your choice but may be it’s time taking for you

You can use their site library to import demos and designs as required . It will reduce your time taking and also you can go for support regarding the theme

Features

There are lots of feature of Generate Press theme

• Fastest theme for WordPress
• Can work with low end hosting
• Fully Customizable
• You can use it for free
• Use Gp Blocks which is best theme designer

Theme Installation

Download Genetrate Press Theme For Free From Theme Section

• Log in to website dashboard
• Go to appearance > theme
• Add theme
• Now search Generate Press
• Then install and acivate it

Custom Css Activation

• Log in to website dashboard
• Go to appearance > customize
• Scroll Down
• Click on add custom css
• Paste the script given below

It’s just a demo , Download full script

/* Header Styling */
.site-header {
    background-color: #333; /* Change header background color */
    padding: 20px; /* Add padding to the header */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the header */
}

.site-title a,
.site-description {
    color: #fff; /* Change header text color */
    font-size: 24px; /* Adjust header text size */
    text-transform: uppercase; /* Uppercase header text */
}

/* Navigation Menu Styling */
.main-navigation {
    background-color: #333; /* Change navigation background color */
    border-top: 3px solid #007bff; /* Add a border above the navigation */
}

.main-navigation ul li a {
    color: #fff; /* Change menu link text color */
    font-weight: bold; /* Bold menu link text */
    text-transform: uppercase; /* Uppercase menu link text */
}

/* Body Content Styling */
body {
    font-family: Arial, sans-serif; /* Change the font family */
    line-height: 1.6; /* Adjust line height for readability */
    background-color: #f5f5f5; /* Change body background color */
    color: #333; /* Change body text color */
}

/* Content Container Styling */
.container {
    max-width: 1100px; /* Adjust maximum content width */
    margin: 0 auto; /* Center content container */
    padding: 20px; /* Add padding to content container */
    background-color: #fff; /* Change content container background color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to content container */
}

/* Heading Styling */
h1, h2, h3, h4, h5, h6 {
    color: #333; /* Change heading text color */
    font-weight: bold; /* Bold headings */
}

/* Link Styling */
a {
    color: #007bff; /* Change link color */
    text-decoration: none; /* Remove underlines from links */
    transition: color 0.3s; /* Add a smooth color transition to links */
}

a:hover {
    color: #0056b3; /* Change link color on hover */
}

/* Button Styling */
.button {
    background-color: #007bff; /* Change button background color */
    color: #fff; /* Change button text color */
    padding: 10px 20px; /* Adjust button padding */
    border: none; /* Remove button border */
    border-radius: 3px; /* Add button border radius */
    text-transform: uppercase; /* Uppercase button text */
    font-weight: bold; /* Bold button text */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.button:hover {
    background-color: #0056b3; /* Change button background color on hover */
}

/* Footer Styling */
.site-footer {
    background-color: #333; /* Change footer background color */
    padding: 20px 0; /* Adjust footer padding */
    color: #fff; /* Change footer text color */
    text-align: center; /* Center align footer text */
}

/* Widget Styling */
.widget {
    background-color: #fff; /* Change widget background color */
    padding: 20px; /* Add padding to widgets */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to widgets */
}

/* Customize Additional Elements as Needed */

Another Customization Example

You can adjust padding and margin according to theme

Padding: Margin:

Updated Css

In this updated CSS, I’ve made the following changes:

• Reduced the header padding to make it more compact.
• Adjusted the header text size and styles for better readability.
• Added spacing between the header and the menu.
• Slightly reduced the maximum content width for content containers.
• Refined button styles with smoother transitions.
• Adjusted the background color for the footer and widgets.

Downloads

Decrypt Code

Copy first the decrypt code

Download

Conclusion

In this article we are sharing custom css for generate press theme for wordpress . In this article we share both demo and full css , you can try both of them and can adjust the css for your required theme