Many new BBCodes

User submitted BBCodes
Let us see what You have
There is no support here! Only Read Access!
Forum rules
We dont add more BBCodes to our database, but feel free to share and support your own BBCodes here.
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
KukY13
BBCoder III
BBCoder III
Posts: 96
Joined: 26 Jun 2010, 14:23

Many new BBCodes

Post by KukY13 »

Note: Most are heavily based on new CSS 3 standards. As a result, you can expect them to work perfect in Chrome and Safari, with some minor problems in Opera, and only several may work in IE and Firefox.

Here are the codes:
Circle: Use this BBCode to place circles with defined color and size, made using pure CSS!
BB:

Code: Select all

[circle={NUMBER}]{COLOR}[/circle]
HTML:

Code: Select all

<p style="height:1em;width:1em;font-size:{NUMBER}px;background:{COLOR};border-radius:0.5em;display:inline-block;padding:1px;margin:1px;"></p>
Help:
Circle:[circle=Circle radius in pixels]Circle color[/circle]
Image
Spoiler: A well known BBCode, remade on my way, with transparency and hovering.
BB:

Code: Select all

[spoiler][/spoiler]
HTML:

Code: Select all

<style type="text/css">
.spoilerOuter{width:90%;background:white;border:darkgreen solid 2px;padding:5px;overflow:hidden;height:30px;}
.spoilerInner{max-height:200px;width:100%;overflow-y:auto;overflow-x:hidden;word-wrap:break-word;background:#FFFFCC;opacity:0.3;}
.spoilerInner:hover{opacity:1;}
</style>
<div class="spoilerOuter">
<strong>SPOILER:</strong><a onclick="this.style.display='none';this.parentNode.style.height='auto'"><strong>Show</strong></a></strong>
<hr style="border-color:green;" />
<div class="spoilerInner">
{TEXT}
</div>
</div>
Help:

Code: Select all

[spoiler]Contents[/spoiler]

Fire text: Make a text that looks like it's burning!
BB:

Code: Select all

[burning]{TEXT}[/burning]
HTML:

Code: Select all

<div style="max-width:95%;background:black;border-radius:15px;font-size:34px;font-family:Calibri;color:white;padding:15px;text-align:center;font-weight:bold;text-shadow: 0px -3px 6px yellow, 0px -8px 9px orange, 0px -13px 13px red;">{TEXT}</div>
Help:
[burning]Text to display.[/burning]
Image
Flaming text:Text that isn't burning, but is rather flaming.
BB:

Code: Select all

[flaming]{TEXT}[/flaming]
HTML:

Code: Select all

<div style="max-width:95%;background:black;border-radius:15px;font-size:34px;font-family:Calibri;color:white;padding:15px;text-align:center;font-weight:bold;text-shadow:0px -5px 5px maroon,0px -10px 10px fuchsia,0px -15px 15px violet;">{TEXT}</div>
Help:
[flaming]Text to display.[/flaming]
Image
Icy text:Text that is frozen, or it is just burning with blue flames...
BB:

Code: Select all

[iced]{TEXT}[/iced]
HTML:

Code: Select all

<div style="max-width:95%;background:black;border-radius:15px;font-size:34px;font-family:Calibri;color:white;padding:15px;text-align:center;font-weight:bold;text-shadow: 0px -3px 6px #CCFFFF, 0px -8px 9px #33CCFF, 0px -13px 13px #0066CC;">{TEXT}</div>
Help:
[iced]Text to display.[/iced]
Image
Greenery text:Text that will appear in a nice greenery themed box...
BB:

Code: Select all

[greenery]{TEXT}[/greenery]
HTML:

Code: Select all

<div style="max-width:95%;background-color:black;background-image:url('http://i30.tinypic.com/10n6qfa.jpg'),url('http://i25.tinypic.com/rtqhs3.jpg');background-position: top right, bottom left;background-repeat:repeat-x;border-radius:25px;font-size:34px;font-family:Calibri;color:white;padding:1.5em 5px;text-align:center;font-weight:bold;text-shadow: 0px -10px 10px darkgreen, 0px 10px 10px darkgreen, 5px 0px 5px lightgreen, -5px 0px 5px lightgreen;">{TEXT}</div>
Help:
[greenery]Text to display.[/greenery]
Image
Flowers text:Text that is decorated with some flowers...
BB:

Code: Select all

[flowers]{TEXT}[/flowers]
HTML:

Code: Select all

<div style="max-width:90%;min-height:111px;background: black url('http://i26.tinypic.com/2i3olk.jpg') bottom right no-repeat;border-radius:25px;font-size:34px;font-family:Calibri;color:white;padding-right:225px;padding-top:50px;padding-bottom:5px;padding-left:15px;text-align:center;font-weight:bold;text-shadow:0px 0px 25px fuchsia;">{TEXT}</div>
Help:
[flowers]Text to display.[/flowers]
Image
EDITS:
  • Added new Greenery code.
  • Added new Flowers code.
  • Added new Flaming code.
  • Fixed Fire and Ice codes to allow multi-line text.
Last edited by KukY13 on 29 Jul 2010, 20:58, edited 2 times in total.
Image


User avatar
Inner Circle
BBCoder III
BBCoder III
Posts: 107
Joined: 20 Mar 2010, 18:25
Location: Germany

Re: 3 new BBCodes

Post by Inner Circle »

Nice BBCodes!

One question to the Circle BBCode: Is it possible to make some sort of Pie Chart with this code?

User avatar
Stitch
BBCoder II
BBCoder II
Posts: 28
Joined: 06 Mar 2010, 04:08

Re: 3 new BBCodes

Post by Stitch »

Very impressive with the fire and icy text. :thumb:
Image

KukY13
BBCoder III
BBCoder III
Posts: 96
Joined: 26 Jun 2010, 14:23

Re: 3 new BBCodes

Post by KukY13 »

Inner Circle » 29 Jul 2010, 00:14 wrote:Nice BBCodes!

One question to the Circle BBCode: Is it possible to make some sort of Pie Chart with this code?
Thanks!
It is possible, but it would be really hard to make some realistic sections, but it shouldn't be hard to make simplier ones... It's a good idea, and I'll give it a try.
Stitch wrote:Very impressive with the fire and icy text. :thumb:
Thanks! I'm working on a green BBCode, like that ones, but with more like nature/grass theme...
Image

KukY13
BBCoder III
BBCoder III
Posts: 96
Joined: 26 Jun 2010, 14:23

Re: 3 new BBCodes

Post by KukY13 »

Here is your Pie Chart BBCode:
Image
That is the best I can do :|

BB Code:

Code: Select all

[piechart]{NUMBER1},{NUMBER2},{NUMBER3},{NUMBER4}[/piechart]
HTML Code:

Code: Select all

<p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;text-align:right;height:20px;padding-top:60px;background:red;-webkit-border-top-left-radius:4em;-o-border-top-left-radius:4em;-moz-border-radius-top-left:4em;">{NUMBER1}%</p><p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;height:20px;padding-top:60px;background:blue;-webkit-border-top-right-radius:4em;-o-border-top-right-radius:4em;-moz-border-radius-top-right:4em;">{NUMBER2}%</p><br /><p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;text-align:right;background:green;-webkit-border-bottom-left-radius:4em;-o-border-bottom-left-radius:4em;-moz-border-radius-bottom-right:4em;">{NUMBER4}%</p><p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;background:yellow;-webkit-border-bottom-right-radius:4em;-o-border-bottom-right-radius:4em;-moz-border-radius-bottom-right:4em;">{NUMBER3}%</p>
BEWARE! In order to ensure browser compatibility, nice alignment and correct shaping, the code has been made incredibly messy and is held together working this way only by pure magic! Do not try making any changes to the code! Well, you can, but the chart will probably have a shape of a highly asymetryic egg after those...

Enjoy! Id you can! :D
Image