Timeline Style Switcher
Theme Colors

Theme Skins

Right Sidebar

Banner Image

Style switcher is for demonstration of theme options only. Style switcher is not included in this theme.

Serendipity Theme Timeline Demo

Using the Timeline theme

Timeline is a Serendipity blog theme built on the Bootstrap framework. This Serendipity theme offers the following features:

  • Fully responsive, mobile first
  • Linear timeline display
  • Optional right and bottom "sidebars"
  • Footer with social links and copyright information
  • Timeline image for each entry
  • Custom archive page, configurable to show categories and tags
  • Many configuration options - tweak the theme just the way you want it!
  • 12 colorsets and 3 theme skins for a total of 36 different color combinations
  • Multilingual: English & German. Additional translations welcome
  • Requires Serendipity 2.0 or newer

Timeline requires Serendipity 2.0, the entry properties plugin and the event plugin nl2br. The event plugin nl2br is not required with Serendipity 2.0.2 and newer.


When Timeline has been installed, click on the configuration button to reveal the configuration options. Each group of options is initially collapsed. Click on each configuration group title to reveal the individual options for that group.

Read Me

The readme configuration item is an explanation of the Timeline theme. It explains the theme's dependency on the event plugin, "extended properties for entries". This plugin is installed by default in Serendipity, so you most likely will not install it yourself unless you have previously disabled the plugin. The readme also briefly explains how to use the sidebars, and how to configure certain plugins for use with this theme.

Site Identity

Optional Header Image. Leave blank to use Blog Name

Timeline is designed to accomodate a small logo in the upper left side of the header. The recommended image size is 150px x 40px. Select an image from the media library or leave blank to use your blog's name/title.

Optional Subheader Image

An optional subheader/banner image may be included below the header/logo image and navigation menu. Select an image from the media library. A sample subheader image can can be previewed by clicking on the style switcher button

Colorset and Theme Skin

Timeline includes 12 colorsets and 3 skins. The colorsets change the theme's accent colors while the skin changes the theme's background colors. The defaults are green colorset on a light/white background.

Available colorsets and skinsets can be previewed by clicking on the style switcher button

You can modify the effect of any of these styles through the use of a stylesheet named "user.css" placed in the Timeline template folder of your server. You can also create your own colorsets and skins. Use the naming pattern of *_style.css for colorsets, and *_skin.css. These files should also be placed in the Timeline template folder on your server.


The default value of this is your blog's name, the current year the template was configured, two example page links and a link to serendipity's administration. You can change this to anything, or nothing at all. The serendipity admin link text of "Login" can can also use a Font Awesome icon. To change this from text to a "login" icon , use this for your home link text: <i class="fas fa-sign-in-alt"></i><span class="sr-only">Login</span>

Page Options

