Changing background image of main events page

[Edward Barker]

Hi there,

I can see how you can change the featured image for an individual event but I wonder how you can change the background image of the main events ‘homepage’?

Thanks,
Ed

[George]

Hey Ed,

Thanks for reaching out!

If there is a background image on your site, then this is dictated by your theme, not The Events Calendar.

Likewise, changing the image would require modifying theme code.

Can you share a link to the calendar page on your site where there is a background image? I will take a look and see if I can recommend anything.

However, in the meantime I would recommend contacting your theme developer for some assistance on changing the image.

Cheers,
George

[Edward Barker]

Thanks, George.

Here is the specific event page:

http://edbarker.co.uk/event/ed-barkers-christmas-album-launch-the-hippodrome/

I’m presuming that changing the ‘featured image’ gives me control over that background. But then, when you press ‘all events’ it takes you here:

http://edbarker.co.uk/events/

That’s what I want to know how to customise?

Thanks,

Ed

[George]

Hey Ed,

Okay, so when you click “All Events”, it takes you to the main /events page. This is totally normal and is by design. So nothing is wrong with that link.

To be clear, do you just mean that you want to add a background image to the /events/ page?

If so, then unfortunately this is not possible without custom coding. I would recommend contacting your theme developer to see if maybe the theme itself accommodates any sort of extra background-image configuration, but if not then custom coding is required.

We cannot help with custom coding, so you will have to take the reins on making any customizations (please read our support policy here).

With that all being said, though, here is the basic code to get started adding an image behind the main calendar grid:


#tribe-events {
background: rgba(0, 0, 0, 0) url("http://cdn2.list25.com/wp-content/uploads/2014/11/outerspace.jpg") no-repeat scroll 0 0;
}

☝️ This is just using a random sample image from the internet—replace the outerspace.jpg link in quotes there with the URL to any image you would like.

If you add this code to the bottom of your theme’s style.css file, it should take effect and work well.

Best of luck with your customizing!
George

[Edward Barker]

Ok thanks for this.

Can you tell me why there is a big grey box though:

http://edbarker.co.uk/event/ed-barkers-christmas-album-launch-the-hippodrome/

I’ve fiddled with the address details and it won’t display anything there?

[George]

Hey Edward,

I took a look at your site again and notice a JavaScript error arising on the page—it’s saying no Google Maps API Key is defined.

Now, this issue arises only some of the time for some of our customers. To fix this, I would recommend adding your API Key as per the instructions in this knowledgebase article (which shows you how to get your API Key if you don’t already have it on hand) → https://theeventscalendar.com/knowledgebase/setting-up-your-google-maps-api-key/

Cheers!
George

[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