All css Code GeneratePress Customize

All CSS Code for GeneratePress Theme Customizing

by

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.

Table of Contants Show

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

Code

blockquote {
    font-size: 17px; /* Adjust the font size */
    font-style: italic; /* Remove italics */
    color: #333; /* Change the text color */
    border-left: 4px solid #ccc; /* Add a subtle left border */
    padding-left: 15px; /* Add some padding to the left */
}

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

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.
  • Improves the layout by avoiding crowded elements.

3. GeneratePress Site Structure Customization

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

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

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

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; /* Center the icons */
    margin: 20px 0; /* Add space around the icons */
}

.social-media-follow a {
    margin: 0 10px; /* Space between icons */
}

.social-media-follow img {
    width: 30px; /* Set width for icons */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s; /* Add a hover effect */
}

.social-media-follow img:hover {
    transform: scale(1.1); /* Slightly increase the size on hover */
}

Purpose

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

7. Author Box Customization

Code

.author-box {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  border: 1px solid #ddd; /* Add border around the author box */
  padding: 15px; /* Add some padding inside the box */
  border-radius: 5px; /* Rounded corners for the box */
	margin-top: 15px; /* Add top margin */
}

.author-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px; /* Space between image and name */
  border: 2px solid #3CD3AD; /* Add border around the author image */
}

.author-info {
  display: flex;
  flex-direction: column; /* Stack name and bio */
  align-items: center; /* Center name */
}

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

.author-bio {
  font-size: 16px;
  text-align: left; /* Align text to the left */
  margin-bottom: 10px;
  max-width: 100%; /* Ensures bio doesn't overflow */
}

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

@media (min-width: 768px) {
  .author-box {
    flex-direction: row; /* Revert to horizontal layout for larger screens */
    align-items: flex-start; /* Align items to start */
    text-align: left; /* Left align text */
  }

  .author-image {
    margin-bottom: 0; /* Remove bottom margin in desktop */
    margin-right: 10px; /* Add right margin in desktop */
  }

  .author-info {
    align-items: flex-start; /* Align name and bio to the left */
  }
}

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

Code

/* Style the headings in sidebar widgets */
.sidebar .widget .widget-title {
    font-size: 21px !important;    /* Set font size */
    font-weight: 600 !important;   /* Set font weight */
    padding: 5px 10px;            /* Padding around the text */
    background-color: #04A17A;     /* Single green background color */
    border-radius: 15px;           /* Rounded corners */
    color: #fff !important;        /* White text color */
    text-align: center;            /* Center the heading text */
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px; /* Shadow effect */
    border: 2px solid #fff;        /* White outline with 2px width */
    margin: 10;                     /* Remove default margin */
}

Purpose

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

9. Pagination Styling

Code

/* Style pagination links */
.nav-links .page-numbers, 
.nav-links .next.page-numbers, 
.nav-links .prev.page-numbers {
    background-color: #04A17A;    /* Green background color */
    color: #fff !important;       /* White text color */
    border-radius: 100px;          /* Rounded corners */
    padding: 10px 15px;           /* Padding around the text */
    border: 2px solid #fff;       /* White outline with 2px width */
    margin: 5px;                  /* Space between pagination items */
    text-decoration: none;        /* Remove underline */
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px; /* Shadow effect */
    text-align: center;           /* Center the pagination numbers */
}

/* 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;    /* Darker green on hover */
    color: #fff !important;       /* Keep text color white */
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .nav-links {
        display: flex;                /* Use flexbox for better alignment */
        flex-wrap: wrap;              /* Wrap pagination items to fit on small screens */
        justify-content: center;      /* Center align pagination items */
        gap: 5px;                     /* Space between pagination items */
    }
    
    .nav-links .page-numbers, 
    .nav-links .next.page-numbers, 
    .nav-links .prev.page-numbers {
        flex: 1 1 30px;               /* Adjust width for pagination items */
        padding: 8px 12px;            /* Adjust padding for smaller buttons */
    }

    .nav-links .next.page-numbers,
    .nav-links .prev.page-numbers {
        flex: 1 1 auto;               /* Allow 'Next' and 'Previous' to take more space */
    }
}

/* Responsive styles for tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-links {
        display: flex;                /* Use flexbox layout */
        flex-wrap: wrap;              /* Allow wrapping for tablet view */
        justify-content: center;      /* Center the pagination */
        gap: 10px;                    /* Space between pagination items */
    }
    
    .nav-links .page-numbers, 
    .nav-links .next.page-numbers, 
    .nav-links .prev.page-numbers {
        flex: 1 1 50px;               /* Adjust width for pagination items on tablets */
        padding: 10px 20px;           /* Slightly larger padding for better visibility */
    }

    .nav-links .next.page-numbers,
    .nav-links .prev.page-numbers {
        flex: 1 1 auto;               /* Allow 'Next' and 'Previous' buttons more space */
    }
}

Purpose

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

10. Disabling External Links Except Whitelisted

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!

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.

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.

Author Image
Dipak Badaila

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.

Learn More

Leave a Comment