3 BBCodes (Info/Note/Warn/Tip)

[Fire-Fox]

Hey!

Here is 3 BBCodes you can use :

Info BBCode
BBCode usage:

Code: Select all

[info]{TEXT}[/info]

HTML replacement:

Code: Select all

 <div style="width:100%"> <div style="font-style:italic; color: black;margin: 3px auto 0px auto; font-weight: bold; font-size: small; padding: 3px; background-color: #CEF2E0; border-left: 4px solid #DFDF00; border-top: 1px solid #FFFF99; border-right: 1px solid #FFFF99; color: #003300; border-top-color: #A3BFB1; border-right-color: #A3BFB1; border-left-color: #A3BFB1"> <img src="./images/infosmall.png" width="20" height="20" style="background-position: 0 50%;" alt="information" />&nbsp;&nbsp; Information</div> <div style="padding: 4px; background: #F5FFFA right bottom; border-left: 4px solid #DFDF00; border-right: 1px solid #FFFF99; border-bottom: 1px solid #FFFF99; margin: 0px auto 8px auto; background-position: right bottom; border-right-color: #A3BFB1; border-bottom-color: #A3BFB1; border-left-color: #A3BFB1;">{TEXT}</div> </div>

Help Line:

Code: Select all

[info]Text Here[/info]

Note BBCode
BBCode usage:

Code: Select all

[note]{TEXT}[/note]

HTML replacement:

Code: Select all

<div style="width:100%"> <div style="font-style:italic; color: #000066; font-size:x-small;margin: 2px auto 0px auto; font-weight: bold; font-size: small; padding: 5px; background-color: #CEDFF2; border-left: 4px solid #42A1DF; border-top: 1px solid #BDD6E6; border-right: 1px solid #BDD6E6; border-top-color: #638C9C; border-right-color: #638C9C; border-left-color: #638C9C;"> <img class="inlineimg" src="./images/notesmall.png"  width="20" height="16"  style="background-position: 0 50%;" alt="Note" />&nbsp;&nbsp; Note</div> <div style="padding: 4px; background-position: right bottom; background: #F5FAFF right bottom; border-left: 4px solid #42A1DF; border-right: 1px solid #BDD6E6; border-bottom: 1px solid #BDD6E6; margin: 0px auto 8px auto; border-right-color: #638C9C; border-bottom-color: #638C9C; border-left-color: #638C9C;">{TEXT}</div> </div>

Help Line:

Code: Select all

[note]Text Here[/note]

Warn Info
BBCode usage:

Code: Select all

[warninfo]{TEXT}[/warninfo]

HTML replacement:

Code: Select all

<div style="width:100%"> <div style="font-style:italic; color: black;margin: 3px auto 0px auto; font-weight: bold; font-size: small; padding: 3px; background-color: #FFc6c6; border-left: 4px solid #DFDF00; border-top: 1px solid #FFFF99; border-right: 1px solid #FFFF99; color: #CC3300; border-top-color: #990000; border-right-color: #990000; border-left-color: #990000"> <img src="./images/warnsmall.png" width="20" height="20" style="background-position: 0 50%;" alt="warning" />&nbsp;&nbsp; Warning</div> <div style="padding: 4px; background: #FEEBEF right bottom; border-left: 4px solid #DFDF00; border-right: 1px solid #FFFF99; border-bottom: 1px solid #FFFF99; margin: 0px auto 8px auto; background-position: right bottom; border-right-color: #990000; border-bottom-color: #990000; border-left-color: #990000;">{TEXT}</div> </div>

Help Line:

Code: Select all

[warninfo]Text Here[/warninfo]

Tip
BBCode usage:

Code: Select all

[tip]{TEXT}[/tip]

HTML replacement

Code: Select all

<div style="width:100%"> <div style="font-style:italic; color: #996633; font-size:x-small;margin: 8px auto 0px auto; font-weight: bold; font-size: small; padding: 5px; background-color: #FFF2AA; border-left: 4px solid #DFDF00; border-top: 1px solid #FFFF99; border-right: 1px solid #FFFF99; border-top-color: #CACA00; border-right-color: #CACA00; border-left-color: #CACA00;"> <img class="inlineimg" src="./images/tipsmall.png" width="20" height="16" style="background-position: 0 50%;" alt="Tip" />&nbsp;&nbsp; Tip</div> <div style="padding: 4px; background-position: right bottom; background: #FFFFE1 right bottom; border-left: 4px solid #DFDF00; border-right: 1px solid #FFFF99; border-bottom: 1px solid #FFFF99; margin: 0px auto 8px auto; border-right-color: #CACA00; border-bottom-color: #CACA00; border-left-color: #CACA00;">{TEXT}</div> </div>

