All CSS Code for GeneratePress Theme Customization 2025

GeneratePress is a lightweight and highly customizable WordPress theme that allows users to modify the design using CSS code. With CSS, you can easily adjust spacing, colors, buttons, and more to create a unique, polished website.

In this guide, we provide all the necessary CSS codes for customizing the GeneratePress theme. We’ll explain each code section, its purpose, and how you can add it to your site.

1. Blockquote Customization

Blockquotes are used to highlight important text, quotes, or references in a visually distinct way. You can customize blockquotes using CSS to change their appearance, such as adding borders, background colors, font styles, and padding.

CSS Code:

blockquote {
    font-size: 17px;
    font-style: italic;
    color: #333;
    border-left: 4px solid #ccc; 
    padding-left: 15px;
}

Purpose

• This code customizes the <blockquote> element to make it cleaner and more visually appealing.
• Adjust the font size, remove italics, and add a subtle left border for emphasis.

2. Spacing for Images and Videos

Proper spacing around images and videos improves readability and layout design. You can use CSS margin, padding, and flexbox/grid techniques to control spacing effectively.

CSS Code

/* Add spacing below images without captions */
.wp-block-image:not(:has(figcaption)) img {
    margin-bottom: 15px; /* Adds spacing below images without captions */
}

.post-content:not(:has(figcaption)) img {
    margin-bottom: 15px; /* Alternative selector for post images without captions */
}

/* Add spacing below embedded videos without captions */
.wp-block-embed:not(:has(figcaption)) {
    margin-bottom: 15px; /* Adds spacing below embedded videos without captions */
}

.wp-block-video:not(:has(figcaption)) {
    margin-bottom: 25px; /* Adds spacing below self-hosted videos without captions */
}

/* Additional compatibility for iframe-based embeds */
.wp-block-embed iframe,
.wp-block-video video {
    margin-bottom: 25px; /* Ensure margin is applied directly to iframe/video */
}

/* Embedded videos in post content */
.post-content iframe,
.post-content video {
    margin-bottom: 20px; /* Add spacing for videos in post content */
}

Purpose

• Ensures proper spacing below images and embedded videos.
• It improves the layout by avoiding crowded elements.

3. GeneratePress Site Structure Customization

GeneratePress is a lightweight WordPress theme that allows deep customization of site structure using CSS, hooks, and the customizer.

CSS Code

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area, .gb-query-loop-item:not(.sidebar .gb-query-loop-item),.container-widget {
	border-right: 1px solid rgba(0, 0, 0, 0.07);
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	box-shadow: 0 0 5px rgba(232, 234, 237, 0.5);
}
 /* End GeneratePress Site CSS */

Purpose

• Adds subtle borders and shadow effects to widgets, article boxes, and comments area.
• Enhances readability and gives a professional look.

4. Customizing Button

Custom buttons improve user experience and match your website’s design. You can style buttons using CSS to change their shape, color, hover effects, and animations.

CSS Code

/* Customize button */
button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"], 
a.button, 
.wp-block-button__link {
    border-radius: 100px; /* Adjust the value to your preference */
}

/* Read More button */
.more-link {
    border-radius: 15px; /* Adjust the value to your preference */
}

Purpose

• Adds rounded corners to buttons and “Read More” links, making them modern and attractive.

5. Post Image Styling

Customizing post images enhances the visual appeal of your website. You can use CSS to adjust size, borders, shadows, and hover effects.

CSS Code

@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;
    }
}

Purpose

• Adds a shadow, border-radius, and slight negative margin to images for a smooth layout.

6. Social Media Follow Section: Follow Us

A well-designed Follow Us section helps increase social media engagement. You can customize it using HTML & CSS for better styling and user experience.

HTML Code

<div class="social-media-follow">
    <a href="https://www.facebook.com/profile.php?id=61564576547752" target="_blank" title="Follow us on Facebook">
        <img src="https://cdn-icons-png.flaticon.com/128/733/733547.png" alt="Facebook Icon" />
    </a>
    <a href="https://www.instagram.com/earnbitwin/" target="_blank" title="Follow us on Instagram">
        <img src="https://cdn-icons-png.flaticon.com/128/2111/2111463.png" alt="Instagram Icon" />
    </a>
    <a href="https://x.com/EarnBitWin" target="_blank" title="Follow us on Twitter">
        <img src="https://cdn-icons-png.flaticon.com/128/5968/5968830.png" alt="Twitter Icon" />
    </a>
