Shield-Smilie as BB-Code without Hacking! [Archive]

Hoffi

06-29-2004, 10:00 PM

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.

marcel-ea

06-30-2004, 07:45 PM

very nice no problems

edit: You have a idea to built a button in the wysiwyg editor ?

Hoffi

07-01-2004, 11:01 AM

in vB3 just add a graphic.
in vB2 i have no Idea.

Alzeimer

07-01-2004, 04:11 PM

Great, Installed, Thanks!!

imported_infernonet

07-01-2004, 06:31 PM

Nice hack :) Good Work

j_86

07-01-2004, 07:06 PM

What does it do? :)

imported_infernonet

07-01-2004, 07:27 PM

You write a message in between [schield=1]test[/shield] and it shows a little smile with a banner with your custom message :D

imported_infernonet

07-01-2004, 07:28 PM

replace 'test' with the what you want on the banner but it isnt installed on vBT so it wont work here.

Hoffi

07-01-2004, 07:49 PM

Here is a Screenshot how it could be shown up in your Post.

You also can change the colors you want to. Just set them in the Style-Tag to something you want.

In this shield the Users cal also use any other BB-Code to make very customs shields.

imported_infernonet

07-01-2004, 07:51 PM

Hehe cool :) can you add another smile in the banner box?

Hoffi

07-01-2004, 08:42 PM

I have posted in the first post how to use different Smilies for the Banner. Juts user option.

Erwin

07-02-2004, 02:44 AM

Too cool. :)

Brad

07-02-2004, 05:35 AM

Very Nice! :)

Reeve of shinra

07-04-2004, 05:49 AM

I dig this one. thanx

Natch

07-06-2004, 02:05 AM

You could extend this to have a textured background on the banner as well -

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

<tr>

<td align="center" style="background: White url(/path/to/your/texture.gif); 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>

Yapluka

07-06-2004, 01:00 PM

Very nice mod ! Thanks, my users love it !

KW802

07-12-2004, 03:53 AM

Very cool! Thank you.

ap0c

07-12-2004, 08:29 AM

odd....bbcode is on, but it's not working for me

KW802

07-12-2004, 10:19 AM

odd....bbcode is on, but it's not working for me
If you have options turned off you don't need the "=1" part of the command.

Hoffi

07-12-2004, 11:59 AM

Yes. Remove the =1 in the Sample or add the fully functionality for more than one Smilie I described. Then you must use "option".

KW802

07-12-2004, 12:10 PM

So, just out of curiousity :D ....... what are some example smilies that you guys & gals are using other than the one provided?

ap0c

07-12-2004, 03:12 PM

that did it, thanks

tnguy3n

07-12-2004, 10:12 PM

So, just out of curiousity :D ....... what are some example smilies that you guys & gals are using other than the one provided?

This two are of danasoft.com seem to work fine with this bbcode. :D :p

jugo

07-22-2004, 05:27 PM

I am definitely loving this!!!

Littlebit

07-23-2004, 08:41 PM

Just neat! Thank you for sharing this. :)

Romeos Tune

08-07-2004, 06:03 PM

I guess I'm dumb today.... I'm having problems with the options coding. What exactly is it.... I have several images to add and they are showing up but it's for some reason showing every image under the once chosen.

I have:

<option>path to smilie.gif</option>

Anyway, what exactly is the code I'd use for 20 different smilies? an example of 2 would do..... ;) Thanks!

Ok..... Never mind this one.....I got it figured out.....Now if I can figure out the font color part to default to black, bold, and comic sans ms.....

Romeos Tune

08-07-2004, 06:05 PM

btw..... at http://stormchat.com/ubbthreads you can see an example of another smilie generator or "Panel Generator" as it's called there.

Log in as "test" password "test" and reply to a message... Not using quick reply... Use the actual reply button. Then look at the smilies and click on "Panel Generator". Think anyone could code this to work with VB??

Romeos Tune

08-07-2004, 11:07 PM

For some reason it won't lemme edit that post to make part of it bold...... How about some help here? What code can I add and where can I place it so that the font is comic sans ms, bold, and the color is blue or black? I've tried about everything and no luck...... Anyone?

MrToasty

08-08-2004, 11:33 AM

Far out!
That panel generator r0x0rs...!!

Hoffi

08-08-2004, 12:19 PM

Use any BB-Code inside the shield like [b] and any other you like. Other Smilies, etc.

The Panel Generator ist not m< choice, because it generates Images, I think it will the same work like in the wbb2 Hack, so every Panel ist new created while visiting the Thread. The Performance for this is very High!

Maybe I might look for a way to build a HTML Panel on this way, but in the Moment I have no time for such nice2have features. ;)

Romeos Tune

08-08-2004, 04:05 PM

Actually, the images are created on the fly and it uses no more queries than the vbcode trick not to mention it's really easy for our computer challenged folks.... lol Let's hope we can get it working with VB....... :D

Hoffi

08-08-2004, 08:47 PM

No more Querys, yeah. But during my teste the image creation was really slow if you have Many Images into one Thread. And mostly this is used in Sugnatures, so it is on every site.

I only tell you what I figured out on my Board. ;)

Romeos Tune

08-09-2004, 01:16 AM

The image is only created once and stored on the server..... Sorry for the confusion.... And they aren't created in sigs.... Also, you can limit the groups so only the donating members were able to use it when that board was operational........ :D

Hoffi

08-09-2004, 06:27 AM

OK, than thats new and very better. ;)

Matrixgl

08-09-2004, 06:30 AM

