How do I change formatting of date/location info?

  • Resolved allegrojane

    (@allegrojane)


    10 years, 6 months ago

    Hello

    In The Events Calendar plugin, the block of text for the Details such as date, time, location, venue, is indented and I have not been able to change it using custom css.

    Here’s an example. Scroll to bottom. The word “Details” is indented and the “start” and “end” time of the event is indented even further. None of this formatting is necessary when there is adequate paragraph spacing above and below.

    I tried to change the padding and/or margin. I know how to do a bit of css but perhaps I’m missing something? Sometimes I can’t tell what the tag is that I’m supposed to paste into the custom css area.

    Thanks for your help.
    Jane

    http://wordpress.org/plugins/the-events-calendar/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Barry Hughes

    (@websitebakery)

    10 years, 6 months ago

    It’s very hard to help with something like this if we can’t see the site – can you share a URL?

    Thread Starter allegrojane

    (@allegrojane)

    10 years, 5 months ago

    Hi Barry, you again!

    If you scroll to the bottom of this page, you’ll see the “Details” part of the automatic events calendar style/formatting.
    http://slowfoodportland.com/event/coffee-nomics/

    All the rest on the page formatting (Tickets, Date, etc) are my own styles because I don’t like the way the default settings look.

    Among the things I’d like to change:

    – Don’t like the indented word “Details.” Can I move it to the left? (I’d also like to change the word “Details”)
    – Start” and “End” time is further indented. This isn’t really necessary. It creates ugly gaps of space.

    – Possible to put the start and end times on the same line as “start” and “end”?
    – Can I bold “start” and “end” and the like, to stand out better?

    I noticed when I fill in more of the plugin’s fields, it puts the content in separate columns. This is okay but with all that indenting, it looks horrible.

    Thanks!
    Jane

    Barry Hughes

    (@websitebakery)

    10 years, 5 months ago

    Don’t like the indented word “Details.” Can I move it to the left? (I’d also like to change the word “Details”)

    You certainly can, some CSS like this should help:

    .tribe-events-event-meta .tribe-events-meta-group { padding: 0 }

    Start” and “End” time is further indented. This isn’t really necessary. It creates ugly gaps of space.

    Again a little CSS could help here:

    .tribe-events-event-meta dd { margin-left: 0 }

    Take a look at our Themer’s Guide for an overview of implementing custom style rules and various other tweaks. Hope that helps!

    Thread Starter allegrojane

    (@allegrojane)

    10 years, 5 months ago

    Hi Barry,

    Thanks for this. The first line of code didn’t work but the 2nd one did.

    Now that it’s all aligned together, I see why they did it that way. Because the “date” and “time” are all in roman style, they don’t stand out from the actual date and time. Would be great if they could be bolded!

    I do have some other .tribe-events selectors in my custom CSS. I wonder if they’re conflicting with the effect of the padding:0 in your first line of code.

    I’ll play around with it. Thanks for the resource. I did do an upgrade to the plugin yesterday and it claims to fix some of the formatting.

    Cheers,
    Jane

    Thread Starter allegrojane

    (@allegrojane)

    10 years, 5 months ago

    Barry,

    Can you help me with one more thing? On that same link I included, I’d like to close up the space between the Event Title and the Event Date above the photo.

    I’ve tried pasting what I think is the selector into custom CSS but nothing works.

    Right now, the date is crammed too close to the “next” and “previous” events. What I am is a graphic designer, and proximity of like elements is important! : )

    I can generally find the right declaration by looking things up. But I’m often stumped by the selector. I use a browser tool to discover what it might be, but sometimes it’s not so obvious.

    Thanks,
    Jane

    Barry Hughes

    (@websitebakery)

    10 years, 5 months ago

    Hi Jane,

    We’d love to help but beyond giving you a pointer in the right direction we’d really need to leave minor customizations like these in your hands – as we only have time to offer a basic level of support here on the wordpress.org forums.

    Remember there are some fantastic resources out on the wider web to help get to grips with the essentials of CSS.

    Thanks – and good luck!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How do I change formatting of date/location info?’ is closed to new replies.