Site logo

Archived topic

Global Button Styles: Spacing (padding/margin)

10 replies · Started by Sean on July 8, 2021

Viewing posts 1–11 of 11

Hi. I'm using GeneratePress (GP) Premium and GenerateBlocks (GB) free. I am creating my site and am using the GB Button block to add buttons to various pages and posts. However, I don't see where in GP I can set global rules for the button spacing (padding and margin) of either standard buttons or GB buttons.

Is there an option anywhere in GP to se global spacing for the buttons? For GB buttons, would the Pro version be required to have spacing options added for that button block? I had found this past post from Tom and tried adding the following to my functions.php, but it didn't have any effect on the button spacing.

Is there any way to set the global styles for GB buttons in GP or via a function, or is custom CSS the only way?

add_filter( 'generateblocks_defaults', function( $defaults ) {
    $color_settings = wp_parse_args(
        get_option( 'generate_settings', array() ),
        generate_get_color_defaults()
    );

    $defaults['button']['backgroundColor'] = $color_settings['form_button_background_color'];
    $defaults['button']['backgroundColorHover'] = $color_settings['form_button_background_color_hover'];
    $defaults['button']['textColor'] = $color_settings['form_button_text_color'];
    $defaults['button']['textColorHover'] = $color_settings['form_button_text_color_hover'];
    $defaults['button']['paddingTop'] = '10';
    $defaults['button']['paddingRight'] = '20';
    $defaults['button']['paddingBottom'] = '10';
    $defaults['button']['paddingLeft'] = '20';
    $defaults['button']['MarginTop'] = '20';
    $defaults['button']['MarginRight'] = '20';
    $defaults['button']['MarginBottom'] = '20';
    $defaults['button']['MarginLeft'] = '20';

    return $defaults;
} );

For GB buttons, would the Pro version be required to have spacing options added for that button block?

No, the free version of GB's Buttons block has spacing options, you can adjust each individual GB button's paddings/margins.

Not sure I fully understand your question, are you trying to set all the GB buttons on your site to the same padding and margin?

Let me know :)

Hi Ying,

Thanks for your reply.

are you trying to set all the GB buttons on your site to the same padding and margin?

Yes, that's exactly what I'm trying to do! What's the best way to do that if I don't have GB Pro?

Can you link me to your site so I can have a look at the code first? :)

Sure, I'm working on our staging site right now, so I've included the link in the Private Information section.

Give this CSS a try:

.gb-button-wrapper .gb-button {
    padding: 10px 30px !important;
}

Thanks Ying. That works perfectly!

Just want to confirm...are style rules such as this (to set spacing for ALL GB buttons) available in GB Pro?

In GB Pro there's a function called global style.

For example, when you create a button, activate the use global style option, then the button will use the global style, you don't have to set it individually.

You can have a look at this video, it's a demonstration of how to use global style:
https://www.youtube.com/watch?v=GjyYcr8ldHQ&ab_channel=GenerateBlocks

Thank you!

You are welcome :)

This archived topic is closed to new replies.