Horizontal Output for Events Calendar Pro Shortcode

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.

Series Navigation

<< Change Photo View in Events Calendar Pro to Equal-Height Grid with Venue & LocationDisplaying Multiple Rows of Events in Events Calendar Pro Widget >>