[Resolved] Code being stripped when converting to blocks

Home Forums Support Code being stripped when converting to blocks

Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #957902
    Leo
    Staff
    Customer Support

    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;
    }
    #957906
    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

    #957921
    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 πŸ™‚

    #957923
    Leo
    Staff
    Customer Support
    #1096577
    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

    #1096809
    David
    Staff
    Customer Support

    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

    #1097305
    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

    #1097341
    David
    Staff
    Customer Support
Viewing 8 posts - 16 through 23 (of 23 total)
  • You must be logged in to reply to this topic.