Customize the list/day/month events template

Hi @pedromag

You can do this with some CSS instead of creating a template override. Try using the following CSS in your stylesheet:

body, .ast-separate-container {
background-image: YOUR-IMAGE-HERE
}

I hope that helps!

Thanks,
Jaime

Thanks @jaimemarchwinski, I didn’t thought about that….wanted to go the difficult way instead the easy way ??

So, the CSS worked but now I have a different question.

I added a background image that display in the container and doesn’t change the header or the footer. We can see it working here: /eventos/

But if you go to the single event page (/evento/vivo/), the background image does overlap the header, and because the header is set as transparent it really looks good, as I wanted. But, I don’t really know how to do that in the all events page.

I tried using the .ast-container (not the .ast-separate-container) element but it doesn’t work well because some parts they stay black, not transparent.

Ideas?

Thanks,
Pedro

Hi @pedromag

Try this:

.ast-primary-header-bar {
background-color: transparent;
}

Let me know if that helps!

Thanks,
Jaime

Once again @jaimemarchwinski Thanks <3

It helped a little, yes….

The section of the menu, stayed black, it doesn’t go into transparent mode…I wonder why?
Also the area of the title as a black rectangle that doesn’t stay transparent. Is this because of the v2 views in the plugin? Because the single page event that still uses the legacy version of the plugin works well with this CSS code.

I’m going to do more testing and messing around to see if I can make it transparent.

If you have more ideas please share.

Thanks,
Pedro

@jaimemarchwinski The black section of the title that i mentioned before i managed to put it transparent with the element:

.tribe-events-calendar-list__event

Now to make it perfect i just need for the menu to be as it is on the rest of the webpage.

Pedro

• This reply was modified 2 years, 11 months ago by Pedro.
• This reply was modified 2 years, 11 months ago by Pedro.

Got it…..

It’s not perfect because I lost the effect of the white box that wraps the menu, but it works ok.

the element that i used to make it transparent was:

.ast-builder-menu-1 .main-header-menu, .ast-builder-menu-1 .main-header-menu .sub-menu

If you have any idea why only happens in the event list page let me know ??

UPDATE: I found the reason why the header was not transparent in this page….I had an option enable to disable transparent header on 404, search and archive pages….I disable that and now it works perfectly.

Thanks for all the help,

Pedro

• This reply was modified 2 years, 11 months ago by Pedro.