Styling the list widget

[johnlunceford]

I can’t for the life of me figure out how to apply styles to the list widget. I searched the forum/help and saw this but had no helpful info https://theeventscalendar.com/support/forums/topic/event-list-widget-4/
Please let me know how to tune this up.

I’d also like to create a copy of this widget which would have thumbnails enabled. And advice on that would be helpful. I did see the info regarding the addition to functions.php

Thanks,

John

[George]

Hey John,

Sorry you’re having some trouble here. When you describe not being able to apply styles to your list widget, can you specify how far along the process you are able to get? For example: are you able to get custom CSS loaded on your page, but it’s just not working or affecting your list widgets? Or are you still trying to figure out how/where to add custom CSS? Elaborate on where you’re stuck and we can definitely offer some pointers here.

As for making a customized version of the widget, you should be able to do this by first heading to your site’s  /wp-content/plugins/the-events-calendar folder – this is the free version of Events Calendar, which includes the Events List widget.

Once you’re in this folder, look for /views/widgets/list-widget.php – this is where the output for the list widget is generated, so copy and paste the entire contents of this file and paste it into a new file in your theme at /tribe-events/widgets/list-widget.php. If you don’t have the /tribe-events folder in your theme, make it, and add the /widgets folder to it before finally adding that new list-widget.php file as well.

Once you have this version of the file in your theme, you should be able to modify this file and it will modify the output of the Events List widget. To get the event’s featured image, for example, you could use the the_post_thumbnail() WordPress function to display the image if it exists. Learn more about this function here → https://codex.wordpress.org/Function_Reference/the_post_thumbnail

And you can learn more about customizing the views of Events Calendar here in our official Themer’s Guide → https://theeventscalendar.com/knowledgebase/themers-guide/

Cheers!
George

[George]

Hello,

This issue’s been sitting here a while so I’m going to go ahead and close it for now – if other issues arise, don’t hesitate to come back and open a new ticket, and if you need to open a new ticket about the same issues you originally brought up here, please share a link to this original ticket so we can pick up where we left off.

Cheers!
George

[Author]

Posts