Page 1 of 1
[bbcode] wbb3 to phpbb3 - Progressbar
Posted: 08 Jun 2010, 14:01
by 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;"> {NUMBER}%</div></div>
Helpline:
Code: Select all
Progressbar: [progress=percent,progressbarcolor,textcolor][/progress]
Example:
Visit:
Progressbar DEMO
Re: [bbcode] wbb3 to phpbb3 - Progressbar
Posted: 08 Jun 2010, 14:08
by Stoker
Looks very nice
Re: [bbcode] wbb3 to phpbb3 - Progressbar
Posted: 11 Jun 2010, 10:12
by 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} <b>{NUMBER}%</b></div></div>
Helpline:
Code: Select all
Progressbar: [progress=prozent,balkenfarbe,textfarbe]text (optional)[/progress]
Example:
Visit:
Progressbar DEMO