<a href="https://t.me/earnbitwin" target="_blank" title="Join our Telegram Group">
        <img src="https://cdn-icons-png.flaticon.com/128/2504/2504941.png" alt="Telegram Icon" />
    </a>
</div>

CSS Code

.social-media-follow {
    text-align: center;
    margin: 20px 0;
}

.social-media-follow a {
    margin: 0 10px; 
}

.social-media-follow img {
    width: 30px;
    height: auto;
    transition: transform 0.3s;
}

.social-media-follow img:hover {
    transform: scale(1.1);
}

Purpose

• Creates a neat social media section with hover effects for icons.

7. Author Box Customization (Updated)

An author box helps display the writer’s bio, photo, and social links, adding credibility to blog posts. You can customize it with HTML & CSS for a clean, professional look.

HTML and CSS codes are combined:

<div class="author-box">
  <img src="https://earnbitwin.com/wp-content/uploads/2024/08/dipak-pp.png" alt="Author Image" class="author-image">
  <div class="author-info">
    <h4 class="author-name">Dipak Badaila</h4>
    <p class="author-bio">Hi, I'm Dipak, the admin and content creator of Earn Bit Win. I love sharing tips on blogging, social media, earning money, crypto, and the stock market to help you grow and succeed.</p>
    <a href="https://earnbitwin.com/about-us/" class="author-link">Learn More</a>
  </div>
</div>

<style>
.author-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  margin-top: 15px;
}

.author-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #3CD3AD;
}

.author-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.author-name {
  font-weight: bold;
  margin-bottom: 8px;
}

.author-bio {
  font-size: 16px;
  text-align: left;
  margin-bottom: 10px;
  max-width: 100%;
}

.author-link {
  color: #3CD3AD;
  text-decoration: none;
}

