formatting List Widget

[Scott]

The list widget as it appears at http://churchattheplains.org/tecp/ is unsatisfactory. The spacing between and within events is not easy to follow.

Can you tell me where I would go to reformat the layout for this widget. I want to add some horizontal rule tag, chance font sizes. I can do this if I know exactly where to do it.

Also, is there a way to make these changes so that I won’t loose them on the next update. If I make these changes in this place, will they be lost when I update the plugin?

[Barry]

Hi – I’m sorry to hear it isn’t working nicely for you.

I can’t actually locate an instance of our events list widget when I visit your site, though – can you point me in the right direction?

Also, is there a way to make these changes so that I won’t loose them on the next update. If I make these changes in this place, will they be lost when I update the plugin?

Absolutely, please see our Themer’s Guide for complete details on safely overriding and customizing our templates 🙂

[Scott]

Sorry about that. Later I made some changes to the widget area, and forgot about this. I have restored the widget to the sidebar of the above linked page at http://churchattheplains.org/tecp/

I think the main problem is the use of the HEADER <h4> tag in the widget. This causes line breaks that are too wide, making it hard to figure out where one listing ends and another begins.

First, I’d like to remove the <h4> tag and just format the event name as regular text with bold.

Next, I’d like to have a horizontal rule <hr> between each event to clearly separate.

I’ll look at that theme guide. Thanks.

[Barry]

Sure – if you want to actually change the element types (ie, dispense with the h4 tags) and insert extra horizontal rules then reading through our Themer’s Guide and making a template override is going to be the right way forward.

It’s also worth noting that you could make quite a few changes via CSS:

.tribe-events-adv-list-widget ol li {
  border-bottom: 1px solid black;
}

.tribe-events-adv-list-widget ol li h4 {
  font-size: 14px;
  font-family: sans-serif;
  font-weight: bold;
  padding-bottom: 0px;
}

Rules like this can be added to a custom tribe-events/tribe-events.css stylesheet within your theme (and you can read more about this in the Themer’s Guide), ie:

themes/twentyfourteen/tribe-events/tribe-events.css

Though the above code probably isn’t perfect and you’d almost certainly need to tweak it to make it mesh nicely with your theme, it should give you an idea of what’s possible via CSS alone. Does that help?

[Barry]

Hi! It’s been a while so I’m going to go ahead and close this thread. If we can help with anything else, though, please don’t hesitate to create new threads as needed. Thanks!

[Author]

Posts