Display Details Meta Box

[Charlotte]

Hello,

I am using the Event Calendar plugin on my website and looking at upgrading with the filter bar add-on. However before doing this, I want to make sure that my single events display correctly.

See example here: http://bargevacations.com.au/barge-cruise-finder/tango-canal-du-midi-itinerary-14/

How could I make sure that the details in the metabox are showing well (ie” align ‘Start:’ with the start date and same for end date) + aligning the details with the I-Cal and Google Calendar buttons?

I have been working a lot on the code but nothing seems to be working… hence why I need your help!!

Thank you very much in advance,
Charlotte

[Charlotte]

Also, is there a way to hide the category and tags on a single event page?

Thank you,
Charlotte

[Charlotte]

Hello,

My ticket is showing as solved but isn’t… Can you please help?

Thanks,
Charlotte

[George]

Hi Charlotte,

Thanks for reaching out to us here – to address your questions in reverse order, I’m curious, what makes you say that this ticket was showing as “solved”? When I came to this ticket, I found that its status was “New”, and then after I assigned it to myself, “Assigned” – both expected statuses for a new ticket. Here are screenshots showing what I saw:

Can you describe what you found when you saw your ticket marked as “Solved”? We’re making a series of fixes to this web site and it’s possible this is some sort of bug – if so, we’ll patch it up promptly! 🙂

Now, as for your main questions – unfortunately, upgrading to the Filter Bar plugin won’t change any of your single-event concerns here much. This is because the layout of your single events page is dictated by your theme, not The Events Calendar…

…for the most part. There are some CSS styles from The Events Calendar itself that affect the layout of these calendar-related things like the single-event pages, and you should experiment with changing these styles on your site.

To do this, head to Events > Settings > Display in your admin area, and then choose different options for the “Stylesheet” option (e.g. “Full”, “Skeleton”, etc.).

Different stylesheets here might get you a different appearance on your single events page, but beyond this, the layout and styling is entirely coming from your theme.

Let us know if this information is helpful!

Thanks,
George

[Charlotte]

Hi George,

Thanks for getting back to me.

Please see on the following link the screengrab showing “solved” > http://bargevacations.com.au/wp-content/uploads/2015/05/Pre-Sales-Questions-The-Events-Calendar.png.

In regards to my questions, I have indeed tried to play with the different stylesheets in the settings. However, the one I am currently using (Tribe Events Styles – Full Width) is the one displaying “the best”…

If I buy the filter bar add-on, I know it won’t fix this but I will have to use categories, tags, venues, organisers, etc. And it doesn’t display too nicely > click here. Can you please suggest some CSS code to fix this?

Otherwise, please let me know ho I can hide the metabox but still display the date.

Thanks!
Charlotte

[George]

Hi Charlotte,

Thank you for the screenshot! It turns out that this thread was marked “Solved” because you accidentally clicked the “Correct Answer” button on one of your own posts there.

However, the thread is still open and you’re able to post here, so I’ve closed your other threads that are duplicates of this one to keep things organized, and keep our conversation in one place here.

Now, unfortunately, there may not be much left to this conversation since your site’s styling issues are things you’d have to handle separately from The Events Calendar. I’d recommend contacting your theme developer for help here…

…However, before just outright closing the thread, I can recommend some things that will hopefully help a little bit 🙂

First on the list is to download a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome, and learn the basics of using them. They all have “Inspector” tools that let you zoom right into an element on your page and see what CSS you’d have to write to fix its appearance.

If you’re not familiar with CSS, then no worries – you can get quite far by simply googling specific issues you run into, e.g. “How to change text alignment with CSS”, “how to change text color with CSS”, etc.

As I’ve mentioned probably too many times already, we only provide very limited support for customizations, but I know how frustrating it can be to have layout issues like you have right now, so I’d love to offer some specific examples for you that you can use on your site. For each example, copy and paste the code into the very bottom of your theme’s style.css file.

First, try the following CSS to add some “breathing room” to the elements on your page:

#tribe-events dt {
    font-weight: 700;
    margin-top: 1.25em;
}

Here’s how that looks for me on your site → https://cloudup.com/cqe90nz6K7D

Next, some styling to move the calendar links into a better spot:

.tribe-events-cal-links {
    clear: both;
    float: left;
    overflow: hidden;
    width: 100%;
}

.tribe-events-cal-links a { 
    clear: none !important:
}

Finally, you can add some spacing around the whole meta sections like this:

.tribe-events-meta-group {
    border-top: 1px dashed #000;
    margin-bottom: 4em !important;
    margin-top: 2em !important;
}

Here’s how all this looks on your page when I tried it out: https://cloudup.com/c0Kv_xWw_C5

Not bad for a quick example! 🙂

Play around with things a bit, save all changes you make, Google anything you’re not familiar with, and hopefully you can put something workable together here. Let us know if this helps Charlotte!

Thanks,
George

[Charlotte]

Hi George,

Thank you so much for your clear and detailed support. Very much appreciated!

I have been adding the CSS code you suggested into my file (NB: correcting the : with ; in line 9 of the second part of the code) but it wouldn’t align the buttons on the left. So I removed “float right” for “a.tribe-events-gcal, a.tribe-events-ical” from the “tribe-events-full.min.css” document and then was finally working 🙂

Also, may I ask you how I could link the word Tango (<dt> <?php echo tribe_get_organizer() ?> </dt>) under Barges (= Organizer) on this page?

Thanks again!
Charlotte

[George]

Glad to help Charlotte, and great catch on the incorrect usage of the : where there should’ve been a ; – I’m sorry I missed that!

As for adding a link around Tango, I’m sorry to disappoint, but this sort of customization is a bit more involved than the minor CSS tweaks mentioned above.

There are a few different ways you can go about doing that. First is to edit the “Organizer” templates directly, and where the tribe_get_organizer() function is called, simply wrap this text in a Link tag. To generate the href itself is the tricky part. If you need to be able to do this automatically for every new organizer you have on your site, then you might want to add metadata to the Organizer taxonomy itself – then query for that meta around the tribe_get_organizer() function calls.

For information on how to do that, your best bet is to google for good tutorials about adding that data – there are many, and we don’t officially endorse any, but this tutorial is especially well-done for example: https://pippinsplugins.com/adding-custom-meta-fields-to-taxonomies/

Alternatively, if this is only needed for this one “TANGO” Organizer, then you can just manually add a link tag like above but then just hard-code the href to be whatever link you need.

In either case, you’ll want to familiarize yourself with how to customize things like the “Organizer” meta template, so you can work with this. Learn about template customizations in-depth here → https://theeventscalendar.com/knowledgebase/themers-guide/

I’m sorry things aren’t so specific this time, but hopefully the information here helps you get started regardless. If you look through these resources, have a good back-up of your site before you start customizing, and play around with things a bit, I’m sure you’ll be able to put together something useful 🙂

Cheers!
George

[Charlotte]

Thanks George!

[George]

No problem! I’ll go ahead and close up this thread for now, but if you have any other questions or concerns come back and open a new thread any time 🙂

Cheers,
George

[Author]

Posts