Support » Plugin: Restaurant Reservations » How do I style the form?

  • Resolved entertheraptor

    (@entertheraptor)


    Hi there.

    Using (or trying to use) restaurant reservations with Divi theme. How do I style the reservation form?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author NateWr

    (@natewr)

    Hi @entertheraptor,

    There is no point-and-click tool for changing the look of the form. You will need to use CSS code to change the style.

    entertheraptor

    (@entertheraptor)

    Thanks but I figured that. What I need to know is how to implement it. I tried additional CSS in the theme customiser but it appears to not work. That was using the classes applied to the form elements. I’m no expert so a little push in the right direction would be appreciated.

    Thanks for the prompt reply too.

    Plugin Author NateWr

    (@natewr)

    Hi @entertheraptor,

    It sounds like you’re doing it correctly. You may need to do some debuging to see what’s gone wrong. I’d recommend first checking to make sure your custom CSS is getting printed on the frontend of your site. If you can see it getting loaded, the next thing to do is to figure why it’s not getting applied to the right elements, and experiement until you get the right CSS selectors in place.

    entertheraptor

    (@entertheraptor)

    Thanks for the tips, I got some of it working. I seem unable to control the width of input elements though. For example, if I target .rtb-text input, I can control background and padding etc. But can’t control width. Thoughts?

    Plugin Author NateWr

    (@natewr)

    It’s probably just a conflict with some other CSS code that’s being loaded by your theme. If you share a link to the booking form on your site and let me know what you’d like the width to be, I can take a look and offer some advice.

    entertheraptor

    (@entertheraptor)

    http://hughies.com.au/stalbans/book-a-table/

    100% except for the select which might be 50%

    Thanks for your trouble

    Plugin Author NateWr

    (@natewr)

    Hi @entertheraptor,

    You were close. Just a couple of small tweaks:

    
    .rtb-booking-form .rtb-text input {
        width: 100%;
        background: #eee;
        padding: 12px 20px;
        max-width: 100%;
    }
    

    You needed to add a bit more specificity to the CSS selector, because it was getting overridden by another style. And then add a max-width setting, which was preventing it from using the full width.

    entertheraptor

    (@entertheraptor)

    Great work! Thanks for all the help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How do I style the form?’ is closed to new replies.