css:
- Code:
a:link, a:visited
{
color: #6d8cae;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
cursor: pointer;
}
body {
background: #22272D url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/mainbg.jpg) 50% 0 no-repeat;
font: 13px/150% Tahoma, "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 0 0 30px;
}
div#wrapper1
{
width: 990px;
margin: 0 auto;
}
span, p, form { margin: 0; padding: 0;}
#topbar { height: 20px; line-height: 20px; padding-top: 10px; font-size: 90%; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);}
#quicknav { float: right;}
#quicknav ul { float: left; margin: 0; padding: 0;}
#quicknav li { float: left; padding: 0; list-style: none;}
#quicknav li a { display: block; padding-right: 10px; font-weight: bold; color: #fff;}
#quicknav .time { padding-right: 10px; color: #dadada;}
#quicknav .social_icon { background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/social_icons.png) no-repeat; height: 20px; width: 20px; padding: 0; margin-left: 3px;}
#quicknav a.twitter { background-position: 0 0;}
#quicknav a.rss { background-position: 0 -50px;}
#quicknav a.facebook { background-position: 0 -25px;}
#quicknav .twitter:hover { background-position: -30px 0;}
#quicknav .rss:hover { background-position: -30px -50px;}
#quicknav .facebook:hover { background-position: -30px -25px;}
#modnav strong, #modnav a { margin-right: 8px; color: #fff;}
#modnav span { background: #475c6e; padding: 2px 6px; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
#modnav a:hover { text-decoration: none; color: #dadada;}
#header1 { height: 90px; margin-top: 25px;}
#logo a { display: block; background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/logo.png) no-repeat; float: left; width: 250px; height: 60px; text-indent: -9999px;}
#news { float: right; max-width: 50%; background: #202326; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#news p { padding: 10px; color: #cbcbcb;}
#content1 { background: #202326; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px;}
#content_inner { background: #313840; border: 1px solid #39414b; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 8px;}
#main_content1 { background: #4c5765; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px;}
#main_content_inner { background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px;}
#user_tools { height: 48px; padding: 15px 5px;}
#search { float: left; background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/search.png) no-repeat; height: 30px; width: 220px;}
#search .search_input { background: none; border: none; outline: none; width: 200px; height: 16px; line-height: 16px; margin: 0; padding: 7px 10px; color: #dfdfdf; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); font-family: Tahoma, Arial, sans-serif;}
#memb_login { float: right; width: 350px; text-align: right; color: #aaa;}
#memb_login ul { margin: 0; padding: 0; line-height: 28px;}
#memb_login li { display: inline; list-style: none; padding: 0;}
#memb_login a { color: #dfdfdf;}
#memb_login li a { display: inline-block; background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/login_bullet.png) 0 50% no-repeat; padding: 0 4px 0 13px;}
#memb_login .first { background: none;}
#memb_login .last { padding-right: 0;}
#memb_login .memb_greeting { font-size: 18px; display: block;}
#memb_login .memb_avatar { float: right; margin-left: 15px;}
#memb_login img.avatar { width: 46px; height: 46px;}
#toolbar { background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/toolbar.png) repeat-x; height: 34px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 0 0 20px; padding: 6px 5px 0;}
#topnav, #topnav ul { margin: 0; padding: 0; z-index: 999;}
#topnav li { float: left; margin: 0 0 0 2px; padding: 0 0 6px; position: relative; list-style: none;}
#topnav li a { display: block; line-height: 26px; padding: 0 10px; text-decoration: none; border: 1px solid transparent; color: #ccc; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); font-size: 12px;}
#topnav li a.active, #topnav li:hover > a { background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/topnav.png) 0 50% repeat-x; border-color: #4a5f71; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#topnav li ul { position: absolute; background: #3c4d5b; border: 1px solid #4e6477; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); width: 200px; top: -999em; left: auto; padding: 5px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#topnav li ul ul { margin: 0;}
#topnav li li { width: 200px; height: auto; padding: 0; margin: 0;}
#topnav li li a { display: block; width: 170px; margin: 0 5px; padding: 0 10px; height: auto; float: none; line-height: 30px; font-size: 90%; border: none;}
#topnav ul li:hover > a { background-color: #2d3b48; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-image: none; border: none;}
#topnav li:hover ul { left: 0; top: 30px;}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul { top: -999em; left: auto;}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul { left: 200px; top: 0;}
.roundframe
{
padding: 0 10px;
background: #fff;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
}
.roundframe dl, .roundframe dt, .roundframe p
{
margin: 0;
}
.roundframe p
{
padding: 0.5em;
}
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg
{
overflow: hidden;
height: 32px;
line-height: 32px;
font-size: 1.1em;
font-weight: normal;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}
h3.catbg2 a, h3.catbg2
{
color: #fff;
}
h3.catbg a:hover, h4.catbg a:hover, .table_list tbody.header td a:hover
{
}
h3.catbg2 a:hover
{
}
h3.titlebg a, h3.titlebg, h4.titlebg, h4.titlebg a
{
color: #dadada;
}
h3.titlebg a:hover, h4.titlebg a:hover
{
}
h3.catbg img.icon, h4.titlebg img.icon
{
vertical-align: middle;
margin: -2px 5px 0 0;
}
h4.catbg a.toggle img
{
vertical-align: middle;
margin: -2px 5px 0 5px;
}
h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
h4.titlebg, h3.titlebg
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 100% -200px;
padding-right: 9px;
}
h4.titlebg img.icon
{
float: left;
margin: 6px 8px 0 0;
}
div.cat_bar
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 32px;
overflow: hidden;
margin-bottom: 1px;
}
div.title_bar
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 0 -200px;
padding-left: 9px;
height: 32px;
overflow: hidden;
margin-bottom: 1px;
}
/* rounded bars needs a different background here */
div.roundframe div.cat_bar
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 0 -240px;
margin-bottom: 0;
}
div.roundframe div.cat_bar h3.catbg
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 100% -240px;
}
div.title_barIC
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 0 -120px;
padding-left: 9px;
height: 32px;
overflow: hidden;
margin-bottom: 1px;
}
div.title_barIC h4.titlebg
{
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) no-repeat 100% -120px;
}
#upshrinkHeaderIC p.pminfo
{
margin: 0;
padding: 0.5em;
}
img#upshrink_ic, img#newsupshrink
{
float: right;
margin: 10px 5px 0 0;
}
table.table_list a.unreadlink, table.table_list a.collapse
{
float: right;
}
table.table_list a.collapse
{
margin: 10px 5px 0 1em;
height: 32px;
line-height: 32px;
}
span.upperframe
{
padding: 0;
display: block;
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) 0 -90px no-repeat;
padding-left: 20px;
}
span.upperframe span
{
padding: 0;
height: 12px;
display: block;
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) 100% -90px no-repeat;
}
span.lowerframe
{
padding: 0;
display: block;
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) 0 -102px no-repeat;
padding-left: 20px;
}
span.lowerframe span
{
padding: 0;
height: 12px;
display: block;
background: url(http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/main_block.png) 100% -102px no-repeat;
}
- 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 -->
</br>
<span class="clear upperframe"><span></span></span>
<div class="roundframe"><div class="innerframe">
<div class="cat_bar">
<h3 class="catbg">
<img class="icon" id="upshrink_ic" src="http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/collapse.gif" alt="*" title="Shrink or expand the header." style="cursor: pointer; ">
DzinerStudio Demo - Info Center
</h3>
</div>
<div id="upshrinkHeaderIC">
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="http://demo.dzinerstudio.com/smf2/index.php?action=stats"><img class="icon" src="http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/info.png" alt="Forum Stats"></a>
Forum Stats
</span>
</h4>
</div>
<p>{TOTAL_USERS_ONLINE}
<br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
<p>{NEWEST_USER}</p>
<p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<img class="icon" src="http://demo.dzinerstudio.com/smf2/Themes/newbalance_20/images/_style3/online.png" alt="Users Online">
Users Online
</span>
</h4>
</div>
<p class="inline stats">
{RECORD_USERS}
</p>
<p class="inline smalltext">
</p>
<p class="last smalltext">
{TOTAL_POSTS}</br>
{TOTAL_USERS}
</p>
</div>
</div></div>
<span class="lowerframe"><span></span></span>
<!-- 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 -->