Support

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.

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