[Resolved] Code being stripped when converting to blocks

[Leo]

Looks like you’ve done it?
https://www.screencast.com/t/Kt7f5Iik7AK

If not, this should be the CSS to target the Post Comment button specifically:

.comment-respond input[type="submit"] {
    color: #ffffff;
    background-color: #000000;
}

[Jodie]

Hi there Leo.
No sadly I didn’t make it work. I just removed the css from the additional css section for the wp-block-button and changed the color of the buttons in the section in the customiser.

I will have a go at trying the css you have given me for the post comment button.

I’ll let you know how I go 🙂

I really appreciate your help.

Cheers Jodie

[Jodie]

Thanks very much Leo

I reverted the settings for the button color in Appearance to transparent again.
Then added back my css and then added yours and it works.

Thanks so much for your help.

Cheers
Jodie 🙂

[Leo]

No problem 🙂

[Jodie]

Hi Guys

I am wondering what I am doing wrong?

I have applied this css to the Advance CSS in Appearance section but the text size is not displaying as 19px

/*START of WP BUTTON*/
.wp-block-button {
width: 100%;
max-width: 480px;
border-radius: 100px;
margin: 0 auto 10px;
margin-top: 60px; margin-bottom: 60px;
display: block;
font-size: 19px !important;
font-weight: bold;
background-color: #49a964;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8bc89c), to(#49a964));
text-decoration: none;
color: #ffffff !important
}
.wp-block-button:hover{
background-color: #eaa355; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d5b1), to(#eaa355)) ;
color: #ffffff
}
/*END of WP BUTTON*/

This works in my other site but not for my new site. Here is the post where the WP Buttons show up in green https://crochetpenguin.com/gifts-for-crocheters/

What am I missing please?

Cheers

Jodie

[David]

Hi there,

This is the markup generated by the Block Button:

<div class="wp-block-button aligncenter">
    <a class="wp-block-button__link" href=" url " target="_blank" rel="nofollow noreferrer noopener">Button Label</a>
</div>

That CSS is currently adding styles to the <div> and the font size style belongs to <a> tag.

Instead of targeting .wp-block-button in your CSS target:

.wp-block-button__link or .wp-block-button a

[Jodie]

Simply one word for you David – Legend

Thank you so much for your help.

I used the .wp-block-button_link as the target and now the text is displaying as it should.

Much appreciated as always.

Cheers

Jodie

[David]

Glad to be of help

[Author]

Posts