Support

Home Forums Event Espresso Premium Boxes around the ticket selector

Boxes around the ticket selector

Posted: April 27, 2020 at 3:39 am


TalTech

April 27, 2020 at 3:39 am

We needed to add virtual conference tickets options to the registration form: https://nsb2020.org/nsb2020-conference-registration/1/
Please help me with 2 questions:

1. Virtual conference tickets appear in the end of the registration form but we would like them to be on top of the registration form. How can I do it with css?

2. I would like to draw green box around the virtual conference tickets and add green title “Virtual conference tickets” + I would like to draw blue box around live event tickets and add blue title “Live conference tickets”. How can I do it with css?


Tony

  • Support Staff

April 27, 2020 at 4:53 am

Hi there,

1. Virtual conference tickets appear in the end of the registration form but we would like them to be on top of the registration form. How can I do it with css?

You don’t need to do that with CSS, just move the tickets to the top in the ticket editor: https://monosnap.com/file/mK5Rgbih6qPCE8jPRgZuICwfVpqSNh

Drag the icon to move the ticket, like so: https://monosnap.com/file/dixSBThsdIcRziCgTt6IqEbnhN7otY

The event output will use the same order: https://monosnap.com/file/HovpElKOJzPExtPY8Ov7KNIUHc20mx

2. I would like to draw green box around the virtual conference tickets and add green title “Virtual conference tickets” + I would like to draw blue box around live event tickets and add blue title “Live conference tickets”. How can I do it with css?

The ticket selector is a table with each ticket selection added as a row. The ‘headers’ you’ve added using CSS have been added by targeting a specific ticket within the row to add content. For a border around multiple rows, you would need additional markup within the table, which you can’t easily add currently.

You could set the background of all of the rows that contains a specific word in the class, for example you could set all of the virtual tickets to use a background color of lightgreen like so:

.tkt-slctr-tbl [class*='virtual'] {
    background: lightgreen;
}

(Note that is going to ‘hide’ your additional text as it currently uses the same colour)

To create borders around specific sets of tickets right now, you’ll need some very specific CSS but is easily broken if you add/remove tickets.


/* Adds right and left boarder to all virtual tickets */
.tkt-slctr-tbl [class*='virtual'] {
    border-right: 2px red solid;
    border-left: 2px red solid;
}

/* Specifically targets the 'first' virtual ticket row to add border */
.ee-ticket-virtual-conference-presenting-author-early-bird {
    border-top: 2px red solid;
}

/* Specifically targets the 'last' virtual ticket row to add border */
.ee-ticket-virtual-conference-participant-regular-details {
    border-bottom: 2px red solid;
}

The above isn’t something we can provide support for but I’m sure you can work out how to adapt that to work for other ticket types.


TalTech

April 27, 2020 at 5:48 am

Thank you for the help! Unfortunately these css are not looking as I imagined. If the colored headers wont works for people then I figure out something.


Tony

  • Support Staff

April 27, 2020 at 7:04 am

May I ask what you were looking for with the above?

Can you post a screenshot?

https://eventespresso.com/wiki/troubleshooting-checklist/#screenshots

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 4 weeks, 1 day ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!