Here is how to add a progressive reading bar to the top of your Joomla site. Thanks to Michael Russell for sharing the code on his site!
00:00 - Introduction to adding a progressive reading bar in Joomla
00:31 - Introduction to Maintenance Monday and Tim Davis' services
00:59 - Acknowledgment of Michael Russell for providing the code
01:38 - Changing the default editor to Code Mirror in Joomla backend
02:13 - Creating a new custom module in Joomla
02:55 - Pasting the provided code into the custom module
03:34 - Setting module title, position, and ensuring it's published
04:05 - Saving the module settings and preparing for frontend demonstration
04:37 - Frontend demonstration of the progressive reading bar in action
05:06 - Customizing the reading bar appearance (color and height)
End - Conclusion and final notes
SUMMARY
Introduction to adding a progressive reading bar in Joomla:
Tim Davis introduces the topic of adding a progressive reading bar to Joomla sites.
Introduction to Maintenance Monday and Tim Davis' services:
Tim Davis explains Maintenance Monday on the Basic Joomla Tutorials YouTube channel.
Highlights his experience with Joomla and offers his services for hire.
Acknowledgment of Michael Russell for providing the code:
Credits Michael Russell for providing the code used to implement the progressive reading bar.
Provides a link to Michael's website where the code can be found.
Changing the default editor to Code Mirror in Joomla backend:
Shows how to change the default editor in Joomla backend from TinyMCE to Code Mirror.
Explains the reason for using Code Mirror to prevent script stripping.
Creating a new custom module in Joomla:
Guides viewers through creating a new custom module in Joomla backend.
Pasting the provided code into the custom module:
Copies and pastes the provided code from Michael's site into the custom module's code section.
Setting module title, position, and ensuring it's published:
Sets the title of the module as "Reading Progress Bar".
Assigns the module to a module position ("top bar") and ensures it's published.
Saving the module settings and preparing for frontend demonstration:
Saves the module settings and prepares to demonstrate its functionality on the frontend.
Frontend demonstration of the progressive reading bar in action:
Demonstrates the reading progress bar on the frontend as the page is scrolled.
Customizing the reading bar appearance (color and height):
Shows how to customize the appearance of the reading bar by changing its color and height in the CSS.
Conclusion and final notes:
Concludes by summarizing the steps to add a progressive reading bar to Joomla sites.
Encourages viewers to subscribe for more Joomla-related tutorials.
Please send any feedback or bug reports or queries to;
Contact Tim Davis â–º
Joomla Training Cohort â–º https://cybersalt.com/jtc
Add comment