Styling Booking Section Titles

Resolved misticjeff
(@misticjeff)

2 years, 8 months ago
I need help with styling. Cannot figure out the correct CSS to make changes to the ‘stock’ styling on the Booking Form in a Single Event.

Want to change the Font Color of ‘Tickets’, ‘Registration Information’ & ‘Booking Summary’ as well as the background color and border for each title box.

I believe the CSS will include something to the effect of:
```
.em-booking-section-title.em-booking-form-tickets-title {
    color: #ff0000 !important;
    background-color: #f0f0f0 !important; 

}
```
See attached.
- This topic was modified 2 years, 8 months ago by misticjeff.

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

joneiseman
(@joneiseman)

2 years, 8 months ago
Try the following:
```
.em.em-event-booking-form h3.em-booking-section-title {
    color: #ff0000 !important;
    background-color: #f0f0f0 !important; 
}
```
Thread Starter misticjeff
(@misticjeff)

2 years, 8 months ago
Hey Thanks… was able to get pretty far but am stumbling on two things. First, need space between the ‘Ticket Information/Selection’ table and ‘Registration Information’ (see pic) and Second, cannot figure out how to style the ‘submit booking’ button?? Here’s the code I’m using so far, result you can see in the pic.
```
.em-booking-section-title.em-booking-form-tickets-title,
.em-booking-section-title.em-booking-form-details-title,
.em-booking-section-title.em-booking-form-summary-title {
    color: #000 !important; 
    background-color: #efbf73 !important; 
    padding: 0px !important; 
    border: 2px solid #43A6DF;
    border-radius: 5px; 
    cursor: none;

}
```
joneiseman
(@joneiseman)

2 years, 8 months ago
The default padding above “Registration Information” is determined by the following css rule:
```
.em.em-event-booking-form h3.em-booking-section-title {
      padding: 15px 15px;
}
```
To increase the padding on top you could set it to this:
```
.em.em-event-booking-form h3.em-booking-section-title {
      padding: 30px 15px 15px 15px;
}
```
To target the submit button (first one is for screens with a width over 768 pixels and the second one is for screens with a width smaller than 769 pixels):
```
@media (min-width: 769px) {
    .em.pixelbones.input input[type=submit] {
    }
}
@media (max-width: 768px) {
    .em.pixelbones.input input[type=submit] {
    }
}
```
- This reply was modified 2 years, 8 months ago by joneiseman.
Thread Starter misticjeff
(@misticjeff)

2 years, 8 months ago
We’re close but those are not working… scratching my head as to why. Here’s what i’m using for the ‘submit booking’ button.
```
@media (min-width: 769px) {
    .em.pixelbones.input input[type=submit] {
        color: #ffffff; 
        font-size: 16px; 
        background-color: #007bff; 
        
    }
}

@media (max-width: 768px) {
    .em.pixelbones.input input[type=submit] {
        color: #ffffff; 
        font-size: 14px; 
        background-color: #ff9900; 
        
    }
}
```
Padding is not working either…. appreciate the help immensely.
Thread Starter misticjeff
(@misticjeff)

2 years, 8 months ago

Update: Not sure, but must have had an extra semi colon or something in the button code, it works now! Thanks So Much! The padding above the ‘Registration Information’ is still not working. Went through the code, looks like what you suggested, just not doing anything.

joneiseman
(@joneiseman)

2 years, 8 months ago

If you send me a link to the page, I can try to fix the css.

Thread Starter misticjeff
(@misticjeff)

2 years, 8 months ago

Sorry… duh…

Here You Go!
joneiseman
(@joneiseman)

2 years, 8 months ago
The following will add additional padding above all the section titles:
```
.em.em-event-booking-form h3.em-booking-section-title {
    padding: 20px 10px 10px 10px !important;
}
```
I don’t know how to add padding just above Registration Information but not above the other section titles.
Thread Starter misticjeff
(@misticjeff)

2 years, 8 months ago

Yeah, unfortunately that just adds padding within the category section itself but not between the two.

Perhaps someone else will chime in and i’ll keep chipping away…. Thanks again so much for all the time you’ve put in to help me, it’s greatly appreciated!
joneiseman
(@joneiseman)

2 years, 8 months ago
The following css should do the trick:
```
.em-event-bookings .em.em-event-booking-form .em-booking-form>section, .em.em-item.em-item-single.size-small .em-item-meta>section {
    margin: 0 0 20px 0;

}
```
Thread Starter misticjeff
(@misticjeff)

2 years, 8 months ago

Bingo!! Ding, Ding, Ding….!!! Thank You Very Much!

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

The topic ‘Styling Booking Section Titles’ is closed to new replies.

Tags