This is just brilliant! Kudos to you!

imported_Spieleplanet

08-10-2004, 04:22 AM

very kool .. installed!

aranthorn

08-29-2004, 01:57 AM

I'll say it again, nice hack/share/whatever you want to call it.

As far as changing the color of the font, etc. I use dark and light styles on my site, so I made the background clear

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

<tr>

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

</tr>

<tr><td align="center">

<img src="http://www.dancingmokey.com/******/sign.gif" alt="" border="0">

</td></tr>

</table>

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

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

<tr>

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

</tr>

<tr><td align="center">

<img src="http://www.dancingmokey.com/******/sign.gif" alt="" border="0">

</td></tr>

</table>

venomx

09-06-2004, 06:05 AM

Ok I am confused... Does the Shield-Smilie BB-Code create the images on the fly each time someone opens the thread/post? If so I am not sure I want to install this.. :(

KW802

09-06-2004, 02:17 PM

Ok I am confused... Does the Shield-Smilie BB-Code create the images on the fly each time someone opens the thread/post? If so I am not sure I want to install this.. :(VenomX,

No, it doesn't create the images on the fly. What it does is create a table with the text that the person typed in with a border and then the single image is centered at the buttom of the table to give the illusion that it's a graphic smilie created on the fly.

Kevin

lanoix

10-05-2004, 07:53 AM

Thank you for this hack, I will use it...

Edit: a little tip... To have the banner centered with the smiley... Simply put a blank space on its left. The size must be the same size of the smiley (excluding the banner/arm). I attach an example... I think it's better... It gives also automaticaly a minimal size of banner :)

imported_seraphex

10-07-2004, 07:37 PM

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="text" border="0" /></a> wink

dwh

01-10-2005, 12:58 AM

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

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

01-20-2005, 09:13 AM

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 :D

And thanks to the author ;)

mindbuster

01-20-2005, 02:15 PM

Rounded corners version with "Comic Sans MS" font.

<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

02-02-2005, 11:16 AM

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

KW802

02-03-2005, 11:46 PM

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

Rounded corners version with "Comic Sans MS" font.

<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

02-07-2005, 08:58 PM

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

02-08-2005, 04:50 AM

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

Thanks,
Kevin

Hoffi

02-08-2005, 08:26 AM

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

03-21-2005, 05:23 AM

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

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

KW802

03-21-2005, 02:03 PM

Can you paste the code with the missing TD and TR?Huh? The post that you quoted me above in has the code in question in it.

venomx

03-22-2005, 02:44 PM

When I used it and did a test post then looked at my vBadvanced CMPS the right colum was dropped way down and into the center one. :(

Hoffi

05-17-2005, 07:56 PM

Wich Code did you use? the one in the first Post or some other?

venomx

05-17-2005, 08:01 PM

One of the ones above. The original works. :)

stan111

09-19-2005, 01:07 PM

kool little hack
thanks a ton

ambumann

09-19-2005, 08:28 PM

Will this work in 3.5 as well? I only get the textbox, not the smilie..

Clayton

09-26-2005, 08:25 PM

sketch42

09-26-2005, 08:36 PM

Hi there

I have tried this and got this to work with 1 smilie, I even added the option so that it showed up in the WYSIWYG

however, in trying to understand this

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]

could anyone please add some light to this, to make it more understandable for me, please

Much appreciated

C

sure its simple

if you notice when you make a bbcode it asks you whether or not you want to enable the option.

select yes

next when you goto name your multiple files your going to give them the name schield1.gif or schield2.gif

whatever text or number or whatever you put after the word schield is what you will enter when posting a message

so if i g=have 3 pictures im using and i named them schieldtest.gif than i would input [schield=test]My text[schield]

Clayton

09-27-2005, 03:44 AM

thanks Sketch

will give this a try, have a vague idea what to try and will see how it comes out

Thanks

C

edit: this is what I have tried .. the code

<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="hxxp://www.yourdomain.name/forum/images/smilies/schield{option}.gif" alt="" border="0"></td></tr> </table>

This worked in providing the changeable option with 1 image in the WYSIWYG

however how do I add the extra image to the panel .. I loaded one image to where it says:
Button Image (Optional) If you would like this bbcode to appear as a clickable button on the message editor toolbar, enter the URL of an image 21 x 20 pixels in size that will act as the button to insert this bbcode.

trying to figure out how to add 2 images there, presently I have:
hxxp://www.yourdomain.name/forum/images/smilies/schield1.gif

Ghanem

10-19-2005, 05:45 PM

Crapaddict

10-26-2005, 02:41 PM

hi.

I am sory I got confused..

can some one post it to show:
1) more than one schield we can click to select from (like the smilies)
2) after selecting it a popup will appear asking to put the text

and thats it..

regards.
Both easy:
1) use the {option} for the actual imagename:
<img src="path/to/imagename{option}.gif">
This way users can specify the option wich directly refers to the name.
This way you can't call the images 'happysmile.gif', 'frowningface.gif' etc... but give them numbers: 1.gif, 2.gif etc... or perhaps 'shield1.gif', 'shield2.gif' etc...

2) just specify a 'Button Image' in your bb-code editor for usage with this tag.
this image will be put next to the other images in your editbox.
When clicked it will popup a inputbox for the text, followed by (if you chose to use {option} for this tag) a inputbox asking for the option, in your case the number for the sign.

davidw

11-09-2005, 05:35 PM

<font color="Green">* christianb clicks install</font>

Ghanem

12-09-2005, 07:01 AM