I will show you how I implemented progress bar BBcodes inside my forum
First, go to your phpBB forum and open your ACP admin panel.
Under BBcode setting, you will need to add these new tags [progress][/progress] and [progressC][/progressC]
Let’s start with [progress][/progress]
This tag doesn’t need a value, the default color is green.
The parameters are also very simple, you just have to put any number (1-100)between the two tags.
So, in ACP, under BBcode setting, create a new BBcode, like this:
BBCode usage
Here you define how to use the BBCode.
[progress]{NUMBER}[/progress]HTML replacement
Here you define the default HTML replacement.
<div style="background-color: #1a1a1a; height: 15px; padding: 5px; width: 350px;"> <span style="display: inline-block; height: 100%; width: {NUMBER}%; background-color: #00BF40; color: #FFF; text-align: center;">{NUMBER}%</span> </div>Instead of using inline-styles, you can change style=… for classes.
Help line
This field contains the mouse over text of the BBCode.
[progress]Any number between 1-100[/progress]And now for the [progressC][/progressC] tags.
This tag need a color value to work.
The parameters are also very simple, you just have to put any number (1-100)between the two tags.
Go to your ACP admin and create a new BBcode
BBCode usage
Here you define how to use the BBCode.
[progressC={COLOR}]{NUMBER}[/progressC]HTML replacement
Here you define the default HTML replacement.
<div style="background-color: #1a1a1a; height: 15px; padding: 5px; width: 350px;"> <span style="display: inline-block; height: 100%; width: {NUMBER}%; background-color: {COLOR}; color: #FFF; text-align: center;">{NUMBER}%</span> </div>Help line
This field contains the mouse over text of the BBCode.
[progressC=#color]Any number between 1-100[/progress]The colors can be like these formats: #FFFFFF, #1a2b33 or blue
That’s it, happy coding!