Support » Plugin: The Events Calendar » Customize the list/day/month events template

  • Resolved Pedro

    (@pedromag)


    Hi beautiful developers,

    I need some help with the events calendar plugin. I would like to change the background to an image in the default list events page (not the single event page) of my website.
    I know that i can customize the single event page by using the Template Overrides but i can’t figure it out how to do it in the default list/day/month template. Check the link i provide. What i would like to have is an image as background in the container of the page.
    can someone help me with this. Thanks in advance.

    Pedro

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Jaime

    (@jaimemarchwinski)

    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

    Thread Starter Pedro

    (@pedromag)

    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

    Plugin Support Jaime

    (@jaimemarchwinski)

    Hi @pedromag

    Try this:

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

    Let me know if that helps!

    Thanks,
    Jaime

    Thread Starter Pedro

    (@pedromag)

    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

    Thread Starter Pedro

    (@pedromag)

    @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 4 months, 2 weeks ago by Pedro.
    • This reply was modified 4 months, 2 weeks ago by Pedro.
    Thread Starter Pedro

    (@pedromag)

    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 4 months, 2 weeks ago by Pedro.
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.