Step 1)
Open up the ubbc.js file. This is the file that inserts the proper smiley code when you click a smiley face button. The smiley section starts at this section of code:
[code]function smiley() { AddTxt=" :)"; AddText(AddTxt); }[/code]
For the purpose of this tutorial, we'll be adding a smiley face named "crazy.gif".
First, somewhere in ubbc.js, add this (it would make sense to add it close to the other smilies, most likely at the end):
[code]function crazy() { AddTxt=" $)"; AddText(AddTxt); }[/code]
We're gonna be calling on this javascript function later, so make sure its name is two things: unique and relevant to what you are using it for (ie, function crazy for adding the crazy.gif smiley). For this smiley face, we'll be using the characters $) to call it in the message, in case you hadn't already figured that out. =)
Okay, close up ubbc.js and save it, you're all done with that file.
Step 2)
Open up Subs.pl and find the section called "sub MakeSmileys"
This is the section that searches for strings you define and replaces them with the appropriate smiley face. You will need to know a little bit about regular expressions in perl for this part. Just for an example, this line is the section of code that replaces the text :) in your message with a normal smiley face picture:
[code] $message =~ s/\Q:)\E/\<img src=$imagesdir\/smiley\.gif\>/g; [/code]
In this tutorial, we're adding the smiley crazy.gif using $) for the text characters, so we'll add this line to the sub MakeSmileys:
[code] $message =~ s/\Q$)\E/\<img src=$imagesdir\/crazy\.gif\>/g; [/code]
Certain characters made need to be "escaped" with a backslash. Also, if you want to use > or < or the | symbols, you'll need to use > or < or | respectively. Just take a look at all the other lines of code in the sub MakeSmileys and use the trial and error method. You'll come up with a working combination sooner or later. =)
Okay, all done with Subs.pl. Save that sucker and close her up.
Step 3)
You're going to do this in three files: Post.pl, ModifyMessage.pl, and InstantMessage.pl
You'll find a big section of html code in each of these files that will look like this:
[code] document.write("<a href=javascript:smiley()><img src='$imagesdir/smiley.gif' align=bottom alt='$txt{'287'}' border='0'></a> "); document.write("<a href=javascript:wink()><img src='$imagesdir/wink.gif' align=bottom alt='$txt{'292'}' border='0'></a> "); document.write("<a href=javascript:cheesy()><img src='$imagesdir/cheesy.gif' align=bottom alt='$txt{'289'}' border='0'></a> "); document.write("<a href=javascript:grin()><img src='$imagesdir/grin.gif' align=bottom alt='$txt{'293'}' border='0'></a> "); document.write("<a href=javascript:angry()><img src='$imagesdir/angry.gif' align=bottom alt='$txt{'288'}' border='0'></a> "); document.write("<a href=javascript:sad()><img src='$imagesdir/sad.gif' align=bottom alt='$txt{'291'}' border='0'></a> "); document.write("<a href=javascript:shocked()><img src='$imagesdir/shocked.gif' align=bottom alt='$txt{'294'}' border='0'></a> "); document.write("<a href=javascript:cool()><img src='$imagesdir/cool.gif' align=bottom alt='$txt{'295'}' border='0'></a> "); document.write("<a href=javascript:huh()><img src='$imagesdir/huh.gif' align=bottom alt='$txt{'296'}' border='0'></a> "); document.write("<a href=javascript:rolleyes()><img src='$imagesdir/rolleyes.gif' align=bottom alt='$txt{'450'}' border='0'></a> "); document.write("<a href=javascript:tongue()><img src='$imagesdir/tongue.gif' align=bottom alt='$txt{'451'}' border='0'></a> "); document.write("<a href=javascript:embarassed()><img src='$imagesdir/embarassed.gif' align=bottom alt='$txt{'526'}' border='0'></a> "); document.write("<a href=javascript:lipsrsealed()><img src='$imagesdir/lipsrsealed.gif' align=bottom alt='$txt{'527'}' border='0'></a> "); document.write("<a href=javascript:undecided()><img src='$imagesdir/undecided.gif' align=bottom alt='$txt{'528'}' border='0'></a> "); document.write("<a href=javascript:kiss()><img src='$imagesdir/kiss.gif' align=bottom alt='$txt{'529'}' border='0'></a> "); document.write("<a href=javascript:cry()><img src='$imagesdir/cry.gif' align=bottom alt='$txt{'530'}' border='0'></a> "); [/code] Big, huh? Now, at right below the last line there, you're going to add this line:
[code] document.write("<a href=javascript:crazy()><img src='$imagesdir/crazy.gif' align=bottom alt='Crazy' border='0'></a> "); [/code] Notice that we call on the javascript function crazy() we made earlier in the ubbc.js file. Told you we'd find a use for it. =)
Do that in all three files. This sticks in the actual smiley face above the message area where you type/modify your message as a button that inserts the text " $)" into your message when you click it. The " $)" gets replaced by the picture crazy.gif in the actual message thanks to the line of code we put into the sub MakeSmileys in Subs.pl
Step 4)
Upload crazy.gif into your YaBBImages directory in binary mode. Upload Post.pl, ModifyMessage.pl, InstantMessage.pl, and ubbc.js in ASCII to their appropriate places on your server. You've now added a smiley face. Repeat as many times as necessary. Do not run with scissors. Price before tax, title, and license. DaveB does not claim responsibility for lost or misdirected entries, nor does DaveB claim responsibility for the creation of the universe, high gas prices, the media controversy surrounding John Rocker, or rising federal interest rates.
- DaveB http://www.davesworldzone.com
|