Events details shown as sidebar

[Mario]

Hello,

on one of the showcases (http://collinssafety.ca/event/emergency-first-aid/2015-10-17/) I saw the details shown in the sidebar instead of below the event content.

Is this custom coding? I was not able to figure out how to display it this way in events calender pro.
This would be helpfull for my site as well. Can you give me a hint?

Thank you
mario

[George]

Hey @Mario!

This is indeed a result of custom coding, unfortunately 🙁

While I admit to not knowing their exact approach, all of that event meta information is generated in our plugin templates with blocks of code that look like this:


<!-- Event meta -->
<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
<?php tribe_get_template_part( 'modules/meta' ); ?>
<?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>

So, first check out our Themer’s Guide to learn how to customize event views in general → https://theeventscalendar.com/knowledgebase/themers-guide/

Then, head to src/views/single-event.php in your Events Calendar plugin files and look for the block of code I highlighted above.

Move that around and save your changes, and you should see the changes reflected on the front-end of your site.

That’s the general principle, and so then with some time and CSS tweaks and such you can go from there and build all sorts of interesting layouts 🙂

We are not able to help with custom coding unfortunately, but I hope this information helps! Let me know.

— George

[Mario]

Hello George,

thank you for pointing me in the right direction. I managed to get the sidebar almost as I wanted it. I will post the changings when everthing is done (if this is okay). I also found out that the mentioned website above has a theme with Events Caledar integration – so in this case it seems to be a feature of the theme.

There are only two issues left for this change:
1. The meta box has some kind of top margin – it is displayed a little deeper then the main event content.
2. The meta box has a three column design which is now (because of the smaller column) really hard to read.

Could you give me another adwise in which direction I need to search for changing the meta box layout?

Thank you
Mario

[George]

Hey Mario,

These remaining issues you reported sound like CSS issues, which are fortunately pretty straightforward to solve.

What I would recommend is to check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome.

They have “Inspector” tools that let you zoom right over the element in question whose styles you need to adjust – in the case of your first issue, with the top-margin for example, you could “Inspect” the metabox and the various styles on it to determine where that top-margin is coming from (or to determine if it is indeed margin; maybe with some digging you’ll find that it’s actually padding or something! 😀 ).

With these tools, you can isolate the source of the CSS-related problems and thus learn what CSS you’d need to write to fix them.

I hope this information helps! Best of luck with your customizations Mario 🙂

Sincerely,
George

[Author]

Posts