Ticket Layout not quite right

[Kieran McMutrie]

Hi

Can someone suggest some CSS to help my allign the ticket boxes correctly.

I’ve copied the code I found on these forums to move the tickets to under the events page but it’s not quite right. See Screenshot attached

Kind Regards
Kieran

[Geoff]

Hello Kieran,

It looks like the theme has some custom styles in there that might be throwing the layout off a bit, but this CSS seems to do the trick when I tested (screenshot):

.quantity .minus, .quantity .plus, .quantity .qty {
width: 30px !important;
}

Will this work for you as well?

Cheers!
Geoff

[Kieran McMutrie]

Hi Geoff,

That’s great thanks it’s nearly there. It doesn’t quite work if my window is not at maximum width. IE say I reduce the size of my window to 75% it goes back to what it used to look like. To be honest I can probably live with that if this is the best we can do?!

Also would it be possible to get rid of the black lines and just leave the grey line seperating the two different kinds of tickets?

Thanks for the help
Kind Regards
Kieran

[Kieran McMutrie]

Sorry Geoff rather than remove the black lines I can see whats going on now I’ve created another event. What I’d like is the black line at the very top to be replaced with a long grey solid line so it’s similar to the other boxes below.

I’ve attaced a screenshot so you can understand better

Kind Regards
Kieran

[Geoff]

Hi Kieran,

You can change the 30px to something smaller, like 17px and that seems to help account for more screen sizes. If you are looking for something more specific, it might be worth reaching out to the theme author to clean up those styles.

The border around the boxes can be removed with this:

.tribe-events-tickets tr .tickets_description {
border: none;
}

Do note that will remove the border from the other box as well.

Cheers!
Geoff

[Kieran McMutrie]

Hi Geoff,

Sorry I changed my mind in terms of removing the black lines I just wanted the top line changed to a grey one instead. Is that possible?

I’ve given 17px a try and it seems to be the same as 30px. I’ve raised a support ticket with Avada about this and the other issues to hopefully get it corrected in the Theme. If you’ve got any more pointers in the mean time though I’d welcome them.

Thanks
Kieran

• This reply was modified 9 years, 9 months ago by Kieran McMutrie.

[Geoff]

Hey Kieran,

Yes, that is certainly possible:

.tribe-events-tickets tr .tickets_description {
border: 1px solid;
border-top: 1px solid #ccc;
}

If you’re looking for additional changes, I’m happy to point you in the right direction, if I can, but do want to note that we are fairly limited in how much we support customizations here in the forums. Hopefully, though, this is what you’re looking for and also serves as a good reference for other customizations as well.

Cheers!
Geoff

[Kieran McMutrie]

Hi Geoff

The above code didn’t quite work in that in only put a grey line above the ticket description. I therefore modified it to the below

.tribe-events-tickets tr .woocommerce {
border: 1px solid;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.tribe-events-tickets tr .tickets_name {
border: 1px solid;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.tribe-events-tickets tr .tickets_price {
border: 1px solid;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.tribe-events-tickets tr .tickets_description {
border: 1px solid;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

This did kind of work but it looked awful on a mobile phone so I thought in hindsite it would be best without the lines at all so used

.tribe-events-tickets tr .woocommerce {
border: none;
}

.tribe-events-tickets tr .tickets_name {
border: none;
}

.tribe-events-tickets tr .tickets_price {
border: none;
}

.tribe-events-tickets tr .tickets_description {
border: none;
}

Does that code look ok? If so I think my issue is resolved. I’ll mark it as resolved unless you think the code above could be done better.

The ticket description field isn’t really responsive on a phone but I’ve raised that with Avada. It seems stuck in one column (the WooCommerce or ticket number column) rather than spread across woocoommerce, name and price columns. Can that be fixed easily or am I best just trying Avada. I can raise a new thread if required.

Thanks for your help
Regards
Kieran

• This reply was modified 9 years, 9 months ago by Kieran McMutrie.
• This reply was modified 9 years, 9 months ago by Kieran McMutrie.

[Geoff]

That looks great! Nice work and thanks for sharing. 🙂

I’ll go ahead and close this thread, but do let us know if anything else pops up!

Cheers and have a great weekend,
Geoff

[Author]

Posts