This Wraps your forum in a cool tittle wrap.
demo:
http://rpgamer.prohosts.org/forum/index.phpplace in headers:
<!-- =========================
Begin Forum Wrapper with xtra
smilies
=========================--> <center> <font size="1"><b><BR><BR><br><br></center>
</span></div></div>
<center><div class='titlebg2'>Admin</div>
<div class="tablepad"><span class='desc' ><font size="1">
<a href="http://rpgamer.prohosts.org/forum/index.php?action=profile;u=1">nitsua </a><br>
</font><br><br>
</span></div></div>
<center>
<div class="titlebg2">smiley's</div>
<div class="tablepad"><span class='desc' >
<a name="smileys">
<SCRIPT type="text/javascript" language="javascript">
<!-- // Hide code via emoticon
function getSelection() {
var selection= document.sm.output.selectedIndex;
return selection;
}
function smile(swert) {
var selection= getSelection();
if (selection == 0) {
var output= '[img]'+swert+'[\/img]';
} else if (selection == 1) {
var output= swert;
} else if (selection == 2) {
var output= '[image]'+swert+'[\/image]';
}
document.sm.wert.value= output;
document.sm.wert.select();
}
function changeOutput() {
var output= document.sm.wert.value;
if (output.indexOf('[img]') != -1) {
var output= output.substring(output.indexOf('[img]')+5,output.indexOf('[\/img]'));
} else if (output.indexOf('[image]') != -1) {
var output= output.substring(output.indexOf('[image]')+7,output.indexOf('[\/image]'));
} else if (output == "Click on smiley for the code") {
var output= "";
}
smile(output);
}
// Stop hide -->
</SCRIPT>
<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
<TABLE width="200px" class="tborder">
<tr>
<td class="catbg">
<center><a href="#smileys" onClick="toggle_it('pr1')"> show <img src="http://i102.photobucket.com/albums/m105/mysmileyplace/smileydropdown.gif"> hide </a></center></td>
</tr>
</table>
<DIV style="
position: absolute;
z-index: 2;
visibility: show;">
<table class="tborder" width="200px" id="pr1" style="display:none;" align="left" border="0">
<tr>
<td align="left" class="windowbg2">
<FORM name="sm"><small>Left click smiley. Right click box to copy code. Paste to Message.<BR /><BR />
<INPUT type="text" size="22" name="wert">
<SELECT name="output" onChange="changeOutput()">
<OPTION value="ubb1" selected>img</OPTION>
</SELECT>
</FORM>
</td>
</tr>
<tr>
<TD class="windowbg2">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/miniboybye.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minispin.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minigirlbyebye.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minicry.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minisnore.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/miniboywinky.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/undecided.gif" onClick="smile(this.src);">
</td>
</tr>
<tr>
<TD class="windowbg2">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minigirlcrazyeyes.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minigirlwinky.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minidance.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/smelly_mini.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/mini_search_sky.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/cool.gif" onClick="smile(this.src);">
</td></tr><tr>
<TD class="windowbg2">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/kitty.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/smiley.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/huh.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/miniangeldevil.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minigoof.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/lipsrsealed.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/tongue-1.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/buck2.gif" onClick="smile(this.src);">
</td>
</tr>
<tr>
<TD class="windowbg2">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/miniboycry2.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/miniboytongue.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/minirofl.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/kitty.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/sad.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/smiley.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/babyduck.gif" onClick="smile(this.src);">
</td>
</tr>
<tr>
<TD class="windowbg2">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/pinnochio.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/running2.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/nutzo2.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/oldman_glasses.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/smelly.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/searchingsky.gif" onClick="smile(this.src);">
</TD>
</TR>
<TR>
<TD class="windowbg2">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/sniff.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/angeldevil.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/malesnore.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/boy_cleanglasses-1.gif" onClick="smile(this.src);">
<IMG src="http://i102.photobucket.com/albums/m105/mysmileyplace/explosion.gif" onClick="smile(this.src);">
</TD>
</TR>
<TR>
<TD class="windowbg">
<small>smileys by connie
</td>
</tr>
</tr>
</TABLE>
</div>
</a>
<!-- =========================
end Forum Wrapper with xtra
smilies
=========================-->
to make an image the background add this to the bottom of your theme:
.tablepad
{
background-image: url(YOUR IMAGE URL HERE);
padding:6px;
border:1px solid #FFFFFF;
}
replace "YOUR IMAGE URL HERE" with the url to your image.
To make it a color place this in the bottom of your theme:
.tablepad { background-color:#FFFFFF; padding:6px; border:1px solid #000000; }
Change FFFFFF to the background color you want
Replace 000000 with the border color you want.
modify the code:
<a href="http://rpgamer.prohosts.org/forum/index.php?action=profile;u=1">nitsua </a>
with your admin url and name
credits: Roswenth: for starting it with the sidebar.
simply sibyl: for making the CSS's, and for making the extra smileys code.
me: for giving it extra touches.
have fun!
any problems? ask me!