How do I style the upcoming events widget to include thumbnail images?

[kingdom vision]

At the moment my upcoming events widget duplicates the date as it shows in the nice date box as well as under the event title. I’d like to replace the date box with a thumbnail of the featured image that relates to the event. I’d also like to replace the block around the event title so that it is just a link.

I’ve followed the Themers Guide and created a file public_html/wp-content/themes/flyingnews/tribe-events/pro/widgets/mini-calendar/widget-calendar.css and the Styling events widgets guide to create /public_html/wp-content/themes/flyingnews/tribe-events/pro/tribe-events.css

but neither affect the appearance of the upcoming events.

The code I used:

/** Change the size and colour of the widget title */
.tribe-events-list-widget h2.widget-title {
color: blue;
font-size: 30px;
}

This isn’t necessarily the style I wanted but I wanted to see how it looked to guage what further changes I wanted to make.

As fo replacing the date box with a thumbnail, my coding knowledge is too limited to work out how best to do this.

I noticed that there’s Advanced Template settings under the Display settings for Events Calendar and wondered if this would be the easiest way to go. Though I’d still need help to know what to enter there.

[David Frankel]

I would love to see how to replace the calendar box with a thumbnail of the event.

• This reply was modified 10 years, 5 months ago by David Frankel.

[Nico]

Hi Tracy and David,

Thanks both for reaching out to us! Hopefully there’s an article that describes the process of adding thumbnails to the event list widget. Please give that a try and let me know how this goes.

Tracy, regarding the CSS for the plugin, if your intention is to add just a few lines then you can add those with Simple Custom CSS plugin or just by adding them to your theme stylesheet. The following CSS snippet will hide the ‘date icon’:


.tribe-events-adv-list-widget .tribe-mini-calendar-event .list-date {
display: none;
}


Please let me know if this works for you,
Best,
Nico

[kingdom vision]

Hi Nico

I did look for a thumbnails article before but I think my search was too specific as I didn’t find anything.

I followed your code for removing the date using the Simple Custom CSS plugin and it worked beautifully.

The code for the thumbnails in the article didn’t work as I have PRO. I checked the Themers Guide again and created the file /public_html/wp-content/themes/flyingnews/tribe-events/pro/widgets/list-widget.php – and copied from /public_html/wp-content/plugins/the-events-calendar/src/views/widgets/list-widget.php.

It took a few hours to work out but I found that if I inserted the following above the code for event titles it worked a treat:

<!– Add thumbnails to list widget –>
<?php add_image_size(‘widget-thumb’, 100, 100 ,true); ?>
<?php echo tribe_event_featured_image( $post->ID, ‘widget-thumb’); ?>

(This enables me to amend the thumb size as I need to – my theme didn’t have a small enough thumb)

This works great but it needs tidying up. There’s spacing between the title and event details that I don’t want and no spacing between each event – which I do want!

I’ve tried using <br/ but I don’t know how to use it without losing the rest of the website below the ‘Upcoming Events’ title line.

Your help would be very much appreciated.

Tracey

[Nico]

Hey Tracy,

Thanks for following up on this!

The code for the thumbnails in the article didn’t work as I have PRO.

There’s a section in the article explaining how to do this with PRO. Also a code sample is provided for the template override: https://goo.gl/ho9V9q. Anyway I’m glad you could get this right, just one comment: you should move the add_image_size call to your theme’s functions.php file, it will work the same way but “it should be there” and not in the widget code.

Regarding the unwanted spaces you mention, please send me the site URL and I can suggest some CSS lines. We usually don’t support this type of customization but I guess this time it will be fairly simple to achieve.

Have a great weekend,
Nico

[kingdom vision]

Thank you Nico.

The PRO advice refers users to the Themers Guide which I had already looked at. It’s very comprehensive but not the easiest to follow if you’re new to this kind of thing. Line 42 in the link you sent helped me to crack it. I’ll look at tidying it all up though, as I appreciate the value of following best practice.

For sorting out where line spacing appears in the widget, the website is http://www.kingdomvision.co.uk

[Nico]

Hey Tracey,

You are welcome! For sure this type of customization need at least some basic PHP skills, but are also a good opportunity to learn 🙂

Regarding the spaces, the CSS you need to adjust those is:

.tribe-events-list-widget-events {
margin-bottom: 20px !important;
}

.tribe-events-list-widget-events h4 {
margin-bottom: 5px !important;
}

Just adjust the values as needed!

Best,
Nico

[kingdom vision]

Thank you Nico. You really are a star. It looks brilliant!

All the best

Tracey

[Nico]

Glad to be of service Tracey 🙂 Thanks for the compliment!

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Have a great week,
Nico

[Author]

Posts