Support » Theme: Scrawl » How to style buttons in the SCRAWL theme?

  • Resolved roycoolwine

    (@roycoolwine)


    Hi, I would like to be able to change the button’s color, font, and shape.
    What css class should I point at?

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Jerry B

    (@jerrysarcastic)

    Hi there,

    Change it how? can you describe? what color? Change the font in what way exactly? Make it bolder?

    I’m not sure how you would change the shape of the button exactly. You mean some shape other than a rectangle? Thanks for the additional info!

    Thread Starter roycoolwine

    (@roycoolwine)

    Hi Jerry, thanks for helping out.

    I was mainly looking for options, but to be specific, the main things I want to change is to make the button’s background #ff0000 and the primary font Montserrat. The shape is fine as-is.

    Thanks again!

    Roy

    Hello Roy,

    Many thanks for that extra information.

    To change the background colour of a button, you might want to add the custom CSS:

    
    /* Change button background */
    
    input[type="submit"] {
        background: #ff0000;
    }
    

    With regards the font, you may need a plugin to import that font in from Google Fonts – these plugins here: https://wordpress.org/plugins/search/google+fonts/ may be of interest.

    I hope this helps!

    Thread Starter roycoolwine

    (@roycoolwine)

    Hi Adam,

    I implemented the CSS but nothing seems to happen. Changed it to several colors without success. see https://dmroy.com

    Hello Roy,

    You could also try

    button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span {
     background: #ff0000;
    }

    Which should all buttons throughout the site.

    Can you confirm if this works please?

    Many thanks.

    Thread Starter roycoolwine

    (@roycoolwine)

    Hi Adam, nope, not working. These buttons come from

    class=”embeddable-buttondown-form”>

    and

    contact-form-7

    maybe that’s affecting it?

    I wonder if we’re talking about the same button? The submit one at the bottom of your homepage?
    This code should do the trick:

    button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span {
        background: #ff0000;
        box-shadow: 0 4px #ff0000;
    }
    Thread Starter roycoolwine

    (@roycoolwine)

    Hi Fresatomica,

    thanks for helping! We’re talking about the same button.
    I’ve updated the css and tried publishing with several colors.
    It won’t budge

    See
    https://dmroy.com/temp/

    Thread Starter roycoolwine

    (@roycoolwine)

    oh wait, I changed it to “red” and now all of a sudden it does respond … weird. But I’m happy! thank you!

    Huh, that’s odd. But I’m happy it finally worked out! 😀

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.