XtGem.com

This simple tutorial will help you to learn how to modify a cbox form from www.cbox.ws.

Objective:

• Provide your own cbox form with your own Avatar select box.

Requirements:

• A cbox account, you must register at www.cbox.ws to get one.

• A blogsite, forumsite, website or wapsite - because if you have no any site, where would you place your cbox?

Instructions

First, you must logged in to your Cbox account. At your Control Pannel, click Options > Posting options > then browse at the bottom page, look for the "Message options" part and mark these boxes:

Messages options
Email / URL field*
boxCode
Allow avatars

Then click "Save" button. This is to allow posting messages with Avatars.

Next, click Publish! link, and locate to Step 3. Get your code - and copy your cbox code.

Default Cbox Code

Now, here's the default cbox html code:

HHHHHH =your boxid
ZZZZZZ =your box tag

Item to Modify

Cbox has two <iframe>tags (see the code above),one that is in gray<iframe> tagis for cboxmain to displaythe lists of messages, andthe blue<iframe> tagis for cboxform which actually display the form and enables the users topost a message on yourcbox, which will be look like this:
[Get a Cbox]refresh

help· smilies· cbox

Modified Cbox Form

And here's the <form> tag we are going to use:

<div
style="padding:2px;"
class="full"><form
name="cboxform6-HHHHHH"
target="cboxmain6-
HHHHHH" action="http://
www6.cbox.ws/box/?
boxid=HHHHHH&boxtag=ZZZZZZ&sec=submit"
method="post"
onsubmit="return do_post
();" style="text-
align:center;"><a
href="http://www.cbox.ws/"
target="_blank" title="Get
Cbox"></a><input
type="hidden" name="key"
value=""/><table
width="100%" border="0"
align="center"
cellspacing="0"
cellpadding="0"
style="background:0; text-
align:center;"><tr
style="background:0;
padding:0;"><td
width="45%" style="text-
align:left; width:; border:0;
padding:0; padding-
right:2px;
background:0;"><input
type="text"
maxlength="25"
name="nme"
autocomplete="off"
style="width:100%;"
value="name"
onfocus="name"/></td><td
width="55%" style="text-
align:left; border:0;
background:0; padding:0;
padding-right:0;"><select
name="eml"
style="width:100%;"><option
value="http://image.url/
avatar1.png">Avatar 1</option><option
value="http://image.url/
avatar2.png">Avatar 2</option><option
value="http://image.url/
avatar3.png">Avatar 3</option><option
value="http://image.url/avatar4.png">Avatar 4</option></select></td></tr></table>
<table width="100%"
border="0" align="center"
cellpadding="0"
cellspacing="0"
style="background:0;margin-
top:2px; text-
align:center;"><tr
style="background:0;
padding:0;"><td width=""
style="text-align:left;
width:; border:0; padding-
right:2px;
background:0;"><input
name="pst" type="text"
style="width:100%;"
value="message"
onfocus="message"/></td><td border="0"
width="30px"
style="border:0; text-
align:right; padding-
right:;"><input
type="submit" name="sub"
value="Post"
style="margin-right:;"/></td></tr></table><div
style="text-align:right;"><a
href="http://www6.cbox.ws/box/?boxid=HHHHHH&boxtag=ZZZZZZ&sec=smilies"
target="_blank">smilies</a>
<b>·</b> <a
href="javascript:history.go
(0)">refresh</a> <b>·</b>
<a href="http://www6.cbox.ws/box/?boxid=HHHHHH&boxtag=ZZZZZZ&sec=help"
target="_blank">help</a></div></form></div>

Note:

• For HHHHHH value change it with your own boxid and for ZZZZZZ value change it with your own boxtag.

• Also, pay much attention from this line at form action and links http:// www6.cbox.ws/box/? boxid. Sometimes it's http://www2.cbox.ws/box/? boxid whatever depending on code generated by cbox for you, so use what's you have cause it may results an installation error if you use wrong url. The same thing as >
name="cboxform6-HHHHHH"
target="cboxmain6-HHHHHH"

