Events List Widget not formating properly

[Earl]

I’m not sure if this is an issue pertaining to my theme or not, but the events list widget isn’t looking nearly as good as I was hoping it would. The alignment of my events is out of whack, and any of the general or global settings I change don’t seem to affect the widget at all

Here’s a reference image that shows the example image from this site on the left, with a comparison to the wacky, out of alignment problems I am having on my own site: http://earlthebard.com/wp-content/uploads/2017/04/Events-list.jpeg
*Note: the “Why is this over here?” Is where the title generates.

I’m wondering if I need to do more work than a simple plug and play straight out of the box, but I’m pretty disappointed in the widget. The full events page looks great, but I’m simply having trouble with the widget.

Any suggestions or insight?

[Trisha]

Hello Earl,

So sorry to hear you’re experiencing these issues! The good news is that this appears to be an easy fix.

I’m unable to give you any specific code since I can’t see the context; but from the looks of your screenshot you will need to style the list items in the widget so that they don’t format as a numbered list. Something like:

ol { list-style-type: none; }

There will likely be a few other tweaks to be made as far as padding and margins go but these are also fairly easy fixes.

I hope this helps! Let me know how it goes and thanks for checking out The Events Calendar 🙂

Cheers,
Trisha

[Earl]

Thank you very much for your input. The sample code you shared worked perfectly at removing the numbers and weird spacing. Hopefully the rest of my troubles can be solved just as simply.

I have more experience with html than I do css, so do you have any suggestions for places I can look to find simple code commands for centering the widget and font sizes for the event names vs the times and dates?

Once again, I really appreciate your help!

Cheers,
Earl

[Earl]

After doing a little bit of snooping, I managed to get it a little closer to what I was hoping for. Currently, however, I seem to be unable to affect the widget itself and can only target the list aspect of it. You can see what it’s doing here: http://www.earlthebard.com

Using a css editor pluging, I used this code here:

ol { list-style-type: none; }

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    text-align: center;
}

It helped a little, but the issue remains that the “View more events” link at the bottom of the widget insists on remaining left justified. Not to mention that the “centered” list is actually ever so slightly offset to the right because of some invisible information on the front end of it.

If it is helpful to know, the widget is encapsulated in a portion of my theme called the “skills section” that I have re-purposed into an upcoming events section.

I think it looks good enough for now, but I’d really like to actually get the widget itself centered, but anything I’ve tried to do to affect .tribe-events-list-widget hasn’t made any changes whatsoever.

Hopefully this will help give you a bit more context that would be helpful to you. Thanks again for your support.

[Trisha]

Hi Earl!

I’m glad to see the css helped! I was unable to locate the widget on your site but it sounds like your on the right track. Those widgets can be tricky!

I’m going to go ahead and mark this as closed but if you have any further questions we’d be happy to help you in the WordPress.org forums here: https://wordpress.org/support/plugin/the-events-calendar

Good Luck with your site!

Cheers,
Trisha

p.s. the Hurdy Gurdy is the coolest instrument ever! ? ?

[Author]

Posts