• 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

Displaying Multiple Rows of Events in Events Calendar Pro Widget

October 28, 2015 by Sallie Goetsch 2 Comments

This entry is part 4 of 13 in the series Modern Tribe Tutorials
detail of Events Calendar Pro widget on Dit Gentofte website

Because Modern Tribe has been kind enough to list my tutorials about The Events Calendar and Events Calendar Pro on their support site, I get a lot of inquiries about how to do this or that…inevitably leading to more tutorials. At this rate I might end up with a book.

In any case, I got an inquiry from Johannes in Denmark a few days ago. He was having trouble getting his events to show up horizontally on the Dit Gentofte website. He set me up as a (temporary) admin on the site so I could fix the problem–quicker than having an email discussion and sending files back and forth, certainly. Of course, it did mean navigating the WordPress admin in Danish, which I don’t speak at all, but fortunately the icons clued me in. (Note: the Danish for “widgets” is “widgets.”)

First, I checked Events Calendar Pro for a place to enter custom CSS–I couldn’t remember whether there was one. There isn’t. Then I checked the theme for a place to enter custom CSS. Nothing there, either. So I installed the Simple Custom CSS plugin, which I use a lot. (Once I’ve finalized my customizations for clients, I usually just put them into the stylesheet.)

Then I spent some time with good old “inspect element”, checking out the actual class names surrounding the events on the page. Modern Tribe includes all of their event widget classes in a nice tutorial on styling widgets. I don’t know whether Johannes found that before contacting me; I only found it now that I’m writing this. I do tend to bash at a thing instead of researching it sometimes.

The div holding each event is .tribe-mini-calendar-event. (Why the list widget outputs a div named for the calendar, I’m not sure. Remind me to ask the folks from Modern Tribe sometime.) That’s the div we have to modify in order to make events line up in a row instead of a list.

I applied the CSS I’d used for my first Events Calendar Pro widget tutorial:

.tribe-mini-calendar-event {
  display:inline-block;
  width: 22%;
  margin-right: 3%;
  float: left;
  border:none;
}

It worked…except for the fifth event in the list. Instead of wrapping neatly around to create a new row, it sort of bumped along on the right side of the screen under the fourth event. Yuck!

I spent more time tinkering with nth-child() solutions than I should have, and found that whatever I put in the parentheses (e.g. 4n+1), it either applied itself to all of the events, or to none of them. This was rather annoying.

So I went and checked back to see how I’d implemented the two-layer grid of featured episodes on the home page of the FIR Podcast Network site. (That grid comes straight from a tutorial by Sridhar Katakam. Paid access only. I’m not an affiliate, but seriously, if you work with the Genesis framework you need to subscribe to Sridhar’s tutorials.)

What I ended up with, in contrast to my original solution with margins around each item, was the use of box-sizing:border-box and padding–and most importantly, a fixed height for each event.

.tribe-mini-calendar-event {
  box-sizing:border-box;
  width: 25% !important;
  padding:10px;
  float:left !important;
  margin:0 !important;
  border-bottom: none !important;
  height:340px !important;
}

The problem with rows not wrapping properly turned out to be an issue of height, not width. Some events, and some event locations, had long names that wrapped onto a second line, making those event entries taller than the others. This, in turn, bumped the floating elements around in ways that weren’t at all what I wanted. Making all the events the same height avoids that problem. I set the widget to display 8 events and got this:

Events Calendar Pro advanced list widget displaying two rows of events

Once that was working, all I needed to do was set up the media queries:

@media only screen and (max-width: 800px) {
  .tribe-mini-calendar-event {
    width:50% !important;
    height: 250px !important;
  }
}

@media only screen and (max-width: 480px) {
    .tribe-mini-calendar-event {
    width:100% !important;
    float:none !important;
    height:auto !important;
  }
}

A note on those pesky !important declarations. Those were necessary to get my custom CSS to load after the plugin CSS. The final solution should be to create a special tribe-events.css file and put it into the /tribe-events/ folder in your theme folder. I didn’t have FTP access to the site, however, so I made do.

So if you need your Events Calendar Pro advanced list widget to display more than one row of events, now you know how to do it.

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
  • screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir
    Horizontal Output for Events Calendar Pro Shortcode
  • featured events widget on the home page of KiaMiller.com
    Creating a Horizontal List Widget with Featured Images in Events Calendar Pro

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. Norbert says

    November 19, 2015 at 9:12 am

    Very useful, thank you for the post!

    I just have a question:
    How can I remove the little calendar boxes next to the image?
    And how can I make images landscape instead of square?

    Thank you

    Reply
    • Sallie Goetsch says

      November 19, 2015 at 3:47 pm

      To remove the calendar boxes, go into tribe-events/widgets/modules/ and edit the single-event.php file. You’ll need to delete or comment out the list-date div and its contents.

      To set a specific image size (because otherwise TEC will just scale down your images in whatever dimension you uploaded them), you need to create a custom image size and then specify it when you call the image. (I can’t include the code in the comment, sorry.)

      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