Preventing line breaks between time and "am" and "pm"?

[Anders]

Hi,

I need to find a way to keep the am and pm portions of the start- and end-dates together with their respsective times, and not break in two lines.
Example:

BAD:
February 15, 12:30 pm – 1:30
am

Good:
February 15, 12:30 pm –
1:30 am

BETTER:
February 15,
12:30 pm – 1:30 am

At the moment I am looking at/ working on the widget view: (but I suspect the code applies to all instances).

<div class="duration">
 <span class="date-start dtstart">February 15, 12:30 pm<span title="2015-02-15EST12:30" class="value-title"></span></span>&nbsp;-&nbsp;<span class="end-time dtend">1:30 pm<span title="2015-02-15EST01:30" class="value-title"></span></span>
</div>

I tried adding a couple of nonbreaking spaces around the time separator, but since there is a normal, breaking space between the time and “am” and “pm” that didn’t help much. And there’s no span around just the time that I can target with CSS either. Any ideas?

/anders

[Barry]

Hi Anders,

It would be great to get a link to a live example as the best solution in your case will depend on what your theme (and possibly other plugins) are putting in place by way of stylesheets, etc.

Can you provide a URL – by private reply if you prefer – that I can look at?

Thanks!

[Anders]

This reply is private.

[Barry]

How about creating a tribe-events.css stylesheet (it would live at your-theme/tribe-events/tribe-events.css — see our Themer’s Guide for full details) and adding this line of code:

.end-time.dtend { display: inline-block }

Would that help you here?

(As a sidenote, I could see the issue in the first link you provided but not the second.)

[Anders]

Well…
the
.end-time.dtend { display: inline-block }
fix gets me from bad to good, but the even better solution would be to be able to target the start time in the same way.

I guess I am a little surprised there is a span wrapping the end time, but not one wrapping the start time. (The current start span also wraps the date, which in my case makes it less useful or even unusable. If there is a class for end-time, shouldn’t there also be one for start-time?

<div class="duration">

<span class="date-start dtstart">February 25, 7:30 pm
 <span title="2015-02-25EST07:30" class="value-title"></span>
</span>
&nbsp;-&nbsp;
<span class="end-time dtend">9:00 pm
<span title="2015-02-25EST09:00" class="value-title"></span>
</span>
...
</div>

[Barry]

Hi!

The reason for this particular breakdown isn’t related primarily to visual presentation but microformat compatibility. You can certainly modify things to suit your particular needs, though:

• The tribe_events_event_schedule_details filter will let you override the schedule information with your own HTML
• You could alternatively override the single-event.php and any other relevant templates (see our Themer’s Guide for more on this approach) and replace any calls to tribe_events_event_schedule_details() with a custom function of your own that does structure things how you would like

Whether you take a filter hook based approach or write a custom function and add it straight to some customized templates, you might also be interested in functions like these:

• tribe_get_start_date()
• tribe_get_end_date()

By customizing things you will be able to take complete control and structure this information however you wish (and so apply CSS formatting to meet your needs) 🙂

Out of interest, do you have a live example where the lack of such a span element around the start time is causing the same problem you were having with the end time?

[Anders]

Ok. Thanks for the override information. I was hoping to not have to do that, since I am not really a programmer (as you can tell by my posts. Otherwise I had probably already added a function to add in an extra span or something already. )

As for a real life example of where it causes issues, look at this page:
http://ccoshawa.staging.wpengine.com/worship/prayer-support/

Second item, Lenten Series: Ugly break between start time and pm.

I can’t promise this will stay up for a long time though, as we are putting the finishing touches on this project right now.

[Barry]

No problem, yes that’s a good example – interestingly enough, it shows up in Chrome but in Firefox it is fine.

So I mean I can definitely see what you’re getting at and if you’d like to post a feature request we would definitely consider a future change, right now though I’m afraid a customization is really the only way to deal with it in the short term (unless you can tweak your theme to widen the sidebar area or something of that order).

[Anders]

If I were to use a hook with the tribe_Start_date, how would I keep the micro format stuff in place and just add a wrapping span around the actual start time?

I looked at the link you provided, but it seems a bit too difficult for my very humble programming skills.

(If you can’t provide an example code because it is beyond support scope, that’s ok too. Then we can just turn it into a feature request. )

/thanks

[Barry]

If you use the tribe_events_event_schedule_details filter (or possibly the tribe_event_formatted_date filter) you’d either need to do some clever work with PHP’s string functions or else leverage regular expressions … but, unfortunately, it is rather out of the scope of support we can provide here to work through that one.

With that in mind I’ll go ahead and close this thread – but I do wish you luck and we’ll look out for any feature requests 🙂

[Author]

Posts