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 : 3614 Points : 129487
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.
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!
Team contributor
You have been part of the community 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
Friendly user
You have added many community members as friends!
Beta Tester
You have been part of the Beta-Testing team
Merry Christmas 2022
Thanks for having been with us during Christmas season!
Forum Writer
You have opened more than 20 topics on the forum
Members Guru
You have received more than 50 likes on your posts. Our members really what you have to say!
Post lover
You have liked more than 50 posts!
Forum Partner
This member is founder of a community affiliated with FMCodes!
Posts : 595 Points : 99312
Thanks for the tutorial Niko =)
Hey Guest, Welcome to FMCodes. Don't forget to read the General Rules • Want to improve your forum? Take a look of the Coding Community section. • Need any new design, promote your forum or any related? You can use our Forum Services
Helping those who need it is not only part of duty, but of happiness.