Help Line

Code: Select all

[tip]Text Here[/tip]

Demo Link: http://phpbb3addons.com/viewtopic.php?f ... p=129#p129


Images uploades to /images folder

Images.rar

[Steve]

moved to submit a bbcode!
fire-fox have you got a demo link?

[Fire-Fox]

I have Demo Pictures?

Demo Link: http://phpbb3addons.com/viewtopic.php?f ... p=129#p129

[Stoker]

Looks great

[Fire-Fox]

Thanks

[Steve]

just a couple of things the img src path is not correct you need to use:

Code: Select all

src="./images/blah.png

and the html is not really valid, try using a background position instead of align

Code: Select all

ALIGN="absmiddle"

try using:

Code: Select all

style="background-position: 0 50%;"

scrap that decided to make it html valid because i like it also ( stoker )
here:

Code: Select all

    <div style="width:100%"> <div style="font-style:italic; color: black;margin: 3px auto 0px auto; font-weight: bold; font-size: small; padding: 3px; background-color: #CEF2E0; border-left: 4px solid #DFDF00; border-top: 1px solid #FFFF99; border-right: 1px solid #FFFF99; color: #003300; border-top-color: #A3BFB1; border-right-color: #A3BFB1; border-left-color: #A3BFB1"> <img src="./images/infosmall.png" width="20" height="20" style="background-position: 0 50%;" alt="information" />&nbsp;&nbsp; Information</div> <div style="padding: 4px; background: #F5FFFA right bottom; border-left: 4px solid #DFDF00; border-right: 1px solid #FFFF99; border-bottom: 1px solid #FFFF99; margin: 0px auto 8px auto; background-position: right bottom; border-right-color: #A3BFB1; border-bottom-color: #A3BFB1; border-left-color: #A3BFB1;">{TEXT}</div> </div>

[info]test[/info]

Code: Select all

    <div style="width:100%"> <div style="font-style:italic; color: #000066; font-size:x-small;margin: 2px auto 0px auto; font-weight: bold; font-size: small; padding: 5px; background-color: #CEDFF2; border-left: 4px solid #42A1DF; border-top: 1px solid #BDD6E6; border-right: 1px solid #BDD6E6; border-top-color: #638C9C; border-right-color: #638C9C; border-left-color: #638C9C;"> <img class="inlineimg" src="./images/notesmall.png"  width="20" height="16"  style="background-position: 0 50%;" alt="Note" />&nbsp;&nbsp; Note</div> <div style="padding: 4px; background-position: right bottom; background: #F5FAFF right bottom; border-left: 4px solid #42A1DF; border-right: 1px solid #BDD6E6; border-bottom: 1px solid #BDD6E6; margin: 0px auto 8px auto; border-right-color: #638C9C; border-bottom-color: #638C9C; border-left-color: #638C9C;">{TEXT}</div> </div>

[note]tested[/note]

Code: Select all

    <div style="width:100%"> <div style="font-style:italic; color: black;margin: 3px auto 0px auto; font-weight: bold; font-size: small; padding: 3px; background-color: #FFc6c6; border-left: 4px solid #DFDF00; border-top: 1px solid #FFFF99; border-right: 1px solid #FFFF99; color: #CC3300; border-top-color: #990000; border-right-color: #990000; border-left-color: #990000"> <img src="./images/warnsmall.png" width="20" height="20" style="background-position: 0 50%;" alt="warning" />&nbsp;&nbsp; Warning</div> <div style="padding: 4px; background: #FEEBEF right bottom; border-left: 4px solid #DFDF00; border-right: 1px solid #FFFF99; border-bottom: 1px solid #FFFF99; margin: 0px auto 8px auto; background-position: right bottom; border-right-color: #990000; border-bottom-color: #990000; border-left-color: #990000;">{TEXT}</div> </div>

[warninfo]testeringtest[/warninfo]

snipp.PNG

[Fire-Fox]

Thank you.

Updated the first post

[Fire-Fox]

Added one mote "Tip"
should be html valid