Demo Live : Zone-FM
Bảng Màu Chuẩn .
Css
index_body
index_box
overall_footer_begin
Bảng Màu Chuẩn .
Css
- Code:
#main-content > .module.main[style="overflow:visible"] {display: none !important;}
.post_body img {max-width:700px;}
body{
background:#ebebeb;
font-family:tahoma,helvetica,arial,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
padding:0px;
}
a:link,a:active,a:visited {
text-decoration: none;
}
a:hover{
text-decoration: none !important;
}
#pun-intro {
background: #454545;
height: 125px;
border-bottom: 0px solid #52B6F0;
margin-top: 30px;
}
#pun-intro1 {
width: 1100px;
margin: 0 auto;
}
#pun-logo img {
width1: 970px;
height:50px;
margin-top: 25px;
}
.main-content {
background: #ffffff;
border: 1px solid #dddddd;
}
.main .main-head {
font-weight: bold;
font-size: 12px;
color: #FFF;
background:#454545 url(http://i34.servimg.com/u/f34/17/84/20/51/bg-hea10.png) center top repeat-x;
padding: 10px;
border: 0px solid #DDD;
}
.last-cat {background: #ffffff;
border-bottom: 1px solid #dddddd;padding:9px;
}
.last-cat2 {background: #454545;
border-bottom: 0px solid #dddddd;padding:9px;color:#fff;
}
.leftrecent,.rightrecent,.viewfmvi,.repfmvi,.lastcate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute}
#last li {font-weight: bold;background: none;color: #adadad;text-decoration: none;padding: 0 8px;margin-right: -1px;margin-bottom: -1px;display: inline-block;line-height: 30px;cursor: pointer;outline: 0 none;white-space: nowrap;word-wrap: normal;height: 24px;pacity: 1;margin-right: 5px;}#last {list-style: none;}#last li.selected {padding-bottom: 11px;margin-bottom: -2px;z-index: 11;position: relative;border-bottom: 0;background: none;color:#FFF;}
h2 {
color: #4d4d4d;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1.5em;
font-weight: 400;
margin: .8em 0 .2em;
}
.mainbox {
background: #ffffff;
border: 1px solid #dddddd;
padding:10px;
}
.menunav1{background: #333;margin-top: -35px!important;width: 1120px;
margin: 0 auto;
}
.menunav{
height: 35px;
z-index: 12 !important;
color: #fff !important;
margin:0 auto;
padding-left:0px;
}
.menunav ul{display:block;height:30px;margin:0 auto;padding:0px 0 0;position:relative;z-index:14}
.menunav ul li{display:inline;height:30px;margin:0;text-align:left;}
.navhome a{background: #141414;color:#fff!important;left:0px;height: 25px!important;}
.menunav ul li a{color: #fff!important;display:block;float:left;font-weight:bold;height:30px;padding:10px 10px 0;z-index:10}
.menunav ul li a:hover,.menunav ul li .active{margin-top:0px;background:none repeat scroll 0 0 #141414;color:#000;display:block;height:25px;padding-top:10px;z-index:10}
.menunav ul a.ico_home,.menunav ul a.ico_home:hover{background-position:left -3183px;border-right:0px solid #fff;color:#EFEFEF;display:block;height:18px;margin:5px 3px 0 0;padding:5px 0 0!important;width:32px}
.menunav span{display:block;height:23px!important;position:absolute;right:0;top:4px;width:95px}
.menunav span a,.menunav span a:hover{height:23px!important;padding:0!important}
.icon, .menunav ul a.ico_home, .menunav ul a.ico_home:hover {margin-top:0px;background:#258023 url("http://i35.servimg.com/u/f35/16/95/03/19/home12.png") no-repeat scroll 4 5 ;height:30px;}
#page-body {
line-height: 130%;
margin: 0 auto;
min-width: 768px;
padding: 10px;
width: 1100px;
color: #141414;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
border-bottom: 0px solid #ddd;
background: #fff;
}
/*box 2cot*/
.box{background-color: #FFF;width:323px;float:left;height: 110px;margin:10px;margin-left:20px;padding:5px;border:1px solid #ddd}
.box1 img{width:50px;height:50px;margin-top:-10px;margin-left:15px;float:left}
.box2{margin-left:10px;}
.nguoiguicuoi{margin-left:75px;margin-top:20px;}
.thoigiancuoi{margin-left:85px;margin-top:-30px;}
.box-name {background: #fff;padding:10px;margin:-6px -6px 0px -6px;text-align:left;color:#454545;border:1px solid #ddd;
border-bottom:2px solid #454545 ;
}
.box-name .hierarchy a{color:#454545;}
.box-name .hierarchy a:hover{color:#454545;}
.forumbg {
background-color: #ffffff;
background-position: 0 0;
background-image: none!important;
background-repeat: repeat-x;
border: 1px solid #dddddd;
clear: both;
margin-bottom: 4px;
padding: 0px!important;
}
li.header dd, li.header dt {
border-left-width: 0;
color: #333;
font-family: Arial,Helvetica,sans-serif,Verdana,Arial,Helvetica,sans-serif;
}
li.header dl.icon dt {
padding-left: 15px;
}
li.row {
border-bottom: 1px solid #fff;
border-top: 1px solid #dddddd;
}
a.topictitle {
color: #4d4d4d;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
p.nomargin {
font-size: 1.1em;
line-height: 1.3em;
margin-top: 3px;
background-color: #ffffff;
border: 1px solid #dddddd;
padding:10px;
}
p.path {
clear: left;
margin-left: 0px;
}
h1.page-title {
color: #fff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1.5em;
font-weight: 400;
margin: .8em 0 .2em;
background-color: #333;
border-bottom: 1px solid #333;
padding:10px;
}
h1.page-title a:visited{color:#fff;
}
.h3 {
background-color: #333;
border-bottom: 1px solid #333;
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1.05em;
margin-bottom: 0px;
/* margin-top: 20px; */
padding-bottom: 10px;
text-transform: uppercase;
padding:10px;
}
.h3 a:link{color: #ffffff;}
.lastpost-avatar img {
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
height: 30px;
width: 30px;
}
.navbar {
background-color: #fff;
clear: both;
padding: 0 10px;
margin: 0 auto;
padding: 10px;
width: 1090px;
}
.postprofile {
border-color: #f7f7f7;
border-right-style: solid;
border-right-width: 1px;
color: #6b6b6b;
display: inline;
float: left;
margin: 5px 0 0;
min-height: 80px;
position: relative;
width: 22%;
word-wrap: break-word;
border: 1px solid #dddddd;
}
.nickpost {
background-color: #454545;color: #ffffff!important;padding:8px;
}
.nickpost a{
color: #ffffff!important;
}
dl.codebox {
background-color: #FFF;
border: 1px solid #C9D2D8;
font-size: 1em;
padding: 3px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
margin: 5px;
}
dl.codebox dt {
border-bottom: 2px solid #454545;
display: block;
font-size: .8em;
font-weight: 700;
margin-bottom: 3px;
text-transform: uppercase;
padding:5px;
}
#cp-main h1 {
border-bottom: none;
color: #fff;
margin-left: 10px;
padding: 8px;
font-size: 12px;
}
/* Top */
#top-thanhkent {
color: #999999;
background: #171717;
border-bottom: 1px solid #181818;
font-size: 12px;
z-index: 999;
width: 100%;
height: 33px;
padding-top:3px;
line-height: 30px;
text-align: center;
font-weight: bold;
top: 0px;
position: fixed!important;
}
.topWelcome a {
color: #999999;
margin-top: -10px;
font-size: 12px;
}
#menutop {
margin: 10px;
margin-top: 0px;
float:left;
}
#menutop a:hover{
color: #ffffff;
}
#lfc-logo {
float:left;
margin-top: 3px;
}
.top-thanhkent {
margin: 0px auto 0px auto;
width: 1110px;
position: relative;
padding: 0;
background: none;
height: 32px;
}
.topWelcome {
float: left;
}
.topWelcome h1 {
font-size: 1em;
font-weight: bold;
}
.Login-Box {
float: right;
}
.Login-Box ul {
list-style: none;
padding: 0;
margin: 0;
}
.Login-Box li {
float: left;
margin: 0;
padding: 0 3px;
}
.Login-Box a:link, .Login-Box a:visited {
color: #999999;
}
.Login-Box a:hover {
color: #ffffff;
}
.loginLeft {
float: right!important;
}
.notreg {
border-left: 0px solid #dddddd;
padding-left: 10px;
font-weight: 700;
}
.input-login-thanhkent {
background:#FFF;
border: 0;
color: #333333;
padding: 0 5px;
font-size: 9pt;
width: 90px;
height: 20px;
line-height: 20px;
border: 1px solid #181818;
margin: 4px 3px 3px 3px;
border-radius: 1px;
}
.oklogin-thanhkent {
background:#131313;
border: 0;
color: #999999;
font-size: 9pt!important;
width: 80px!important;
height: 22px!important;
line-height: 20px;
border: 1px solid #181818;
margin: 3px!important;
border-radius: 1px;
font-weight:bold;
padding-top:1px!important;
}
index_body
- Code:
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<br class="clear" />
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>
<label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>
<label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_fb_connect -->
<span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
<fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
<!-- END switch_fb_connect -->
</div>
</form>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<div class="inner"><span class="corners-top"><span></span></span>
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END message_admin_index -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<!-- BEGIN switch_viewonline_link -->
<div class="h3">Truy Cập</div>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<div class="h3">Truy Cập</div>
<!-- END switch_viewonline_nolink -->
<div class="mainbox">
<p style="float:left;width:60px;height:180px;">
<img src="http://i37.servimg.com/u/f37/17/47/85/23/th/packag10.png" id="i_whosonline" alt="Who is online?" class="img-whois" />
</p>
<p style="float:left;">
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
<br />
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>
</p>
</p>
</div>
<div class="clear"></div>
<!-- BEGIN switch_statistics_link -->
<div class="h3"><a href="{U_STATISTICS}" rel="nofollow">Thống Kê Diễn Đàn</a></div>
<!-- END switch_statistics_link -->
<!-- BEGIN switch_statistics_nolink -->
<div class="h3">{L_STATISTICS}</div>
<!-- END switch_statistics_nolink -->
<div class="mainbox">
<p style="float:left;width:60px;">
<img src="http://i37.servimg.com/u/f37/17/47/85/23/th/stock_10.png" alt="Statistics" />
</p>
<p style="float:left;">
<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
</p>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
<div class="mainbox">
<p style="float:left;width:60px;">
<img src="http://i37.servimg.com/u/f37/17/47/85/23/th/forum_10.png" alt="Chatbox" />
</p>
<p style="float:left;">
<div class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}<br />
</div>
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
</p>
</div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
<!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>
<label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>
<label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_fb_connect -->
<span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
<fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
<!-- END switch_fb_connect -->
</div>
</form>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->
<br style="clear:both" />
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
<li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
<li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
<li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
{AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->
index_box
- Code:
<style>
.catbox {
font-family: arial !important;
float: left;
font-size: 15px;
background: #f26522;
padding: 10px;
margin-left:-4px;
position: relative;
z-index: 2;
text-transform: uppercase;
font-weight: bold!important;
}
.catbox h2 {
font-family: arial !important;
float: left;
font-size: 15px;
color: #fff;
position: relative;
z-index: 2;
text-transform: uppercase;
font-weight: bold!important;
}
.cat-t h2 {
font-weight: bold!important;pading:10px;font-size: 13px!important;
}
.cat-t {
float:left;border-bottom: 0px solid #333;padding:5px;margin-left:2px;width:100%;
}
</style>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cat-t">
<span style="color:#ffffff;font-weight: bold!important;">{catrow.tablehead.L_FORUM}</span>
</div>
<table cellspacing="0" class="table" style="border-top: 1px solid #ffffff!important;">
<tbody class="statused">
<tr>
<td style="border-left: none;background: none !important;">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="box">
<div class="box-name"><h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
{catrow.forumrow.FORUM_NAME}
</a></h{catrow.forumrow.LEVEL}></div>
<br/>
<left><div style="margin-top:-5px;margin-left:90px">Chủ đề: {catrow.forumrow.TOPICS} , Số bài: {catrow.forumrow.POSTS}</div></left>
<div class="box1">{catrow.forumrow.FORUM_DESC}</div>
<div class="" style="margin-left:90px;margin-top:-15px">
<!-- BEGIN switch_topic_title -->
<span><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a></span>
<!-- END switch_topic_title -->
<br/>
{catrow.forumrow.USER_LAST_POST}
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</td>
</tr>
</tbody>
</table>
<br />
<!-- END tablefoot -->
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<ul>
<li><a href="{U_TODAY_ACTIVE}">Chủ đề hôm nay</a></li>
<li><a href="{U_TODAY_POSTERS}">Tích cực hôm nay</a></li>
<li><a href="{U_OVERALL_POSTERS}">Thành viên tích cực</a></li>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">Xóa Cookies</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
overall_footer_begin
- Code:
<!-- BEGIN html_validation -->
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<!-- END html_validation -->
</div>
</div>
</div>
</div>
<div id="{ID_RIGHT}">
<!-- BEGIN giefmod_index2 -->
{giefmod_index2.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index2 -->
</div>
</div>
</div>
</div>
<div id="page-footer">
<div class="navbar">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="linklist clearfix">
<li class="footer-home">
<a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
</li>
<li class="rightside">
<!-- BEGIN html_validation -->
</li>
</ul>
</div>
</div>
</div>
<!-- END html_validation -->