You belong to this community since its ancient time
Active Contributor
The user has wrote more than 100 posts and comments
Passioned user
You have participated in 50+ different topics, a true fan!
Post lover
You have liked more than 50 posts!
Beta Tester
You have been part of the Beta-Testing team
Forumotion expert
This user is an expert with Forumotion free forum hosting
10th Anniversary (Grand Re-open)
Thanks for being part of our grand re-opening
Merry Christmas 2022
Thanks for having been with us during Christmas season!
Forum Writer
You have opened more than 20 topics on the forum
The Life of the Party
You have made more than 20 members in our community, wow!
Members Guru
You have received more than 50 likes on your posts. Our members really what you have to say!
Posts : 3613 Points : 128672
Add progress bar for inbox space in all versions
Overview
Description
The tutorial allows you to add a progress bar to visualize the free and used space in your inbox/outbox/sentbox/archives - even on other versions. At the moment, only in PhpBB2 it is available natively.
Demonstration
Technical limitations
› This tutorial is dedicated to the forums powered by Forumotion free forum service › It works with all Forumotion forums' versions - but not with PhpBB2 (active natively)
Installation
CSS
In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:
You need to reply to the topic in order to see the code resources
Javascript & jQuery
For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.
Title:free choice - does not influence the code effect
Where:All pages
Code:
You need to reply to the topic in order to see the code resources
Javascript Customization
You can customize a few options:
Code:
var text = true;
it allows you to display the value in the progress bar
Code:
var bar_height = 1rem;
sets the height of the progress bar. You can use size in pixels (px)
Code:
var color = "#007bff";
HEX color of the bar, blue by default
Code:
var striped = false;
set as
Code:
true
if you want a striped effect
Code:
var animated = false;
set an animation. striped must be set to
Code:
true
Notes
Approved by
Niko
Approved on
February 4th, 2023
Tested on
Most recent browsers
Difficulty level
/
Source
FMCodes design based on Bootstrap progress bars
This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.
Re: Add progress bar for inbox space in all versions