[Code + CSS] Thêm tùy chọn màu cho chữ kí

.signature {
color: #ffffff;
background-image: url('http://i52.servimg.com/u/f52/12/82/29/24/signat10.gif');
background-position: top center;
background-repeat: no-repeat;
clear: left;
line-height: 140%;
overflow: hidden;
width: 100%;
margin-top: 1.5em;
padding-top:1px;
padding-left:2px;
padding-bottom:35px;
}

{postrow.displayed.SIGNATURE}

<div class="signature">{postrow.displayed.SIGNATURE}</div>

{UCP_TABS}
{ERROR_MESSAGE}
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><th colspan="2">{L_CURRENT_PREVIEW_SIGNATURE}</th>
<tr>
<td class="row1" width="25%" height="130"><span class="gen">{L_SIGNATURE} :</span></td>
<td class="row2" width="75%" valign="bottom"><span class="postbody">{SIGNATURE_PREVIEW}</span></td>
</tr>
<tr>
<td class="row1"></td>
<td class="row2">{PROFILE_IMG} {PM_IMG} {EMAIL_IMG} {WWW_IMG} {ICQ_IMG} {AIM_IMG} {YIM_IMG} {MSN_IMG} {SKYPE_IMG}</td>
</tr>
</table>
<br /><br />
<form name="post" action="{S_PROFILE_ACTION}" {S_FORM_ENCTYPE} method="post">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><th colspan="2">{L_EDIT_SIGNATURE}</th>
<tr>
<td class="row1" width="25%"> </td>
<td class="row2" width="75%" align="center"> <span class='genmed'><input class='button' style='font-weight:bold; width: 50px' onclick='bbstyle(0)' type='button' id='addbbcode0' value='{L_BOLD}' accesskey='b'></span>
<span class='genmed'><input class='button' style='font-style:italic; width: 50px' onclick='bbstyle(2)' type='button' id='addbbcode2' value='{L_ITAL}' accesskey='i'></span>
<span class='genmed'><input class='button' style='text-decoration:underline; width: 50px' onclick='bbstyle(4)' type='button' id='addbbcode4' value='{L_UNDER}' accesskey='u'></span>
<span class='genmed'><input class='button' style='width: 50px' onclick='bbstyle(14)' type='button' id='addbbcode14' value='{L_IMG}' accesskey='p'></span>
<span class='genmed'><input class='button' style='text-decoration: underline; width: 50px' onclick='bbstyle(16)' type='button' id='addbbcode16' value='{L_LINK}' accesskey='w'></span>
<span class='genmed'><input class='button' style='font-weight:bold; width: 50px' onclick='bbstyle(36)' type='button' id='addbbcode36' value='C3'></span>
</tr>
<tr><td colspan=2 class="row1"><span class='gensmall'>Chọn màu cho chữ kí: <button onclick="bbfontstyle('[color=red]', '[ /color]');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">red</button>
<button onclick="bbfontstyle('[color=brown]', '[ /color]');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">brown</button>
<button onclick="bbfontstyle('[color=yellow]', '[ /color]');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">yellow</button>
<button onclick="bbfontstyle('[color=green]', '[ /color]');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">green</button></span>
<tr>
<td class="row1" width="25%" height="130"><span class="gen">{L_SIGNATURE} :</span><br />
<span class="gensmall">{L_SIGNATURE_EXPLAIN}<br />
<br />
{HTML_STATUS}<br />
{BBCODE_STATUS}<br />
{SMILIES_STATUS}</span></td>
<td class="row2" width="75%" align="center"><textarea class="post" name="message" rows="7" cols="60">{SIGNATURE}</textarea></td>
</tr>
<tr>
<td class="catBottom" colspan="2" align="center" height="28">
<input type="hidden" name="page_profil" value="signature">
<input type="hidden" name="mode" value="editprofile">
<input class="liteoption" type="submit" name="current" value="{L_CURRENT_SIGNATURE}">
<input class="liteoption" type="submit" name="preview" value="{L_PREVIEW}">
<input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}">
<input type="button" class="liteoption" VALUE="{L_RETURN_PROFILE}" onClick="location='{U_RETURN_PROFILE}'">
</td>
</tr>
</table></form>