[Resolved] Buttons GB

[Brian]

Hi,

Is there a way of making button blocks take on the styles set in Customize > Colors > Buttons? Also, Is there a way of getting buttons to line up – I think the current layout looks messy.

Kind Regards,

Brian Thompson

[Leo]

Hi there,

Is there a way of making button blocks take on the styles set in Customize > Colors > Buttons?

Unfortunately not.

Also, Is there a way of getting buttons to line up – I think the current layout looks messy.

Line up in what way? You can add multiple buttons inside a button wrapper if that helps:
https://docs.generateblocks.com/article/buttons-overview/#adding-more-buttons

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Hi Leo,

I was doing a bit of research on this and found this snippet:

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';

    return $defaults;
} );

From Here:

https://generatepress.com/forums/topic/add-custom-css-selector-to-the-button-selector/#post-1322768

but will it still work? Also, where what do I add it to?

Kind Regards,

Brian Thompson

[David]

Hi there,

the code that Tom provide here is a PHP Snippet.

This article explains how to add PHP to your site:

https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Hi David,

I have tried adding the php code through code snippets suggested but there doesn’t seem to be any difference at all. Is there a way that I could style them individually through adding a class I just want to make the hover colours uniform.

Kind Regards,

Brian Thompson

[Leo]

Not sure if I fully understand.

The snippet David provided is to set the default value and not to change all their values at once.

Is there a way that I could style them individually through adding a class I just want to make the hover colours uniform.

You should be able to use the color options within the buttons blocks to do so.

Am I missing something here?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Hi Leo,

Sorry, what I meant was when I added the php filter suggested by David, there wasn’t any change to the default size even though the filter was supposed to set the default colours to default to what is in customize > colors > Buttons.

Here is a screenshot of the php snippet which was suggested in the adding php page:

https://ibb.co/P1hm6cT

This is what is set in the customizer:

https://ibb.co/RTWHJ3V

Also, sorry, I wasn’t thinking straight. I meant to say about is there a way of applying a custom style to the individual buttons through the Additional CSS class(es) field of every button as opposed to going to every one to style them.

I hope this clears up some of the confusion.

Kind Regards,

Brian Thompson

[Leo]

Hmm I just tested the snippet and it worked for me.

Take a look at this short clip:
https://www.screencast.com/t/Ij2mdDTH

I meant to say about is there a way of applying a custom style to the individual buttons through the Additional CSS class(es) field of every button as opposed to going to every one to style them.

I supposed if give you all the button a class like special-button, then you can style it with this CSS:

.gb-button-wrapper .gb-button.special-button, .gb-button-wrapper .gb-button.gb-button.special-button:visited {
    background-color: #f1c40f;
    color: #ffffff;
    padding: 40px 20px;
}

I would recommend against doing this though as it’s just not good practice.

We will have the copy style option in the pro module which will make this easy 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Hi Leo,

Sorry for the delay in getting back to you. It now works with me. I forgot to clear the cache. I didn’t see an instant update of the colours in the preview of the customizer though for some reason. I have the snippet transferred to the live site so I’m hoping that when I go live with it that it will work there too.

Thanks Again.

Kind Regards,

Brian Thompson

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts