GeneratePress Theme Customization Using My Custom CSS

GeneratePress Theme Customization Using My Custom CSS: GeneratePress is a renowned lightweight, fast-loading and customizable WordPress theme which has been loved by many. Regardless of your development experience, GeneratePress is a favorite amongst us developers as it offers you plenty design flexibility to create beautiful and practical designs for websites. There is a common way to customize your GeneratePress theme which can be done effectively using custom CSS. While this article helps you to personalize your site by using the Custom CSS for GeneratePress theme.

Why Use Custom CSS?

Custom CSS is the most common and it allows you to change/modify GeneratePress theme without touching core files of your website. A critical move if you want to keep your customizations even after theme update. With custom CSS, you can:

• Edit background, font & colors.
• Change spacing and text.
• Include more or less borders, shadows and other similar style-elements.
• More Responsive Behavior on Specific Devices.

Step 1: Accessing the Additional CSS Section

So, here is how you can begin adding your custom CSS in GeneratePress :

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Customize.
3. This time you need to look the way down and locate Additional CSS at bottom of Customizer.

This is the place of your custom CSS code. Whatever modifications you carry out here will be reflected in real-time on your website.

Step 2: Writing Custom CSS

With the Additional CSS section in place, you can begin typing away these custom styles. But you don’t need to write any code. I have prepared it for you just copy this below code and past it in Additional CSS Code section in customization settings.

Step 3: Save and Publish

Ensure you make the changes. To make the customizations you have made to your customization presentable, click on the publish button that is located at the top of the CSS Component. To publish your custom CSS, click the button right there.

Step 4: Test Your Customizations

Also, it’s good to test the website after making the custom changes especially that the changes affect how your site is viewed from devices and different browsers.

5. Watch the Video Tutorial

Watch the video tutorial above, If you are more of a visual learner on how to customise your Generatepress theme using some basic Custom CSS. This video will provide you with a complete walk-through on how to access the Additional CSS section, as well ass writing and testing your own custom styles. Check out the tutorial to learn these concepts with few more examples.

/* GeneratePress Site CSS */
.sidebar .widget,
.container-widget {
    box-shadow: rgba(23, 43, 99, 0.3) 0 6px 18px;
    border-radius: 4px;
}

/*Button Style*/
.read-more-bt,
a.button,
.pagination-bt,
.wp-block-search__button,
input[type="submit"] {
    font-size: 14px;
    padding: 10px 25px;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    background-image: linear-gradient(to right, #1fd1bf 0, #07b0a2 51%, #1fd1bf 100%);
    border-radius: 50px;
}

.read-more-bt:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

a.button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

input[type="submit"]:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.pagination-bt:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.wp-block-search__button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

/*Attachment Image Style*/
.attachment-full {
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border-radius: 25px;
}

#wp-block-search__input-1 {
    border-radius: 5px;
    border: 0px;
}

/* End GeneratePress Site CSS */