In this livestream, we'll follow the instructions on how to create a timeline in Joomla as explained by Viviana Menzel in her Joomla Magazine Article.
00:00:00 - Intro, Sponsors & Personal Anecdote
00:05:02 - Project Introduction: Building a Timeline
00:07:54 - Hands-On Development: The Timeline Override
00:30:22 - Styling & Layout Deep Dive
00:52:54 - Troubleshooting & Advanced Options
01:09:02 - Community & Extension Updates
01:36:35 - Conclusion
Summary
1. Find a Guide and Plan Content
Find a tutorial (like Viviana's article used in the video) and plan the milestones for your timeline. Use a category to group all timeline articles.
2. Create Your Timeline Articles
Create individual articles for each milestone. Use the title for the year/event (e.g., "1886 - The First Car") and add the description in the article body.
3. Create the Layout Override File
Go to System > Site Templates > [Your Template] > Create Overrides > mod_articles. This creates a new folder. Then, create a new file in that folder named `timeline.php`.
4. Add the Override Code
Copy the custom PHP code from your guide (e.g., Viviana's code) and paste it into the new `timeline.php` file. Save it.
5. Add the Custom CSS
Navigate to the template's CSS files (System > Site Templates > [Your Template] > Editor). Paste the provided timeline-specific CSS code into the `user.css` file to style your timeline.
6. Create an Articles Module
Go to System > Site Modules > New > Articles. Give it a title (e.g., "Our History") and assign it to the category you created in Step 1.
7. Apply the Custom Layout
In the module's Advanced tab, find the Layout dropdown. Select your new custom layout (e.g., `timeline`) from the list.
8. Configure Article Ordering
In the module's Options tab, set the article ordering. Using Article Order (and manually setting the order in the Article Manager) gives you the most control over the timeline sequence.
9. Add Images (Optional)
For images, use the Images tab within each article to set an "Intro Image." This is the method the custom layout is designed to work with. Configure the module to "Show Intro Image."
10. Assign the Module to a Position
Choose a module position on your site (e.g., `position-7`) and publish the module. Your styled timeline will now appear on the frontend.
Please send any feedback or bug reports or queries to;
Contact Tim Davis โบ
Joomla Training Cohort โบ https://cybersalt.com/jtc
Add comment