How to add a Progressive Reading Bar to Your Joomla Site - 🛠 MM #235

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.

---

Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.