• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Horizontal Output for Events Calendar Pro Shortcode

September 24, 2015 by Sallie Goetsch 5 Comments

This entry is part 3 of 13 in the series Modern Tribe Tutorials
screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir

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.

screenshot: Event list shortcode displaying items vertically

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:

screenshot: Events Calendar Pro shortcode output with events lined up horizontally

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.

screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir

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.

Modern Tribe Tutorials Series Navigation<< Previous PostNext Post >>

Related Items

  • Events Calendar Pro list widget showing list date and featured image
    Removing the List Date from Events Calendar Pro List Widget
  • featured events widget on the home page of KiaMiller.com
    Creating a Horizontal List Widget with Featured Images in Events Calendar Pro
  • detail of Events Calendar Pro widget on Dit Gentofte website
    Displaying Multiple Rows of Events in Events Calendar Pro Widget

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Tutorial, Events Calendar Pro

Reader Interactions

Comments

  1. Tim says

    January 7, 2016 at 3:22 pm

    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?

    Reply
    • Tim says

      January 7, 2016 at 3:32 pm

      Nevermind, I forgot I could change it in Settings>Media :)

      Reply
      • Sallie Goetsch says

        January 7, 2016 at 3:47 pm

        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/

        Reply
  2. Jordan Lambrecht says

    October 1, 2017 at 4:37 pm

    Any advice for doing this in the divi code module? I really wish there was a divi module for this =[

    Reply
    • Sallie Goetsch says

      October 1, 2017 at 5:53 pm

      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.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)


More in this series:

  • Creating a Horizontal List Widget with Featured Images in Events Calendar Pro
  • Change Photo View in Events Calendar Pro to Equal-Height Grid with Venue & Location
  • Horizontal Output for Events Calendar Pro Shortcode
  • Displaying Multiple Rows of Events in Events Calendar Pro Widget
  • Defining Event Image Size in The Events Calendar by Modern Tribe
  • Removing the List Date from Events Calendar Pro List Widget
  • Adding Non-Standard Pricing Info in The Events Calendar Using ACF
  • Moving the Gcal and iCal Links in The Events Calendar
  • Horizontal Events Widget for Events Calendar Pro — Now with Flexbox!
  • CSS Grid Layout for Event List Widget with Flexbox Fallback
  • How to Change Event Image Size in The Events Calendar without Modifying Templates
  • CSS Grid Layout for Events Calendar Pro Widget Shortcode
  • Update: Moving the Events Calendar iCal and Gcal links in 2018

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact