Timeline

Page Manager addon WHMCS

Order now | Download | FAQ

The Timeline widget renders a chronological sequence of events. Each entry has a date, an icon, a dot color, a title, and a description. The timeline supports vertical and horizontal layouts with an optional alternating sides mode.

---

Admin Settings

timeline-01-admin.png

---

Style Templates

timeline-02-style-default.png

timeline-03-style-cards.png

timeline-04-style-minimal.png

timeline-05-style-border.png

timeline-06-style-neon.png

timeline-07-style-grid.png

timeline-08-style-ribbon.png

timeline-09-style-fade.png

timeline-10-style-tooltip.png

timeline-11-style-grayscale.png

timeline-12-style-circle.png

timeline-13-style-neon-alt.png

---

Settings

Content Settings

Setting	Type	Default	Description
layout	select	vertical	Timeline orientation: vertical or horizontal
alternate	checkbox	off	Alternate event cards between left and right sides of the timeline axis

---

Color Settings

Setting	Type	Default	Description
color_1	color	—	Event title text color
color_2	color	—	Event description text color
color_3	color	—	Event date text color
color_4	color	—	Timeline line and dot color
color_5	color	—	Event card background color
color_6	color	—	Icon and accent color

---

Header

Setting	Type	Default	Description
header	text	Our History	Heading text displayed above the widget
header_text_color	color	#000000	Color of the header text
disable_header	checkbox	off	Hide the header entirely

---

Items

Each timeline entry is a row in the visual editor with the following fields:

Field	Description
date	Date or time label for the event (e.g. 2024, January 2025)
icon	Font Awesome icon class for the timeline dot (e.g. fas fa-star)
color	Dot color for this specific entry (overrides the global dot color)
title	Title of the event
description	Description text for the event (stored base64-encoded)

Items can be added, removed, and reordered using the visual editor.

---

Layout Settings

Setting	Type	Default	Description
width	text	—	CSS width of the widget container (e.g. 800px, 100%)
margin_top	text	—	CSS top margin (e.g. 20px)
margin_bottom	text	—	CSS bottom margin (e.g. 20px)
style	select	puq	Visual style template
background_image	text	—	URL of the background image
background_color	color	#ffffff	Background color of the widget container
disable_background_shadow	checkbox	off	Remove the drop shadow from the container
disable_background_radius_top	checkbox	off	Remove the top border radius from the container
disable_background_radius_bottom	checkbox	off	Remove the bottom border radius from the container
disable_background	checkbox	off	Disable the background container entirely
full_width	checkbox	off	Stretch the widget to the full page width