Shield-Smilie as BB-Code without Hacking!

All cried for this... OK. Noe I release it herer too.

No Hacking required for this.

Take the following Image and following BBCode:

Title: Schield

Tag: schield (or whatever you want)

Replacement:

<table border="0" cellspacing="0" cellpadding="0">

<tr>

    <td align="center" style="background-color: White; border: 1px solid Black; padding: 1px;"><normalfont>{param}</normalfont></td>

</tr>

<tr><td align="center">

<img src="absolut/path/to/your/image.gif" alt="" border="0">

</td></tr>

</table>

Use Option: No

Works on vB2 and vB3

If you want more than one Image use the Option tag and name the Images to schield1.gif etc. and use Filepath shield{option}.gif

Than call with [ schield=1]test[/shield]

I attached a Smilie.

Have fun.

[imported_seraphex]

Well after some work I have this.. Anyone know how I can pass the option through so people don't have to type it in. Here's the code I'm using.. I don't know if it's correct or not but it works for me. It prompts for the option but I want it to just automatically fill it in onclick.

<a href="#" onclick="return vbcode('banner', 'xxxxxx', 'xxx')"><img class="image" src="images/smilies/bannerwink.gif" alt="[banner=wink]text[/banner]" border="0" /></a> wink

[dwh]

I love this. It is amazing and clever idea. But

Originally Posted by Hoffi

If you want more than one Image use the Option tag and name the Images to schield1.gif etc. and use Filepath shield{option}.gif

Than call with [ schield=1]test[/shield]

huh?

Another thing, you can make a smilie button but you have make it a bit smaller and then it will be clickable.

Does anyone have some gifs of other alternatives?

[mindbuster]

Originally Posted by wintermute

if you want to change the font to bold, blue, comic sans:

 
<td align="center" style="background-color: none; border: 1px solid Black; padding: 1px;"><b> <font face="Comic Sans"; color=blue>{param}</font></b></td>

I had to use "Comic Sans MS" for it to work, but thanks anyway

And thanks to the author

[mindbuster]

Rounded corners version with "Comic Sans MS" font.

PHP Code:

<table border="0" cellspacing="0" cellpadding="0">
<div style="margin: 0 4px 0 4px; padding:0; border: solid 1px #000; background-color:White; z-index:1;">
<div style="margin: 0 -2px 0 -2px; padding:1px; border-left: solid 1px #000;border-right: solid 1px #000; background-color:White; z-index:2;">
    <div style="margin: 0 -3px 0 -3px; padding:1px; border-left: solid 1px #000;border-right: solid 1px #000; background-color:White; z-index:3;">
     <div style="margin: 0 -3px 0 -3px; padding:1px; border-left: solid 1px #000;border-right: solid 1px #000; background-color:White; z-index:4;">
        <div style="margin: 0 -3px 0 -3px; padding: 0 4px 0 4px; border-left: solid 1px #000; border-right: solid 1px #000; background-color:White; z-index:5;">
<div align="center" style="background-color: White; "><b><font face="Comic Sans MS"; color=black>{param}</font></b></div>
    </div>
     </div>
    </div>
</div>
</div>
<tr><td align="center"> 
<img src="path/to/your/image.gif" alt="" border="0">
</td></tr>
</table> 


Example attached

[ChrisSy]

I cant get the image to show up, i have double checked my absolute path

[KW802]

Very nice. Needs TD & TR tags in the first row though.

Originally Posted by MindBuster

Rounded corners version with "Comic Sans MS" font.

PHP Code:

<table border="0" cellspacing="0" cellpadding="0">
<div style="margin: 0 4px 0 4px; padding:0; border: solid 1px #000; background-color:White; z-index:1;">
<div style="margin: 0 -2px 0 -2px; padding:1px; border-left: solid 1px #000;border-right: solid 1px #000; background-color:White; z-index:2;">
    <div style="margin: 0 -3px 0 -3px; padding:1px; border-left: solid 1px #000;border-right: solid 1px #000; background-color:White; z-index:3;">
     <div style="margin: 0 -3px 0 -3px; padding:1px; border-left: solid 1px #000;border-right: solid 1px #000; background-color:White; z-index:4;">
        <div style="margin: 0 -3px 0 -3px; padding: 0 4px 0 4px; border-left: solid 1px #000; border-right: solid 1px #000; background-color:White; z-index:5;">
<div align="center" style="background-color: White; "><b><font face="Comic Sans MS"; color=black>{param}</font></b></div>
    </div>
     </div>
    </div>
</div>
</div>
<tr><td align="center"> 
<img src="path/to/your/image.gif" alt="" border="0">
</td></tr>
</table> 


Example attached

[Hoffi]

You should not use the Font-Tag! This ist not XHTML compilant. Use this

<div style="font-family: "Comic Sans"; font-weight: bold;">{param}</div>

[KW802]

Hoffi, what would be needed to your chance to get the text color back to black?

Thanks,
Kevin

[Hoffi]

OK, a small tutorial for CSS.

Take this div-Tag for the one in the Middle which includes the {param}. All Font-formatting can be done with this.

<div align="center" style="background-color: White;  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  font-size: small;  font-style: normal;  font-weight: bold;  font-variant: small-caps; color: black;">{param}</div>

alternative:
Enter a new Class in the Additinal Style-Settings called this.

.shield { background-color: White;  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  font-size: small;  font-style: normal;  font-weight: bold;  font-variant: small-caps;  color: black;    }

and use this div tag.

<div class="shield">{param}</div>

Description of the used Flags:
background-color: OK, I think no explanation necessary
font-family: The Font or Font-Family you want to use. You can enter more than one Font like in my demo. For higher compatibility use fonts which are installed on any OS and Include serif, sans-serif or monospace.
font-size: The Size you wanr to use. You can use hier absolute Size like 10pt oder 12px, or you can use words like smaller or bigger. just test around what fits perfectly in your design.
font-style: normal or italic.
font-weight: normal, bold, bolder, lighter. In normal case normal and bold are the only differences.
font-varian: normal or small-caps.
color: The Font color you want to use. You can enter names Colors or hex-Numbers like #000000 for black.

additinal entrys that can be interesting:
text-decoration: underline, overline, none or line-through
text-transform: uppercase, lowercase, capitalize or none
letter-spacing: eg. 5px

you also may add a background-Image to the Shield if you insert the following into the div-tag.
background-image: url(path/to/bgfile.gif);

I hope this helps you.

[venomx]

Originally Posted by KW802

Very nice. Needs TD & TR tags in the first row though.

Can you paste the code with the missing TD and TR?