User submitted BBCodes
Forum rules
We dont add more BBCodes to our database, but feel free to share and support your own BBCodes here.
[textarea]Remember that it is not allowed to use {TEXT} inside the html tags!!!
It causes a serious security risk to your board and users.
Like this: <div style="
{TEXT} ">
{TEXT} </div>
Green = OK - Red = forbidden[/textarea]
Post by Daniel_Knecht 08 Jun 2010, 12:01
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]Images you need to Download: (right click > save as...)
Example:
Visit:
Progressbar DEMO
Last edited by Daniel_Knecht on 06 Sep 2010, 20:59, edited 2 times in total.
Post by Stoker 08 Jun 2010, 12:08
Looks very nice
Post by Daniel_Knecht 11 Jun 2010, 08:12
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