Entry Date Format (http://php.net/strftime)

The default format for the entry date is %A, %B %e. %Y, which means full day name, full month name, day of month, four digit year. You can change this format to any valid format. See http://php.net/strftime for more information.

Comment and trackback time format

The default value for this option is "Words", which means to format comments and trackbacks stated as the relative time in words since the comment was made. Examples include "about an hour ago", "2 days ago", "about a year ago". Comments and trackback timestamps will follow the entry date format if this option is set to "Timestamp".

Use Timeline Format

This theme was developed to use this timeline format feature, so the default value of this option is "yes". This demo also has this option set to "yes". You can set this option to "no" for a more traditional blog appearance. The values of this option can be previewed by clicking on the style switcher button when viewing overview pages.

Show month names on timeline

This option shows, or hides, the calendar month format on the timeline. This value will change on the timeline for each group of entries. The format can be changed below.

Timeline month format (http://php.net/strftime)

The default format for the entry date is %B, %Y, which means full month name, four digit year. You can change this to any valid format. See http://php.net/strftime for more information.

Show categories on archive page

A traditional place to show categories is in a blog's sidebar. You can also show your list of categories on your archive page by enabling this option. The sidebar categories plugin (serendipity_plugin_categories) must be installed and the option "Enable Smarty-Templates?" must be activated to view categories on the archive page in addition to activating this configuration option. Note that you can enable this option and place the categories plugin in the "hidden" column to display categories only on the archive page, and not in the sidebar.

Show RSS icon next to each category on archive page

This option enables the display of an RSS icon next to each category name on the archive page. Each icon provides a link to the RSS feed for that specific category.

Show tags on archive page

This option exists for the same reason the option above exists. The show tagged entries plugin (serendipity_plugin_freetag) must be installed and the sidebar template option must be set to "archive_freetag.tpl" to view tags on the archive page. Also remember to configure the plugin option "Extended Smarty = yes" for a nicer display of tags in the entry footer. Like the category plugin, the freetag plugin can be placed in the "hidden" column to display entry tags only on the archive page, and not in the sidebar.

Navigation Options

Timeline uses serendipity's global navigation. If you have previously configured a different theme that also used global navigation, those links will be included within Timeline. If you have never previously configured global navigation links, specify the number of links you wish as well as the link text and url for each link.

Social Links

Timeline comes with configuration items for many social networks and information sharing services. Chose the number of social links then the service provider and URL for each link. Providing a full url for each option makes that icon appear at the bottom of the page. This demo is showing all icons merely because most values are set to '#'.

Additional Configuration Notes

Subtome icons included with theme

This theme includes 12 subtome png images - one set of icons for each colorset. These images are located in the folder /img/. The photoshop PSD file from which these images were created is also included. Please note that the photoshop file image size 128px tall. You must save any new icons as 64px tall for use with this theme.

Avatar icon included with theme

This theme includes a default avatar for those using the avatar plugin (serendipity_event_gravatar). The file is named default_avatar.png and is located in the folder /img/. This image must be uploaded into your media library, then selected by the avatar plugin to be used as the default.

If using the avatar plugin, please configure option the option "Produce smarty tag = yes" for best display of comment avatars when using this theme.

Entry images

This theme uses entry specific images for each entry/post. Additional images can be inserted into the entry body or extended body if desired.

A default image will be supplied for any entry which does not contain a custom entry image. The default image used is named /img/image_unavailable.jpg. There is a second, alternate image named image_unavailable_alt.jpg that can be used by simply renaming it to image_unavailable.jpg.



This theme can use a right sidebar, and bottom/footer bar. Both are referred to as "sidebars" by Serendipity. To turn off either sidebar, simply remove plugins from that specific sidebar container. If no plugins are configured in the right sidebar, the theme will automatically expand to full width.

Footer sidebar items will be equally spaced when using 2, 3, 4, 6, 8 or 9 sidebar items.

This demo includes a few custom styles via a user stylesheet. A user stylesheet is simply a file named user.css which exists in your theme folder. One of those features is a world map which is displayed as a background image in the footer side bar.

If you would like to use this same image, do the following:

  • Download the image here.
  • Create a user stylesheet named user.css and place this file in your Timeline theme folder.
  • User.css should include the following:
.footer-container .footer {
    background-image: url('/PATH/TO/worldmap-trans-grey-25.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

Be sure to identify the correct path to the image and image name.


Any questions regarding this theme should be posted at the Serendipity user forums.

2 Trackbacks

Trackback specific URI for this entry

  • Optional Necessity
    Optional Necessity 
    Timeline - A Serendipiy Blog Theme
    Timeline is a Serendipity Theme offering a unique linear display format as well as an optional, more traditional blog format. Similar to the Serendipity theme Clean Blog, Timeline is built on the Bootstrap framework. Timeline ...
  • About S9y
    About S9y 
    Theme: Timeline
    You want a new look for your Serendipity blog? No problem. There are some beautiful themes you can choose from and here is one of them: Timeline Timeline is a brandnew theme written by Don Chambers. It has many features and options you can set in the t ...

No comments

The author does not allow comments to this entry