With the release of version 1.3.3 of Timeline Express (free), we removed the margin that we had set on the announcement containers. When we originally developed this plugin, we had expected that users would want (and would set) their announcements all to the same lengths. However, as it turned out, more users than not have varying content lengths on the announcement containers. Due to this, with the styles we had originally included with Timeline Express, some of (or all of) the containers would overlap.

Additionally, we had included jQuery masonry in the plugin to aid in the layout of the Timeline. This was a bit overkill, and only added to the overhead of Timeline Express by increasing the number of HTTP requests that the plugin had to make before fully loading – which ultimately lead to longer load times.

In version 1.3.3 of Timeline Express we’ve removed both the margin on the announcement containers, and the dependency on masonry.

Tweak the Spacing

Although we removed the margin styles on the containers, it’s still possible to make the tweak yourself and set the announcement containers at a distance that works with your content and that looks good on your site.

All you need to do is add a small but of CSS to your themes style.css file. If you are using a theme that supports custom CSS, you can also enter it there. If you are unsure of how to edit the style.css file of your theme, and you don’t have a custom CSS section in your theme – you can use a third party plugin to add the modifications. One plugin we recommend for adding custom CSS to your theme is Simple Custom CSS.

The following CSS will set the margins back to the original distance of -3.5em, to decrease the overall distance between each announcement container. It’s also worth noting that this code snippet will only affect announcement containers on desktop devices. The mobile layout will not be affected.

// Tweak Timeline Express announcement container
// spacing on  larger screens devices
@media only screen and (min-width: 822px) {

   .cd-timeline-block {
      margin: -3.5em 0;
   }

   .cd-timeline-block:first-child {
      margin-top: 0;
   }

}

If after adding the CSS code to your theme, the containers end up too close together (or end up overlapping), you can adjust the first value (-3.5em) to suit your needs. We have found that -2em seems to work well across multiple themes.

In the Future…

In the near future, we’ll be building out a free add-on that allows our users to tweak certain aspects of the plugin that are currently not manageable through the settings page. Some of these settings include setting the announcement container distances, setting the announcement image size, manually setting the announcement date format (instead of inheriting from WordPress settings) and a few other adjustments.