Skip to main content

Timeline Content Element (ce_timeline)

This TYPO3 extension provides the backend editor with a new content element that can be used to create chronologically sorted visual timelines. If required one of the 3 supplied design templates can be used. Through modern fluid templating and included SASS files, your own designs can be easily implemented.

Features

  • User friendly and very easy to handle
  • Includes predefined light, dark and pink stylesheets
  • 100% responsive
  • 2 different entry types (time and text)
  • Entries can be ordered manually
  • Optional header and text (rte) above each timeline
  • Does not require any JavaScript
  • Does not require any other Extension
  • Translated in English, German and Spanish
  • Works seamlessly with bootstrap_package and other extensions

Installation

You don't need to configure much to get this extension running.

  1. add the static TypoScript (Timeline - Content Element) to your template record
  2. add the static Page Configuration (Timeline Content Element) to your root page if you want a "New Content Element Wizard"
  3. choose a static TypoScript (e.g. Timeline Styles - Default) to make the timeline look nice
  4. add a content element of type "Timeline" and add some entries
  5. To use the lightbox feature, you need to include the static TypoScript into your root template record
  6. have fun!

You want to use your own CSS?

No problem! Just do NOT include the Static TypoScript as mentioned above and the extension will render just plain HTML. If you want to use the styles that come with the extension, feel free to use the SASS file in "Resources/Private/Scss" and change them to your needs.

How to change HTML-Templates

Since this is NOT a plugin but a regular content element, you need to change the following paths in order to overwrite the HTML/Fluid template paths with your own paths in the TypoScript Setup:

TypoScript Setup

lib.contentElement{
    templateRootPaths{
        1277 = EXT:ce_timeline/Resources/Private/Templates/
    }
    partialRootPaths{
        1277 = EXT:ce_timeline/Resources/Private/Partials/
    }
}

Download & Source Code

OFFICIAL TYPO3CODE ON GITHUB