single venue custom header

[Stefanie-Nicole]

Hi,

is there a way to create custom header images for every single event?

I created an event: http://new.yoga-life.at/kursplan/anusara-weekend-mit-barbra-noh/
but I want it to like this: http://new.yoga-life.at/barbra-noh/

And I have another question: the background colors of my boxes on the right side are not visible, is there an css overwrite?

Thank you and kind regrads
Daniel

[George]

Hi Daniel,

While both questions are customization questions, which we can only provide limited support for here on the forums, the good news is that both things you’re asking about here should be possible.

For custom header images, this is something you’d have to code yourself, but there is a lot of functionality already in place that should give you a big head start on implementing this. For example, you can set “featured images” for each event just like you might for a normal blog post – if you write some custom code in your theme, you can pull this featured image and use that as the background header image for each event, which would be unique for each event.

Your theme dictates most of the styling here, so you’ll have to dive deep into your theme to pull this off, but we have two things that might help here: first, our official Themer’s Guide, which has some great information on making custom events events from within your theme, and then some official documentation for the tribe_event_featured_image() function, which you can use to pull in the featured image for a given event.

As for your CSS question, this is again something specific to your theme, and I’m not 100% certain what you mean, but I assume you mean the background-coloring of the text widget area on your right sidebar which has white text. You can force a background color there by writing CSS like the following at the bottom of your theme’s style.css file:

div.wpb_text_column.wpb_content_element,
div.wpb_text_column.wpb_content_element.vc_custom_1429460873379 {
    background: #444 !important;
    overflow: hidden !important;
}

For further CSS customizations, your best bet is to use a tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. These tools are all free and have an “Inspector” tool within them that you can use to hover right over the element on your page whose CSS you want to customize. They’re very helpful!

I hope all this helps!

Cheers,
George

[Stefanie-Nicole]

Thanks a lot for the hint with the “featured images”!
I added some custom code to single-event.php and have my result as I wanted it!

Thanks for the css too – it’s for the background-color in the widget are in the right sidebar.

Kind regards,
Daniel

[George]

Glad we could help, Daniel. Be sure to keep backups of all custom code 🙂

Best of luck with your project!
George

[Author]

Posts