Posted: 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/
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?
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
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:
(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.
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.
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.
May I ask what you were looking for with the above?
Can you post a screenshot?