![screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir](https://www.wpfangirl.com/wp-content/uploads/2015/09/Livresque-du-Noir-final.jpg)
Fabien from Livresque du Noir asked how to apply my Creating a Horizontal List Widget with Featured Images in Events Calendar Pro tutorial to the new [tribe_events_list]
shortcode that Modern Tribe has added Events Calendar Pro. The Events Calendar Pro shortcode is designed to embed the widget in page or post content, but the CSS that Fabien copied from my tutorial wasn’t working, so the events displayed in a vertical list.
When I took a closer look at the site, I saw that there were two reasons for this.
First, the CSS in my tutorial specified the .home-featured-events
class before all of the event classes, most notably .tribe-mini-calendar-event
, the class I had set to a width: 22%
and display: inline-block
in order to make the events appear in horizontal rows of four items. I did this because I only wanted the horizontal display for the events widget on the home page, not in the sidebar.
In Fabien’s theme, the container around his events was not called .home-featured-events
but .cat-box-content
, so I needed to replace all references to .home-featured-events
in his custom CSS with .cat-box-content
. Further, since I didn’t know whether he wanted all instances of the shortcode to display horizontally, I added in the .home-page
body class.
Furthermore, it turned out that I needed to apply the width:22%
and display:inline-block
not to the .tribe-mini-calendar-event
class but instead to the .home-page .cat-box-content .hentry
div, one level up.
Here is the CSS, including media queries:
.home-page .cat-box-content .hentry { width: 22%; margin-right: 2%; display: inline-block; float:left; } .home-page .cat-box-content .hentry::last-child { float:right; margin-right:0; } .home-page .cat-box-content .tribe-mini-calendar-event { border:none; } .home-page .tribe-events-widget-link { clear: both; text-align: right; padding-top: 12px; border-top: 1px solid #dedede; } @media only screen and (max-width: 1024px) { .home-page .cat-box-content .hentry { display:inline-block; width: 44%; margin-right: 3%; float: left; } .home-page .cat-box-content .hentry::last-child { display:inline-block; width: 44%; margin-right: 0; margin-left:3% float: right; } @media only screen and (max-width: 600px) { .home-page .cat-box-content .hentry { display: block; width: 100%; float: none; } }
That produced the following layout:
Since Fabien didn’t want the little calendar boxes to the left of each item (any more than I had on the Kia Miller site), he modified the event template to remove the .list-date
div.
<!-- <div class="list-date"> <span class="list-dayname">sam</span> <span class="list-daynumber">03</span> </div> -->
Finally, he changed the image size so that the events showed landscape images instead of square ones, for a compact horizontal layout.
Remember, the key to adapting these tutorials for your own site is to make sure you replace the CSS container classes in the demo with the classes from your own theme’s CSS.
Thanks for this tutorial and the other one with the widget. I was wondering though, what css magic or otherwise did you use to change the image thumbnail into a landscape image?
Nevermind, I forgot I could change it in Settings>Media :)
What I actually did was create a custom image size for events (in functions.php) and then modify the event templates to use that image size. I wrote a tutorial on that, too, because several people asked about it: https://www.wpfangirl.com/2015/defining-event-image-size-in-the-events-calendar-by-modern-tribe/
Any advice for doing this in the divi code module? I really wish there was a divi module for this =[
I’ve never worked with Divi, so I can’t speak to the specifics of it, but if you can insert a shortcode, you may be able to adapt what I just wrote about formatting the widget shortcode on a site that was using Visual Composer.