Support

Home Forums Event Espresso Premium Single Event Page Template adjustments

Single Event Page Template adjustments

Posted: June 21, 2016 at 9:58 am


rv3

June 21, 2016 at 9:58 am

I’m trying to finalize the overall styling of the single event page template. I’m hoping a little CSS help would adjust and finish a few things. Any help would be very much appreciated. I have set up a test event to see what I’m talking about here: compseats.com/events/ellie-holcomb

1) The QTY ticket selector drop down box is a little small compared to the rest of the elements in the table. Would like to make larger.
2) Would like to change the “REGISTER NOW” text to say “RESERVE NOW”
3) I would like to center the location and venue information. The title, address, and map. Basically, everything below the ticket selector.
3b) After centering, is there an easy way to put a square border around the venue info, address and map section? So that it looks like it’s in a box?

Thank you.


Tony

  • Support Staff

June 21, 2016 at 10:24 am

Hi there,

1) The QTY ticket selector drop down box is a little small compared to the rest of the elements in the table. Would like to make larger.

Depends on the size, but here is an example of 100% width:

.ticket-selector-tbl-qty-slct {
    width: 100%;
}

2) Would like to change the “REGISTER NOW” text to say “RESERVE NOW”

We have an example of how to change the button text here:

https://eventespresso.com/wiki/customize-checkout-registration-button-text/

You can place the function within your themes functions.php file or a Custom Functions Plugin

3) I would like to center the location and venue information. The title, address, and map. Basically, everything below the ticket selector.
3b) After centering, is there an easy way to put a square border around the venue info, address and map section? So that it looks like it’s in a box?

I’ve combined these together as you can apply the styles in one go:

.espresso-venue-dv {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    border: 5px black solid;
}

.ee-gmap-wrapper {
    width: 300px;
}

You will need to change the styles applied but that gives an example of what you requested 🙂


rv3

June 21, 2016 at 10:59 am

Thanks Tony. Everything worked great except for I’m still having a little trouble changing the button to say RESERVE NOW. I tried adding:

function ee_register_now_button() {
return ‘RESERVE NOW’;
}

add_filter (‘FHEE__EE_Ticket_Selector__display_ticket_selector_submit__btn_text’, ‘ee_register_now_button’);

I think it didn’t worked because of some other code I’ve added?

Here’s the CSS I’ve added:

.ticket-selector-submit-btn,
.espresso_events select
{
background: none;
border: 3px solid #6a7a7c;
text-transform: uppercase;
border-radius: 20px;
padding:6px 20px;
line-height: 3em;
cursor: pointer;
color: #808080;
box-shadow: none;
text-shadow: none;

}

.ticket-selector-tbl-qty-slct,
.espresso_events select
{
background: none;
border:3px solid #6a7a7c;

}

.ticket-selector-tbl-qty-slct {
width: 100%;
height: 100%;
}

.espresso-venue-dv {
width: 100%;
margin: 0 auto;
text-align: center;
border: 5px black solid;
}

.ee-gmap-wrapper {
width: 200px;
}


rv3

June 21, 2016 at 6:07 pm

Figured it out.

The support post ‘Single Event Page Template adjustments’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso