Generate Press Customization Top 5 CSS Codes

Introduction to GeneratePress Theme CSS Customization:

GeneratePress is a popular WordPress theme known for its flexibility and customization options. While the theme offers a wide range of built-in features to customize your site’s appearance, sometimes you may want to fine-tune the design even further. This is where custom CSS (Cascading Style Sheets) comes into play.

What is Custom CSS in GeneratePress?

Custom CSS allows you to add your own style rules to override or extend the default styling of elements on your website. With custom CSS, you can modify colours, fonts, spacing, backgrounds, and more, giving you full control over the visual presentation of your site.

How to Add Custom CSS to GeneratePress:

1. Access the Customizer: Log in to your WordPress admin dashboard and navigate to “Appearance” > “Customize.”.

2. Open Additional CSS: Within the WordPress Customizer, look for the “Additional CSS” option. Click on it to open the custom CSS editor.

3. Add Your CSS Code: In the custom CSS editor, you can paste your CSS code snippets. Each snippet should target specific elements on your website that you want to style.

4. Preview and Publish: As you add the CSS code, you’ll see the changes reflected in the live preview of your website. Once you’re satisfied with the changes, click “Publish” to save your custom CSS.

Common customizations with GeneratePress CSS:

1. Typography: Customize the font family, size, weight, and style of headings, paragraphs, links, and other text elements.
2. Colors: Modify the color scheme of your website, including background colors, text colors, link colors, and more.
3. Layout: Adjust the spacing, margins, and padding of different sections and elements to achieve the desired layout and alignment.
4. Header and Footer: Customize the appearance of the header and footer sections, such as changing background colors, adding borders, or adjusting heights.
5. Navigation Menu: Style the navigation menu to match your branding, including changing font styles, adding hover effects, and adjusting spacing.
6. Buttons: Customize the design of buttons by changing colors, borders, hover effects, and typography.

Best Practices for GeneratePress CSS Customization:

1. Use Specific Selectors: Target elements precisely to avoid unintended styling conflicts.
2. Stay Organized: Keep your CSS code organized and well-commented for easier maintenance and troubleshooting.
3. Test Responsiveness: Ensure that your custom styles look good on different devices and screen sizes.
4. Refer to Documentation: Take advantage of GeneratePress documentation and community forums for guidance and inspiration.
5. Experiment and Learn: Don’t be afraid to experiment with different CSS properties and values to achieve the desired look. Learning CSS is an ongoing process, and every customization is an opportunity to improve your skills

CSS Code No. 1: Green and Red

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

May Like You: Download GeneratePress v2.4.0 WordPress Theme for Free

CSS Code No. 2: Green and Gray Color

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

CSS Code No. 3: Pink and Green Lime Color

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

CSS Code No. 4: Red and Gray Color

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

By mastering custom CSS customization in GeneratePress, you can unleash your creativity and create a truly unique and visually stunning website tailored to your preferences.

Read Also:

• Baakas Online Shopping App Nepal
• Best Practices for Designing UI Cards Designers in 2024
• Most Important NTC Services Codes in Nepal 2024
• How To Check Own Number in Ncell and NTC
• How to Open NMB Bank Online Account: Step by Step