Black line at top and left side of tickets area. Possible css issue.

[Ryan]

On our single tickets page we appear to be having some kind of css issue. You can see an example here: http://newsite.anschutzcollection.org/event/100-pm-guided-tour/2017-10-20/

There is a line at the top and left of the tickets box. The button to purchase also appears to have some css missing. Any ideas?

Thanks,
Ryan

[Victor]

Hi Ryan!

Let me help you with that issue.

After a closer inspection, I can see there are some styles from your theme that are conflicting with ours.

To confirm this, could you please switch to a default theme like twenty seventeen and see if the issue persists? Let me know about it.

Thanks,
Victor

[Ryan]

Hi Victor,

I believe that you are correct. I don’t notice the line when switching to the default theme. How can we fix the conflict?

Thanks,
Ryan

[Victor]

Hi Ryan!

Thanks for confirming that.

Try adding the following CSS snippet into your theme’s style.css file or by using the WordPress customizer by going to wp-admin > Appearance > Customizer > Additional CSS :

.tribe-events-tickets tr:first-child th, .tribe-events-tickets tr:first-child td {
border-top-style: none;
border-left-style: none;
}

Let me know if that works for you.

Best,
Victor

[Ryan]

Hi Victor,

That did not work. It definitely seems the events plugin is conflicting with the theme. I noticed the + and – signs are out of whack and the ticket fieldsets are not styled correctly either when a ticket is selected. In the backend, I noticed another conflict where we can’t update ticket fieldsets. We are using Enfold theme.

The theme works fine with the other woo commerce sections of the website. Just not the Events plugin.

Thanks,
Ryan

[Victor]

Hi Ryan!

I’m sorry that did not work for you.

This surely is a theme conflict. The lines being applied to the ticket box are being added by the following css styles coming from the base.css stylesheet file from the Enfold theme:

tr th:first-child, tr td:first-child{
border-left-style: solid;
border-left-width: 1px;
}
tr:first-child th, tr:first-child td{
border-top-style: solid;
border-top-width: 1px;
}

The styles I sent you before should override these, but you might want to try adding the !important to them as follows:

.tribe-events-tickets tr:first-child th, .tribe-events-tickets tr:first-child td {
border-top-style: none !important;
border-left-style: none !important;
}

For the +/- signs, try adding the following css:

.tribe-events-tickets .woocommerce .quantity input {
text-align: center !important;
}

As for the ticket fieldsets styling, please share a link to where I can see them and I will try to find a solution for it.

I noticed another conflict where we can’t update ticket fieldsets

This could be a different issue. I noticed you are using older versions of our plugins, so please first update to the latest versions and see if any difference. Remember you can always get the latest versions from your downloads page > https://theeventscalendar.com/my-account/downloads/

If you still experience the issue after updating your plugins, you should go through the steps provided in our testing for conflicts guide > https://theeventscalendar.com/knowledgebase/testing-for-conflicts/ to see if any difference.

We always suggest to setup a dev/staging site so you can test things out and make all plugins, theme and WordPress core updates without disrupting the live site.

Let us know how it goes and if you have any follow up question.

Thanks,
Victor

[Matthew Bohn]

I had this same issue regarding the enfold theme. Unfortunately changing the border color did not work for me. For some reason the table is taking on a border color based on the color attribute rather than the border-color attribute. Unfortunately, changing this also changes the text that is inside the table column. I was able to get around this by adding the following code where I actually add a border with the background of my site to the table itself:

.tribe-events-tickets.tribe-events-tickets-rsvp {
    border-color: #ffffff !important;
    border-style: solid !important;
    border-width: 3px !important;
}

[Victor]

Hi Matthew!

Thanks for chiming in here and providing your workaround for this issue!

Ryan, please let us know if Matthew’s styles here work for your site instead of the ones I provided.

If this is something that is affecting both of you, I’d recommend you get in touch with the theme authors to see if they can provide some insight on this matter and hopefully work together towards a fix as it seems it could be affecting several other users of the theme.

Best,
Victor

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts