Add GB & WP SP buttons to CSS style

Hi there,

you can change Tom's code to load your own values eg.:

add_filter( 'generateblocks_defaults', function( $defaults ) {

    $defaults['button']['backgroundColor'] = 'rgba(255,255,255,0)';
    $defaults['button']['backgroundColorHover'] = 'rgba(255,255,255,0)';
    $defaults['button']['textColor'] = '#d3d3d3;';
    $defaults['button']['textColorHover'] = '#d3d3d3;';
    $defaults['button']['paddingTop'] = '10';
    $defaults['button']['paddingRight'] = '20';
    $defaults['button']['paddingBottom'] = '10';
    $defaults['button']['paddingLeft'] = '20';

    return $defaults;
} );

David I removed the CSS and added your code to a new code snippet. Nothing happened other than the ghost style disappearing. What am I doing wrong?

You keep your CSS.
The code i provided is a PHP Snippet. It will simply set the DEFAULT colors and padding for a Buttons Block. It won't restyle an existing GB Button block.

David, It doesn´t quite work... When you visit the page, at the very end, I created a new button with the caption test and you´ll see that the border is missing both on normal and on hover.

The the WP Show Posts “Read more” buttons and the GenerateBlocks generated buttons would still be missing from your solution because those are both not styled with the DEFAULT Styling.

You still require your code here:
https://generatepress.com/forums/topic/add-gb-woocommerce-wp-sp-buttons-to-css-class/#post-1921276

to style the GP, WPSP buttons etc.

The code i provided is simply for setting the defaults of the GenerateBlocks buttons. The 'test' button you added is NOT a GB Button its a core Button.

In the original topic where Tom provided the code, Leo also referenced the GitHub where the other defaults can be set.
For reference here are the border colors:

https://github.com/tomusborne/generateblocks/blob/c2aad72f6868001c6f7fa9b606cafef511eebd1b/includes/defaults.php#L244-L247

Just to re-iterate these will only apply to a new GB Button that you add to a page. Existing buttons will retain the current styles. So if you want to set defaults you will need to replace any existing GB Buttons with new ones.

David, At the end, I managed to make them all look alike with css.

The only thing I haven´t been able to do is make the WP Show Posts full width.

Hi Oliver,

WPSP list matches the width of its container. To make it go full-width, try making its container block go full width.

To do this, there's an alignment option on the container block which lets to choose between "Wide" and "Full" as shown here - https://share.getcloudapp.com/qGuJxk9N

This will let the container block go full width of the viewport. Once it goes full width, WPSP width will go along with it. :D

Hi Elvin, thanks for your answer.
I am aware of those properties and managed to make the container look the right way, in accordance with the rest of the site. I am referring to widening the Read More buttons of the WP Show Posts list ( screenshot: https://ibb.co/qrDnhg3 ) so that they also look like the other buttons do (CF7 submit button & the last two buttons at the end of the page).
The last pieces of code I tried were this:

.wpsp-read-more {
    Width: 100%;
}
.wp-show-posts-read-more {
    Width: 100%;
}

section#wpsp-130 .wp-show-posts-inner .wpsp-read-more {
    Width: 100%;
}

section#wpsp-130 .wp-show-posts-inner {
    Width: 100%;
}

Including replacing width 100% with width auto…

I´ll anchor the WP Show Posts list in question with its posts showing their respective buttons

Try this:

section#wpsp-130 .wpsp-read-more, 
section#wpsp-130 .wpsp-read-more a {
    width: 100%;
    text-align: center;
}

See it in applied here - https://share.getcloudapp.com/8Lu5g2oK

That worked Elvin, thank you very much... have a nice day!

No problem. :D