Add HTML before event content to Specific Pages?

[bnlpros]

I am attempting to create a landing page for a site using Events Calendar Pro, and haven’t needed to do so since the change to 3.0. would like to insert the events calendar in to this new page (and subsequently others) so the pages can have specific information or items based on how they are accessed.

My issue is that the “Add HTML before event content” section is prepending the content over all events. How can this be accomplished?

[Brook]

Howdy bnlpros,

Thanks for dropping by. I am not sure I can answer that right off the bat. I am a bit unclear. What pages are you trying to add HTML content to? Is it a certain view, like Month or List? Is it the “signle events view”, AKA the event details page? Or is it more specific, like just the month of August while in Month view? Or 4-5 Event details page, but not the rest of them?

Regardless of your answer to the above questions, all of those things can be accomplished with our APIs. Checkout our docs. In the elft hand pane you will see a list of functions. Scrolling down a bit you will see the tribe_is_ functions. Those let you detect what page you are currently on, and add very specific content. Here is an example snippet that lets you adjust the <title> element using those functions, and can be adapted to adjust anything else that is filterable. It might even be possible to just skip those functions entirely, and just create a theme for a given view. Like if you wanted to add something to ever single events page, you could just create a theme override.

If you want to do this purely through HTML and CSS, that might be possible though a bit janky. Add the HTML that you want to appear on these pages but wrap them in an element with a unique CSS class. Hide that element via CSS. But, then on the page that you want it to appear, craft an overriding CSS rule that targets it via the unqiue CSS classes in the body tag. For instance:

body.single-tribe_events .hide-me-content{display:block;}

Would show .hide-me-content only on the single events pages.

Does that answer your question? Any thing else I can help with? Please let me know. Thanks!

– Brook

[Alex]

I have tried to implement the HTML and CSS method above. I have managed to hide the div in question but am not sure where to put the css code (body.single-tribe_events .hide-me-content{display:block;} as recommended above to override.

I actually want to override and display the div in question on the front photo view page. Is this possible?

Thanks

[Brook]

Howdy Alex,

Usually folks put custom CSS inside of child themes, that way they can continue to update their theme without undoing their changes. The WP Codex walks you through creating a child theme. The style.css file that you create in the above steps is where you’d insert the code. Alternatively, you could try and find a plugin, perhaps this one, that helps make this process more friendly to those who don’t want to use child themes.

To target the photo view use this CSS instead, assuming you hid the div with display:none.

body.tribe-events-photo .hide-me-content{display:block;}

Would it be possible for you to direct any followup questions to a new topic? We try to keep our threads to one issue and one customer, as we have found it helps keep our support orderly and helpful.

On that note I am going to archive this page, since it has done for a period without activity from the original poster. If either of you do have any followups, feel free to open a new topic. Cheers!

– Brook

[Author]

Posts