[bbcode] wbb3 to phpbb3 - Progressbar

[Daniel_Knecht]

Hello,
i have make a phpbb3 BBCode für a Stylish Progressbar for your Forum.

UPDATE 1

BBCode:

Code: Select all

[progress={NUMBER},{INTTEXT1},{INTTEXT2}]{TEXT}[/progress]

HTML Code:

Code: Select all

<div>{TEXT}<div style="background:url(images/progress_back.png) repeat-x; border:1px solid black; width:50%; height:18px;"><div style="background-color:#{INTTEXT1};width:{NUMBER}%; height:9px;"></div><div style="background-color:#{INTTEXT1}; width:{NUMBER}%; height:9px; opacity:0.8;"></div></div><div style="color:#{INTTEXT2}; font-weight:bold; margin-top:-19px; position:absolute;">&nbsp;&nbsp;&nbsp;{NUMBER}%</div></div>

Helpline:

Code: Select all

Progressbar: [progress=percent,progressbarcolor,textcolor][/progress]

Images you need to Download: (right click > save as...)


Example:
Visit: Progressbar DEMO

[Stoker]

Looks very nice

[Daniel_Knecht]

UPDATE 1

Here is the first Update for the Progressbar...
Your Browser must be ready CSS3.

New:
- The Text is center of the Progressbar
- You can set a Text befor the % Text (Example: This is my Bar: 50%)
- The Text have a little Black Glow
- The Progressbar have a Glow like the Bar-Color.

Fixes:
- Little fixes in the HTML Code.

BBCode:

Code: Select all

[progress={NUMBER},{INTTEXT1},{INTTEXT2}]{TEXT}[/progress]

HTML Code:

Code: Select all

<div style="background:url(images/progress_back.png) repeat-x; border:1px solid black; width:50%; height:18px; box-shadow: -1px -1px 1px #{INTTEXT1}, 1px -1px 1px #{INTTEXT1}, -1px 1px 1px #{INTTEXT1}, 1px 1px 1px #{INTTEXT1}; margin-left:2px;"><div style="background-color:#{INTTEXT1}; width:{NUMBER}%; height:9px;"></div><div style="background-color:#{INTTEXT1}; width:{NUMBER}%; height:9px; opacity:0.8;"></div></div><div style="color:#{INTTEXT2};"><div style="position:relative; margin-top:-19px; width:50%; text-align:center; text-shadow: 0 0 0.4em #000">{TEXT}&nbsp;<b>{NUMBER}%</b></div></div>

Helpline:

Code: Select all

Progressbar: [progress=prozent,balkenfarbe,textfarbe]text (optional)[/progress]

Example:
Visit: Progressbar DEMO