Demo:
CSS:
index_body:
index_box:
NGUỒN: themes.forumvi
Tags: #skin #punbb
CSS:
Code:
/* css by genji watanabe copyright 5/4/2013 */
#pun-visit, .main-box, #pun-about #qjump {
display: none;
}
.pun a:link {
color: #fff;
text-decoration: none !important;
}
.pun a:visited {
color: #fff;
text-decoration: none !important;
}
.pun a:hover {
color: #FF8A00;
text-decoration: none !important;
}
body {
background: #000 url(http://i69.servimg.com/u/f69/18/22/46/85/button10.png);
font-family: Arial;
font-size: 10px;
color: #fff;
}
.pun {
width: 95%;
margin-top: 20px;
margin-bottom: 20px;
}
.pun .main-content {
padding: 5px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#pun-about {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
font-family: Arial;
font-size: 10px;
color: #fff;
}
#stats {
background: transparent !important;
}
#onlinelist {
background: transparent !important;
border-top: 1px dashed #fff;
}
#onlinelist img {
margin-right: 5px;
}
#pun-intro {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px dashed #fff;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-ms-border-radius: 5px 5px 0px 0px;
-o-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#pun-logo {
float: left;
margin: 20px;
}
#pun-head #pun-navlinks {
margin-bottom: 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-top: 0px solid rgba(255,255,255,0.08);
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-ms-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
#pun-navlinks ul {
text-align: center;
}
#pun-navlinks li {
font-weight: bold;
font-family: Arial;
font-size: 10px;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#pun-navlinks a {
color: #fff;
text-decoration: none;
}
#pun-navlinks a:visited {
color: #fff;
text-decoration: none;
}
#pun-navlinks a:hover {
color: #FF8A00;
text-decoration: none;
}
.overview {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
}
.title-overview {
background: transparent !important;
color: #fff;
}
.pun .paged-head, .pun .paged-foot {
background: transparent !important;
border: none;
}
.main .main-head, .main .main-foot {
margin: 5px !important;
background: transparent !important;
border: none;
}
.main .main-head .page-title, .pun .main-head .h2, .subtitle {
width: 250px;
padding: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
font-family: Arial;
font-size: 10px;
color: #fff;
}
.main .main-foot .page-title, .pun .main-foot .h2 {
width: 250px;
padding: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
font-family: Arial;
font-size: 10px;
color: #fff;
}
.pun h2, .pun h3, .pun input, .pun select, .pun th {
font-family: Arial;
font-size: 10px;
font-weight: bold;
}
.pun table.table {
background: transparent !important;
border: none;
}
.pun table.table th {
background: transparent !important;
border-bottom: 1px dashed #fff;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
font-family: Arial;
font-size: 10px;
color: #fff;
}
.pun tbody.statused td.tcl {
background: transparent !important;
border-right: none;
border-left: none;
border-top: none;
border-bottom: 1px dashed #fff;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
background: transparent !important;
border-right: none;
border-left: none;
border-top: none;
border-bottom: 1px dashed #fff;
}
.pun table.table td {
background: transparent !important;
border-right: none;
border-left: none;
border-top: none;
border-bottom: 1px dashed #fff;
}
.pun .post {
margin-bottom: 4px;
padding: 10px;
background: rgba(255,255,255,0.05);
border-style: solid;
border-width: 1px;
border-color: rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.pun .postmain {
background: transparent !important;
border-left: 1px dashed rgba(255,255,255,0.08);
}
.pun .posthead {
margin-left: 10px;
background: transparent !important;
border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.postfoot {
border-top: 0px dashed rgba(255,255,255,0.08);
}
.pun .post .user {
margin-left: -18em;
margin-bottom: 10px;
}
.user-basic-info {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
font-family: Arial;
font-size: 10px;
text-align: center;
}
.codebox {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.codebox dt {
border-bottom: 1px dotted rgba(255,255,255,0.08);
}
.codebox dd {
background: none !important;
}
.codebox dd.cont_code, .spoiler_content.hidden {
font: lighter 12px/20px Monaco,'MonacoRegular',monospace;
-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.postmain blockquote {
margin: 0.5em 3em;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.pun .main-head a.exthelp, .pun .main-head a.exthelp:link, .pun .main-head a.exthelp:visited {
background-image: none;
}
.pun .main .options a, .pun .main .options a:link, .pun .main .options a:visited {
color: #fff;
}
.main .main-content.frm {
background: rgba(255,255,255,0.05);
}
.pun .frm-form {
background: none !important;
}
.frm-buttons {
border-top: 1px dashed #fff;
}
#text_editor_textarea,div.posting-block #text_editor_iframe {
height: 260px;
margin-left: -2.9px;
}
#textarea_content dl dt label {
display: none;
}
#quick_reply .frm-buttons {
margin: 0 auto;
padding: 5px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-top: 0px solid rgba(255,255,255,0.08);
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-ms-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
text-align: right;
}
#quick_reply #text_editor_controls {
position: absolute;
width: 52% !important;
margin-left: 15px;
margin-top: 162px;
}
#quick_reply fieldset.frm-set dl dd {
margin: 0 auto;
padding: 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-ms-border-radius: 5px 5px 0px 0px;
-o-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#quick_reply #text_editor_textarea {
max-height: 142px;
margin-left: -1px;
margin-top: -6px
}
#text_editor_controls {
margin: 10px 20px;
}
.pun .frm .frm-form table {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.08);
border-top: 1px solid rgba(255,255,255,0.08);
}
.pun .main .main-content.message {
background: rgba(255,255,255,0.05);
}
.pun .main .main-content p.message {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.main .frm-info {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
fieldset.frm-set.multi {
border-bottom: 0px dashed #ddd;
}
.sub-head {
border-bottom: 1px dashed #fff;
}
.faq dd {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
index_body:
Code:
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
<li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
<p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN message_admin_index -->
<div class="main">
<!-- BEGIN message_admin_titre -->
<div class="main-head">
<h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div id="pun-announcement">
<p>{message_admin_index.message_admin_txt.MES_TXT}</p>
</div>
<!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form main-box center">
<label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label>
<label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label>
<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption" 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>
</div>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
<div class="main-head">
<div class="page-title">Statistics Section</div>
</div>
<div class="main-content">
<div id="stats">
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<p class="right">Total number of topics : <span class="FORUMCOUNTOPIC"></span></p>
<p>Total number of registered users : <span class="FORUMCOUNTUSER"></span></p>
<p class="right">Total number of posts : <span class="FORUMCOUNTPOST"></span></p>
<p>Newest registered user : <span class="FORUMLASTUSERLINK"></span></p>
</div>
<div id="onlinelist">
<img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
<p class="right">
<!-- BEGIN switch_viewonline_link -->
<a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
{L_WHO_IS_ONLINE}
<!-- END switch_viewonline_nolink -->
</p>
<p>{TOTAL_USERS_ONLINE}<br />
{LOGGED_IN_USER_LIST}</p>
<div class="clear"></div>
</div>
</div>
</div>
<!-- END disable_viewonline -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form main-box center">
<label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label>
<label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label>
<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_fb_connect -->
<span class="genmed 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>
<!-- END switch_user_login_form_footer -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_legend -->
<ul id="pun-legend">
<li>
<img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
<img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
<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:
<div class="pun-crumbs">
<p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="main-head">
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="main-content">
<table cellspacing="0" class="table">
<thead>
<tr>
<th class="tcl">{L_FORUM}</th>
<th class="tc2" style="width: 150px;">Statistics</th>
<th class="tcr" style="width: 150px;"><center>Last Post</center></th>
</tr>
</thead>
<tbody class="statused">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<tr>
<td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
<span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</span>
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
<br />
{catrow.forumrow.FORUM_DESC}
<!-- BEGIN switch_moderators_links -->
<br />
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</td>
<td class="tc2"><span>{catrow.forumrow.POSTS} Posts</span> in <span>{catrow.forumrow.TOPICS} Topics</span></td>
<td class="tcr">
<span>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</tbody>
</table>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<ul>
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
<li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
NGUỒN: themes.forumvi
Tags: #skin #punbb