Status![[Temp] View_Topic dọc ! Cũng ổn ! Tùy người =] Empty](https://2img.net/i/empty.gif)
_ Nó có cả cái Color picker nhé =] !
Demo: http://cafam.123.st/t834-topic
Demo: http://cafam.123.st/t834-topic
- Code:
<script src="http://scriptfm.googlecode.com/files/colpicker.js"></script>
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
_atc.cwait = 0;
$('.addthis_button').mouseup(function(){
if ($('#at15s').css('display') == 'block') {
addthis_close();
addthis_close();
}
});
});
//]]>
</script>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
<span class="gensmall bold">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
|
<script type="text/javascript">
//<![CDATA[
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
</span>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr align="right">
<td class="catHead" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN topicpagination -->
<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END topicpagination -->
{POLL_DISPLAY}
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<tr class="post">
<td class="alt1"{postrow.displayed.THANK_BGCOLOR} valign="top" width="15%"><br/>
<center><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><b><font size="3">{postrow.displayed.POSTER_NAME}</font></span><br />{postrow.displayed.POSTER_RANK}<br /><div style="background:
url(http://i1099.photobucket.com/albums/g397/thedarkraven20/user_offline-1.gif); height:
16px; width: 16px; border:
0px;">{postrow.displayed.ONLINE_IMG}</div>
<span class="postdetails poster-profile">
<br/>
<!-- BEGIN-----AVATA --><table cellSpacing="0" cellPadding="0" border="0" style="width:auto">
<td style="padding: 0px"><img src=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_01.png "></td>
<td style="padding: 0px" background=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_02.png "></td>
<td style="padding: 0px"><img src=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_03.png "></td>
</tr>
<tr>
<td valign="top" style="padding: 0px" background=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_04.png ">
<td style="padding: 0px; background-color: #ffffff" bgColor="#ffffff">
{postrow.displayed.POSTER_AVATAR}
</td>
<td style="padding: 0px" background=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_06.png "></td>
</tr>
<tr>
<td style="padding: 0px"><img src=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_07.png "></td>
<td style="padding: 0px" background=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_08.png "></td>
<td style="padding: 0px"><img src=" http://i440.photobucket.com/albums/qq126/long1256/GAGA/thtx_09.png "></td>
</table>
<!-- ENDE-----AVATA -->
<br/></center><br />
<b> <size=10> <font size="0.25">
<div class="khung">
Huy chương cấp bậc: {postrow.displayed.RANK_IMAGE}</font> </size></b></div>
<!-- BEGIN profile_field -->
<b> <size=10> <font size="0.25">
<div class="khung">
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}</div>
<!-- END profile_field -->
</font> </size></b></p>
<center><fieldset> <legend><strong> <span style=width:100;height:30;text-align:center;color:black;filter:glow(color=#56CDE0)>Liên hệ<strong></strong>
</span></strong></legend>
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
</fieldset>
</div>
</div>
</span>
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
<td class="alt1"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" nowrap="nowrap" class="post-options">
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>
<td align="right" >
</center>
<!-- google_ad_section_start -->
</td>
</tr>
<br>
<tr>
<td colspan="2">
<div class="alt1">
<div>
<table cellSpacing="0" cellPadding="0" border="0" style="width:auto">
<tr>
<td style="padding: 0px"><img src="http://i52.servimg.com/u/f52/12/82/29/24/admin_10.gif"></td>
<td style="padding: 0px; width:99%" background="http://i52.servimg.com/u/f52/12/82/29/24/admin_11.gif"></td>
<td style="padding: 0px"><img src="http://i52.servimg.com/u/f52/12/82/29/24/admin_12.gif"></td>
</tr>
<tr>
<td valign="top" style="padding: 0px" background="http://i52.servimg.com/u/f52/12/82/29/24/admin_13.gif">
<img src="http://i52.servimg.com/u/f52/12/82/29/24/admin_14.gif"></td>
<td style="padding: 0px; background-color: #ffffff" bgColor="#ffffff">
<div class="postbody">
{postrow.displayed.MESSAGE}
</div>
</td>
<td style="padding: 0px" background="http://i52.servimg.com/u/f52/12/82/29/24/admin_15.gif"></td>
</tr>
<tr>
<td style="padding: 0px"><img src="http://i52.servimg.com/u/f52/12/82/29/24/admin_16.gif"></td>
<td style="padding: 0px" background="http://i52.servimg.com/u/f52/12/82/29/24/admin_17.gif"></td>
<td style="padding: 0px"><img src="http://i52.servimg.com/u/f52/12/82/29/24/admin_18.gif"></td>
</tr>
</table></div>
<!-- BEGIN switch_attachments -->
<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>
<!-- BEGIN switch_post_attachments -->
<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />
<!-- BEGIN switch_dl_att -->
<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
<!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att -->
{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
<!-- END switch_no_dl_att -->
</dt>
<!-- BEGIN switch_no_comment -->
<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>
<!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att -->
<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>
<!-- END switch_no_dl_att -->
<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>
<!-- END switch_post_attachments -->
</dd>
</dl>
<!-- END switch_attachments --><br/>
<div class="sig"><div style="width:100%;">
<div>
<fieldset style="border: 1px dashed #C0C0C0; -moz-border-radius:3px" class="alt3"ahaha<legend class="signtop">
<span style=width:100;height:30;text-align:center;color:#000000;filter:glow(color=#000000)><font color="#CC3300">Chữ ký của <b>{postrow.displayed.POSTER_NAME}</b></span></font> <strong></strong></span></strong></legend><div style="overflow: auto; max-height: 200px;"><div align="center">
<div style="margin:auto;text-align:center;width:100%">{postrow.displayed.SIGNATURE} </div></div><!--
show inventory --></fieldset></span><span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
</div>
</div>
</div><br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG}{postrow.displayed.DELETE_IMG} {postrow.displayed.REPORT_IMG}
{postrow.displayed.THANK_IMG}
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" target="onclick="exec_refresh();"><img src="http://i63.servimg.com/u/f63/16/03/68/97/icon_e10.gif"></a>
<!-- END switch_vote -->
<!-- END switch_vote_active -->
</td>
</tr>
</table>
</td>
</tr>
<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- END first_post_br -->
<!-- END displayed -->
<!-- BEGIN hidden -->
<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
</tr>
<!-- END hidden -->
<!-- END postrow -->
<!-- BEGIN no_post -->
<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>
<!-- END no_post -->
<table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination -->
<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
<!-- END topicpagination -->
</tr>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
<tr>
<td class="row2" colspan="2" align="center" style="padding:0px"><br><font size="2" face="tahoma" color="green"><center>* Viết tiếng Việt có dấu, là tôn trọng người đọc.<br>
* Chia sẻ bài sưu tầm có ghi rõ nguồn, là tôn trọng người viết.<br>
* Thực hiện những điều trên, là tôn trọng chính mình.<br></font></center>
<font size="2" face="tahoma" color="red"><b>* Nếu chèn smilies có vấn đề thì bấm A/a trên phải khung viết bài.</font>
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>
<!-- BEGIN show_permissions -->
<tr>
<td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
<td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
</tr>
<!-- END show_permissions -->
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<!-- BEGIN show_permissions -->
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
<!-- END show_permissions -->
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<!-- BEGIN viewtopic_bottom -->
<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- END viewtopic_bottom -->
<!-- BEGIN moderation_panel -->
<td align="center">
<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="gensmall"> </span>
</td>
<!-- END moderation_panel -->
</tr>
</table>
</form>
<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td colspan="2" align="left" valign="top" nowrap="nowrap">
{S_TOPIC_ADMIN}
<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<input type="hidden" name="sid" value="{S_SID}" />
<span class="gen">{L_MOD_TOOLS}
{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>
<!-- END viewtopic_bottom -->
- Code:
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/bg10.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #fff;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/ .png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/select10.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/indic10.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #fff;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #fff;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/hex10.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r, .colorpicker_rgb_g, .colorpicker_rgb_b {
background-image: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/rgb_r10.png);
}
.colorpicker_rgb_r {
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
top: 112px;
left: 212px;
}
.colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b {
background-image: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/h10.png);
}
.colorpicker_hsb_h {
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/Color%20Picker/submit10.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus, .colorpicker_submit.colorpicker_focus, .colorpicker_slider{
background-position: bottom;
}
.khung
{
background:#FFFAF0;
font-size: 8pt;
color: #000000; font-family: Verdana,Tahoma, Helvetica, Arial, sans-serif;
padding:2px 10px 2px 10px;
margin-bottom: 2px;
border: 1px dashed #FC4400;
}
