Avada Single Event Styling

[jeffnp]

Hi,

I have some questions related to styling the single event template with the Avada theme. I’ve spent a lot of time in the forums (and experimenting) for the past week but I haven’t been able to find answer the following related issues:

1) Most broadly, is there any easy-ish way to use the “normal” Event Calendar single event template rather than Avada’s styling of it? What I’d particularly like to be able to do is to use the right column for a regular sidebar and not for event details as Avada seems to mandate. Switching around the “event template” and “page template” and “tribe styling” etc doesn’t seem to help – I seem to be stuck with the event details in the right column.

Assuming that I am stuck with the details in the right column for now, I have the following additional issues:

2) What is the CSS change needed to remove both the main image and the title bar that remains (see screenshot).

3) Does that CSS change have to be global or can it be made on an event-by-event basis? I’m asking because, ideally, I’d like to use a featured image for some events and a slider instead of the featured image for others.

4) Once the title and featured image are removed, how can I move up the description? I’ve seen previously that it doesn’t move up automatically.

5) When I’ve used your widget to place an image above the details there is a mysterious extra dot. How to remove? Please see link.

Thanks!

Jeff

[Geoff B.]

Good evening Jeff and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

Is there any easy-ish way to use the “normal” Event Calendar single event template rather than Avada’s styling of it?

That sound like a question for the awesome folks at Avada. Normally, you could simply rename the  /tribe-events/ folder to something else, remove tribe functions from functions.php and you would be good to go.

Alas, if memory serves, Avada’s integration of the Events Calendar is a bit deeper rooted. So they are definitely the best people to ask.

What I’d particularly like to be able to do is to use the right column for a regular sidebar and not for event details as Avada seems to mandate.

I am pretty sure you could still do a template override of their template override (using a child theme). You might want to read our Themer’s guide to get a sense of how that works.

2) What is the CSS change needed to remove both the main image and the title bar that remains (see screenshot).

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.fusion-events-featured-image {
display: none !important;
}

3) Does that CSS change have to be global or can it be made on an event-by-event basis? I’m asking because, ideally, I’d like to use a featured image for some events and a slider instead of the featured image for others.

This is totally up to you.

The CSS rule I provided is global. But you could always add exceptions for certain pages by including the page id class (that lives in the body element) in the rule. E.g.:

.postid-12086 .fusion-events-featured-image {
display: inline-block !important;
}

4) Once the title and featured image are removed, how can I move up the description? I’ve seen previously that it doesn’t move up automatically.

I am not exactly sure what you mean by that. Normally, hiding the element will move the description up.

5) When I’ve used your widget to place an image above the details there is a mysterious extra dot. How to remove? Please see link.

.single-tribe_events .widget {
list-style-type: none;
}

Let me know how that goes.

Best regards,
Geoff B.

[jeffnp]

Thanks, Geoff – the CSS changes for 2-5 worked great!

With respect to 1, I did read the Themer’s Guide but unfortunately don’t know enough CSS/ PHP to tackle a template override, though I did create a child theme and understand that aspect of it. I’m planning to learn CSS at least but, in the meantime, was hoping that TEC or someone might have already created the override code to return the “normal” template in Avada since I saw in the forums that a number of people have had this issue over the years. Switching style options or templates in TEC -> Settings -> Display unfortunately doesn’t have much effect. Just double-checking that no one has already completed that override?

Thanks,

Jeff

[Geoff B.]

Hey  Jeff,

I am super stoked that this helped out.

In regards to the way Avada integrates the Events Calendar, I am pretty sure there is a fairly simple solution out there.

I would highly recommend reaching out to their team. They are super friendly and helpful and I am sure they would be glad to share the easiest way to achieve this since they are the ones that came up with the way they integrate our plugins.

With that in mind, I totally understand where you are coming from, especially in regards to not being able to simply select a different page template. As you can imagine, this is unfortunately beyond what we can control unfortunately.

Have a great day!

Geoff B.

[jeffnp]

Thanks, Geoff. I’m new to all of this but, from the Avada forums, I didn’t have the sense they would help with this kind of stuff. But I’ll give it a shot.

I do have one more question regarding single event styling, though. I needed to make a global change to the container background color in Avada for another page of the site I’m working and that setting apparently changed the background color of the single event main content area (the description), which I’d prefer to be white. I found some CSS in the forum to change the background color but it didn’t seem to work, I’m guessing because I’m using Avada. Would you be able to provide some CSS magic to change the main content area background color on the single event template?

Thanks again.

[Geoff B.]

Good evening Jeff,

Please let me know what you find out.
In my experience, the folks from Avada (and their Community) are pretty awesome.

 I needed to make a global change to the container background color in Avada for another page of the site I’m working and that setting apparently changed the background color of the single event main content area (the description), which I’d prefer to be white.

No worries, try this:

.single-tribe_events .tribe_events .fusion-fullwidth {background-color: #fff !important;}

Have a great day!

Geoff B.

[jeffnp]

Perfect! Just one more (hopefully) related issue. When I make that area white (the same color as the background) it makes it look like the main content isn’t aligned with the sidebar because the top of the container isn’t visible (since it blends into the background). Is there a way to change the padding (I think it’s the padding) at the top of the main description area so the main content and sidebar appear aligned?

Thanks again.

[Geoff B.]

Good afternoon Jeff,

I see what you mean.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.single-tribe_events .sidebar .tribe-events-single-section-title, .single-tribe_events .sidebar .tribe-events-tickets-title, .single-tribe_events .sidebar .widget .heading .widget-title, .single-tribe_events .sidebar .widget .widget-title {
padding: 9px 15px 9px 0px !important;
}

Have a great day!

Geoff B.

[jeffnp]

Sorry to say this one didn’t seem to have any effect?

Thanks,

Jeff

[Geoff B.]

Good evening Jeff,

I believe you ran into a browser caching issue because I just went on your site and it did work 🙂

If you are still not seeing it, would you mind trying things out with a private browsing window ?

Have a good weekend,

Geoff B.

[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