• For <option value="http://image.url/ avatar1.png">Avatar 1</option> change http:// value to your own image url you want to select as an Avatar, you can add as many as you want and edit "Avatar 1" to your Avatar description.

• You can place the form either above or below the message list, but I recommend to put this form above messages, this may make more sense with Post order set to "Newest at top".

Suggested Avatars

If you don't have an images to insert at your <select> tag, feel free to use my suggested Avatars:

<select
style="width:100%;"
name="eml">
<option value="http://
weezywap.xtgem.com/Pic/
nophoto.png"
selected="selected">--
Choose Avatar--</option>
<option value="http://
weezywap.xtgem.com/Pic/
fbfemale.png">Female (fb)</
option>
<option value="http://
weezywap.xtgem.com/Pic/
fbmale.png">Male (fb)</
option>
<option value="http://
weezywap.xtgem.com/Pic/
gblue.png">Gel-man
(blue)</option>
<option value="http://
weezywap.xtgem.com/Pic/
gyellow.png">Gel-man
(gold)</option>
<option value="http://
weezywap.xtgem.com/Pic/
ggreen.png">Gel-man
(green)</option>
<option value="http://
weezywap.xtgem.com/Pic/
gorange.png">Gel-man
(orange)</option>
<option value="http://
weezywap.xtgem.com/Pic/
gred.png">Gel-man (red)</
option>
<option value="http://
weezywap.xtgem.com/Pic/
gsilver.png">Gel-man
(silver)</option>
<option value="http://
weezywap.xtgem.com/Pic/
Adore.png">Adore</option>
<option value="http://
weezywap.xtgem.com/Pic/
Amazed.png">Amazed</
option>
<option value="http://
weezywap.xtgem.com/Pic/
Angry_Bird.png">Angry
Bird</option>
<option value="http://
weezywap.xtgem.com/Pic/
boss.png">Big Boss</
option>
<option value="http://
weezywap.xtgem.com/Pic/
Hated.png">Bricked</
option>
<option value="http://
weezywap.xtgem.com/Pic/
cold.png">Cold</
option><option
value="http://
weezywap.xtgem.com/Pic/
devil.png">Devil</option>
<option value="http://
weezywap.xtgem.com/Pic/
dllr.png">Dollar Eyes</
option>
<option value="http://
weezywap.xtgem.com/Pic/
eat.png">Eat</option>
<option value="http://
weezywap.xtgem.com/Pic/
Electrified.png">Electrified</
option>
<option value="http://
weezywap.xtgem.com/Pic/
steel.png">Ironman</
option>
<option value="http://
weezywap.xtgem.com/Pic/
haha.png">Laugh Out
Loud</option>
<option value="http://
weezywap.xtgem.com/Pic/
Lovestruck.png">Lovestrucked</
option>
<option value="http://
weezywap.xtgem.com/Pic/neo.png">Matrix</option>
<option value="http://
weezywap.xtgem.com/Pic/Firefox.png">Mozilla</option>
<option value="http://
weezywap.xtgem.com/Pic/suave.png">Mr. Suave</option>
<option value="http://
weezywap.xtgem.com/Pic/nbleed.png">Nosebleed</option>
<option value="http://
weezywap.xtgem.com/Pic/Headache.png">Plastered</option>
<option value="http://
weezywap.xtgem.com/Pic/joss.png">Pray</option>
<option value="http://
weezywap.xtgem.com/Pic/yo.png">Rapper</option>
<option value="http://
weezywap.xtgem.com/Pic/crysad.png">Sad Cry</option>
<option value="http://
weezywap.xtgem.com/Pic/spidy.png">Spiderman</option>
<option value="http://weezywap.xtgem.com/Pic/upup.png">Superman</option></select>

Outcome:

You may remove and select Avatars that you are only wanted to use, it's all yours.

Editing Cbox Styles

To change you cbox form colors and styles, copy/ paste this code at your page where you want your cbox to appear, and edit as you want.

And that's all, you're done. . .

Privacy	About	Tearms
Contact	Report	Advertise
Forum	Home	Facebook

[Get a Cbox]	refresh