Edit css booking form

Viewing 5 replies - 1 through 5 (of 5 total)
  • NateWr

    (@natewr)

    10 years ago

    Hi fcjunic,

    You’re going to want to do something like this:

    .rtb-booking-form fieldset > div {
    float: left;
    width: 33%;
}

    You’ll probably also need to clear the floats in your fieldset. If you don’t already have a clearfix technique, try this:

    .rtb-booking-form fieldset:before,
.rtb-booking-form fieldset:after {
    content: " ";
    display: table;
}

.rtb-booking-form fieldset:after {
    clear: both;
}
    Thread Starter fcjunic

    (@fcjunic)

    10 years ago

    Hi,

    Thanks for your help ! Great support 😉

    morganaeffect

    (@morganaeffect)

    9 years, 7 months ago

    Great help!
    Thank you!

    morganaeffect

    (@morganaeffect)

    9 years, 3 months ago

    Hi, Few mounths ago I edit my form with this tips and that’s all done.
    I edit the form in orizzontally, I changed the color, etc…

    After the latest wordpress/plugin version, something went wrong.
    The formatting is not right.
    I don’t know how to resolve…

    Is the shortcode name the same? [booking-form]

    Please, can you help me?
    Thank you

    http://www.ristorantelangelo.com/prenota un tavolo

    This is the css code:
    .rtb-booking-form fieldset > div {
    float: left;
    width: 33%;
    }

    .rtb-booking-form fieldset:before,
    .rtb-booking-form fieldset:after {
    content: ” “;
    display: table;
    }

    .rtb-booking-form fieldset:after {
    clear: both;
    }

    /* form prenotazione tavolo – colori – icone
    ————————————————————– */

    .rtb-booking-form {
    border:10px solid #52a1a8 !important;
    padding-top:40px;
    padding-left:80px;

    }

    body {
    color: #52a1a8;

    }

    .rtb-booking-form label:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 32px;
    font-family: dashicons;
    text-decoration: inherit;
    font-weight: 400;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color 0.1s ease-in 0;
    transition: color 0.1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .rtb-booking-form .date label:before {
    content: “\f508”;
    }

    .rtb-booking-form .time label:before {
    content: “\f469”;
    }

    .rtb-booking-form .party label:before {
    content: “\f338”;
    }

    .rtb-booking-form .name label:before {
    content: “\f464”;
    }

    .rtb-booking-form .phone label:before {
    content: “\f525”;
    }

    .rtb-booking-form .email label:before {
    content: “\f466”;
    }

    .rtb-booking-form .message label:before {
    content: “\f125″;
    }

    /* form prenotazione tavolo – dimensioni font form
    ————————————————————– */
    label, legend {

    font-weight: thin;
    font-size: 15px;
    }

    }

    /* form prenotazione tavolo colore button
    ————————————————————– */

    .button, button, a.price-send, input[type=”submit”], input[type=”reset”], input[type=”button”], .button.green, button.green, input.green[type=”submit”], input.green[type=”reset”], input.green[type=”button”] {

    background: #52a1a8;
    }

    .button:hover, button:hover, a.price-send:hover, input[type=”submit”]:hover, input[type=”reset”]:hover, input[type=”button”]:hover, .button.green:hover, button.green:hover, input.green[type=”submit”]:hover, input.green[type=”reset”]:hover, input.green[type=”button”]:hover {
    background: #315f63;
    }

    /* togliere ICAL da Events Calendar
    ————————————————————– */

    a.tribe-events-ical {
    display:none!important;
    }

    /* colore pulsante webnus button
    ————————————————————– */
    .button.theme-skin {
    background-color: #52a1a8;
    }

    /* colore social in top-bar
    ————————————————————– */
    .top-bar .socialfollow i {
    color:#2a5766;
    }

    /* testo titoli footer allineato a sx
    ————————————————————– */
    .footer-in h5.subtitle {
    text-align: left;
    }

    /* diminuito margin bottom di blocco titolo footer in origine 15px 0 25px 0
    ————————————————————– */
    .footer-in h5.subtitle, .toggle-top-area h5.subtitle {
    margin: 15px 0 15px 0;
    }

    NateWr

    (@natewr)

    9 years, 3 months ago

    Hi @morganaeffect,

    Were you able to resolve this? I went to the link you sent and I don’t see any problem with the form. It appears in a 3-column layout to me.

    (Nothing’s changed about the [booking-form] shortcode.)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Edit css booking form’ is closed to new replies.

Tags