@media (min-width: 768px) {
  .author-box {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .author-image {
    margin-bottom: 0;
    margin-right: 10px;
  }

  .author-info {
    align-items: flex-start;
  }
}
</style>

Note: In the description code, replace “This above my Image Link” with the URL of your photo, and replace “Above bio is mine, but you write your own bio” with your bio. and replace the link to your About Us page.

Important Note

While setting up the author box, be sure to customize the code given in the description. Don’t forget to update your author name, photo link, bio description and About Us link properly in the code, so that the author box matches the style of your website and gives a personal touch.

Purpose

• Creates a clean and responsive author box with image, name, and bio.
• Adjusts alignment for mobile and desktop views.

8. Sidebar Widget Title Styling

Customizing sidebar widget titles enhances the look of your website’s sidebar, making it more visually appealing and readable.

Code

/* Style the headings in sidebar widgets */
.sidebar .widget .widget-title {
    font-size: 21px !important;  
    font-weight: 600 !important; 
    padding: 5px 10px;            
    background-color: #04A17A;     
    border-radius: 15px;         
    color: #fff !important;       
    text-align: center;       
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border: 2px solid #fff;   
    margin: 10;              
}

Purpose

• Styles widget titles in the sidebar with a bold background, rounded corners, and shadows.

9. Pagination Styling

Pagination helps users navigate through multiple pages easily. You can customize pagination using CSS to improve its look and usability.

Code

/* Style pagination links */
.nav-links .page-numbers, 
.nav-links .next.page-numbers, 
.nav-links .prev.page-numbers {
    background-color: #04A17A;    
    color: #fff !important;     
    border-radius: 100px;          
    padding: 10px 15px;         
    border: 2px solid #fff;      
    margin: 5px;              
    text-decoration: none;       
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    text-align: center;      
}

/* Add hover effect for pagination links */
.nav-links .page-numbers:hover, 
.nav-links .next.page-numbers:hover, 
.nav-links .prev.page-numbers:hover {
    background-color: #1e9e00;    
    color: #fff !important;    
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .nav-links {
        display: flex;               
        flex-wrap: wrap;           
        justify-content: center;    
        gap: 5px;              
    }
    
    .nav-links .page-numbers, 
    .nav-links .next.page-numbers, 
    .nav-links .prev.page-numbers {
        flex: 1 1 30px;            
        padding: 8px 12px;          
    }

    .nav-links .next.page-numbers,
    .nav-links .prev.page-numbers {
        flex: 1 1 auto;             
    }
}

/* Responsive styles for tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-links {
        display: flex;              
        flex-wrap: wrap;              
        justify-content: center;    
        gap: 10px;                   
    }
    
    .nav-links .page-numbers, 
    .nav-links .next.page-numbers, 
    .nav-links .prev.page-numbers {
        flex: 1 1 50px;               
        padding: 10px 20px;          
    }

    .nav-links .next.page-numbers,
    .nav-links .prev.page-numbers {
        flex: 1 1 auto;            
    }
}

Purpose

• Beautifies pagination links with a clean design, hover effects, and responsiveness.

10. Disabling External Links Except Whitelisted

To disable external links except for certain whitelisted domains, you can use JavaScript. This script prevents users from clicking on external links unless they belong to allowed domains.

Code

/* Disable external links in posts only */
.post a[href^="http"]:not([href*="earnbitwin.com"]) {
    pointer-events: none;
    cursor: not-allowed;
    color: black;
}

Purpose

• Disables external links in posts except those pointing to specific whitelisted domains.

11. Social Share Buttons

Social share buttons are essential for increasing engagement and letting users share your content easily. In this article, I’ll show you how to add social share buttons with the provided HTML, CSS, and JavaScript code and integrate them into the GeneratePress theme.

Full Code HTML, CSS and Java:

<style>
.social-share {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px; /* Top margin */
    margin-bottom: ; /* No bottom margin */
}

.social-share a {
    display: inline-block;
    width: 25px; /* Smaller size */
    height: 25px; /* Smaller size */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    transition: transform 0.3s;
    text-decoration: none;
}

.social-share a:hover {
    transform: scale(1.3);
}

@media (min-width: 768px) {
    .social-share a {
        width: 30px; /* Slightly larger size for medium screens */
        height: 30px;
    }
}

@media (min-width: 1024px) {
    .social-share a {
        width: 30px; /* Normal size for large screens */
        height: 30px;
    }
}

.facebook { background-image: url('https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/512px-Facebook_f_logo_%282021%29.svg.png?20210818083032'); }
.messenger { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Facebook_Messenger_logo_2020.svg/512px-Facebook_Messenger_logo_2020.svg.png'); }
.whatsapp { background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a7/2062095_application_chat_communication_logo_whatsapp_icon.svg'); }
.telegram { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Telegram_2019_Logo.svg/512px-Telegram_2019_Logo.svg.png'); }
.viber { background-image: url('https://upload.wikimedia.org/wikipedia/uk/7/79/Viber_logo_01.png?20180408170223'); }
.copylink { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Chain_link_icon_slanted.png/602px-Chain_link_icon_slanted.png?20170905101301'); }

.share-label {
	font-family: Default:
    font-size: Default;
    font-weight: Default;
}
</style>

<div class="social-share">
    <span class="share-label">Share:</span>
    <a id="facebook-share" href="#" title="Share on Facebook" class="facebook"></a>
    <a id="messenger-share" href="#" title="Share on Messenger" class="messenger"></a>
    <a id="whatsapp-share" href="#" title="Share on WhatsApp" class="whatsapp"></a>
    <a id="telegram-share" href="#" title="Share on Telegram" class="telegram"></a>
    <a id="viber-share" href="#" title="Share on Viber" class="viber"></a>
    <a id="copylink-share" href="#" title="Copy Link" class="copylink"></a>
</div>

<script>
document.getElementById('facebook-share').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href);
document.getElementById('messenger-share').href = 'fb-messenger://share/?link=' + encodeURIComponent(window.location.href);
document.getElementById('whatsapp-share').href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(window.location.href);
document.getElementById('telegram-share').href = 'https://t.me/share/url?url=' + encodeURIComponent(window.location.href);
document.getElementById('viber-share').href = 'viber://forward?text=' + encodeURIComponent(window.location.href);

function copyToClipboard(event) {
    event.preventDefault(); // Prevent default action
    const url = window.location.href; // Get the current page URL
    navigator.clipboard.writeText(url).then(function() {
        alert('Link copied to clipboard!');
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}

document.getElementById('copylink-share').addEventListener('click', copyToClipboard);
</script>

Process to Add Social Share Buttons in GeneratePress

• Go to Appearance → Elements in WordPress Dashboard.
• Click Add New and select Hook as Element Type.
• Add a name (e.g., “Social Share Buttons”).
• Paste your HTML, CSS, and JavaScript code in the content area.
• Select Hook Location (e.g., generate_after_entry_content for below post content).
• Set Display Rules (e.g., Entire Site or Specific Posts).
• Click Publish to activate the element.

Your social share buttons will now display as per your settings!

12. Notifications Form

Now you can add the subscription form below to your website and start collecting email subscribers easily.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subscription Form</title>
    <style>
        .subscription-form input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .subscription-form input[type="submit"] {
            background-color: #04A17A;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .subscription-form input[type="submit"]:hover {
            background-color: #3CD3AD;
        }
    </style>
</head>
<body>

    <form action="#" method="post" class="subscription-form" onsubmit="subscribeAndAskForNotificationPermission(event)">
        <input type="email" name="email" id="email" placeholder="Enter your email" required>
        <input type="submit" value="Subscribe">
    </form>

    <script>
        function subscribeAndAskForNotificationPermission(event) {
            var email = document.getElementById("email").value;

            // Perform subscription process (e.g., send email to server)
            // This is a simulated process
            console.log("Subscription process initiated for email: " + email);

            // Once subscription is successful, ask for notification permission
            if (Notification.permission !== "granted") {
                event.preventDefault(); // Prevent form submission
                Notification.requestPermission().then(function (permission) {
                    if (permission === "granted") {
                        // Notification permission granted
                        // You can now display notifications to the user
                        console.log("Notification permission granted!");
                        // Proceed with form submission
                        event.target.submit();
                    }
                });
            }
        }
    </script>

</body>
</html>

13. Footer Credits

%copy% %current_year% <a href="http://crtnepal.com" target="_blank">CRT Nepal</a>  All Rights Reserved.

How to Add This CSS Code to GeneratePress

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Copy and paste the provided code snippets.
4. Click Publish to save the changes.

14. Floating Social Share Buttons in GeneratePress

Adding floating social share buttons in GeneratePress improves user engagement by making sharing easier. You can achieve this using HTML, CSS, and JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Share Buttons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .social-bar {
            position: fixed;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
        }

        .social-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            margin: 10px 0;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .social-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .social-text {
            background: white;
            padding: 8px 15px;
            border-radius: 20px;
            margin-left: 15px;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            pointer-events: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
            position: absolute;
            left: 50px;
            white-space: nowrap;
        }

        .facebook { background: #1877f2; }
        .whatsapp { background: #25d366; }
        .telegram { background: #0088cc; }
        .linkedin { background: #0077b5; }
        .pinterest { background: #bd081c; }
        .copy-link { background: #666; }

        .social-link:hover .social-icon {
            transform: scale(1.1);
        }

        /* Hide social bar on mobile devices */
        @media (max-width: 768px) {
            .social-bar {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="social-bar">
        <!-- Facebook -->
        <a class="social-link" onclick="shareFacebook()">
            <div class="social-icon facebook">
                <i class="fab fa-facebook"></i>
            </div>
            <span class="social-text">Facebook</span>
        </a>

        <!-- WhatsApp -->
        <a class="social-link" onclick="shareWhatsApp()">
            <div class="social-icon whatsapp">
                <i class="fab fa-whatsapp"></i>
            </div>
            <span class="social-text">WhatsApp</span>
        </a>

        <!-- Telegram -->
        <a class="social-link" onclick="shareTelegram()">
            <div class="social-icon telegram">
                <i class="fab fa-telegram"></i>
            </div>
            <span class="social-text">Telegram</span>
        </a>

        <!-- LinkedIn -->
        <a class="social-link" onclick="shareLinkedIn()">
            <div class="social-icon linkedin">
                <i class="fab fa-linkedin"></i>
            </div>
            <span class="social-text">LinkedIn</span>
        </a>

        <!-- Pinterest -->
        <a class="social-link" onclick="sharePinterest()">
            <div class="social-icon pinterest">
                <i class="fab fa-pinterest"></i>
            </div>
            <span class="social-text">Pinterest</span>
        </a>

        <!-- Copy Link -->
        <a class="social-link" onclick="copyToClipboard()">
            <div class="social-icon copy-link">
                <i class="fas fa-link"></i>
            </div>
            <span class="social-text">Copy Link</span>
        </a>
    </div>

    <script>
        // Get current page URL
        const currentUrl = encodeURIComponent(window.location.href);
        const defaultText = encodeURIComponent("Check this out!");

        // Share functions
        function shareFacebook() {
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${currentUrl}`, '_blank');
        }

        function shareWhatsApp() {
            window.open(`https://wa.me/?text=${defaultText}%20${currentUrl}`, '_blank');
        }

        function shareTelegram() {
            window.open(`https://t.me/share/url?url=${currentUrl}&text=${defaultText}`, '_blank');
        }

        function shareLinkedIn() {
            window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${currentUrl}`, '_blank');
        }

        function sharePinterest() {
            window.open(`https://pinterest.com/pin/create/button/?url=${currentUrl}&description=${defaultText}`, '_blank');
        }

        // Copy to clipboard function
        async function copyToClipboard() {
            try {
                await navigator.clipboard.writeText(window.location.href);
                showFeedback('Link copied to clipboard!');
            } catch (err) {
                // Fallback for older browsers
                const textarea = document.createElement('textarea');
                textarea.value = window.location.href;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                showFeedback('✅ Link copied to clipboard!');
            }
        }

        function showFeedback(message) {
            const feedback = document.createElement('div');
            feedback.style.position = 'fixed';
            feedback.style.bottom = '20px';
            feedback.style.left = '50%';
            feedback.style.transform = 'translateX(-50%)';
            feedback.style.backgroundColor = '#333';
            feedback.style.color = '#fff';
            feedback.style.padding = '10px 20px';
            feedback.style.borderRadius = '5px';
            feedback.style.zIndex = '10000';
            feedback.textContent = message;
            
            document.body.appendChild(feedback);
            
            setTimeout(() => {
                document.body.removeChild(feedback);
            }, 2000);
        }

        // Fix: Show text only when hovering over the icon
        document.querySelectorAll('.social-link').forEach(link => {
            const text = link.querySelector('.social-text');

            link.addEventListener('mouseenter', () => {
                text.style.opacity = '1';
                text.style.transform = 'translateX(0)';
            });

            link.addEventListener('mouseleave', () => {
                text.style.opacity = '0';
                text.style.transform = 'translateX(-10px)';
            });
        });
    </script>
</body>
</html>

Follow these steps to add the social share buttons to your GeneratePress website:

1️⃣ Go to Appearance → Elements → Add New (Select Hook)
2️⃣ Paste the code in the content area
3️⃣ Set Hook to wp_footer
4️⃣ Display Rules → Entire Site (or specific pages if needed)
5️⃣ Publish & Done! 🎉

Now, your Floating social share buttons will only appear on desktops and stay hidden on mobile devices. 🎉

15. Hide Category Title

CSS Code:

Custom CSS (Theme Options): Go to Appearance > Customize > Additional CSS in WordPress, paste the code, and click “Publish.”

.page-header {
    display: none;
}

16. Table Styling / Make Colorful

This CSS code will help you make your table colorful and attractive if you are using the Marketer template of the GeneratePress theme. Simply add this CSS to your Additional CSS section, and your table will have a fresh, vibrant look.

/* GeneratePress Marketer Table Styling */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #21b564; /* Outer Border */
}

/* Table Header (First Row) */
.wp-block-table thead tr {
    background-color: #21b564; /* Header Background */
    color: #ffffff; /* Text Color */
}

.wp-block-table th {
    padding: 12px;
    text-align: left;
    font-size: 16px;
    border: 1px solid #ff6600;
}

/* Table Body Rows */
.wp-block-table td {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ff6600;
}

/* Alternate Row Color */
.wp-block-table tbody tr:nth-child(even) {
    background-color: #fff3cd;
}

.wp-block-table tbody tr:nth-child(odd) {
    background-color: #ffeb99;
}

/* Hover Effect */
.wp-block-table tbody tr:hover {
    background-color: #3CD3AD;
    color: white;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .wp-block-table table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }

    .wp-block-table th,
    .wp-block-table td {
        font-size: 14px;
        padding: 8px;
    }
}

17. Footer Widgets Heading Underline

This CSS code will help you make Footer Widgets Heading Underline colorful and attractive if you are using the Marketer template of the GeneratePress theme. Simply add this CSS to your Additional CSS section, and your footer widgets will have a fresh, vibrant look.

.footer-widgets h3 {
    font-size: 22px;
    border-bottom: 1px solid #3CD3AD;
    padding-bottom: 4px; 
    display: inline-block;
     }

Note: Change the heading according to your use heading like I have used h3 heading on Footer Widgets Title so I have used h3, if you have used different heading change h2,h3,h4,h5,h6 etc.

Conclusion

Using these CSS customization codes, you can transform your GeneratePress theme to match your desired style and functionality. From enhancing button designs to creating beautiful author boxes and pagination styles, these snippets are perfect for achieving a professional look.

If you have further questions or need help implementing specific styles, let us know in the comments below! and check our my YouTube Channel.