Tabs in statistics (for PunBB)
Screenshot:
1. go to overall_header_new template and find
After it, paste following code:
2. Go to index_body template. Find this code:
and replace it with this one:
3. Go to your CSS and add this code:
Screenshot:
1. go to overall_header_new template and find
- Code:
<head>
After it, paste following code:
- Code:
<script type='text/javascript' src='http://vwclubsplit.webs.com/skripte/jquery-min.js'></script><script type="text/javascript" src="http://vwclubsplit.webs.com/skripte/example.js"></script>
2. Go to index_body template. Find this code:
- Code:
<div id="stats">
<p class="right">{TOTAL_POSTS}</p>
<p>{TOTAL_USERS}</p>
<p>{NEWEST_USER}</p>
</div>
<div id="onlinelist">
<img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
<p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
<p>{TOTAL_USERS_ONLINE}
{RECORD_USERS}
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
<div class="clear"></div>
<p>{LEGEND} : {GROUP_LEGEND}</p>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div id="onlinechat">
<p class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></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 -->
</p>
</div>
<!-- END switch_chatbox_activate -->
and replace it with this one:
- Code:
<div id="hook-just-in-case" style="background: #2f2626 !important; text-align: center !important; color: white !important; font: 14px Georgia, Serif !important; position: relative; zoom: 1; width: 100% !important; z-index: 10000 !important;">
</div>
<div id="page-wrap" style=" width: 850px; margin: 1px auto;">
<div id="organic-tabs" style="background: transparent; padding: 2px; margin: 0 0 15px 0;">
<ul id="explore-nav" style="list-style: none;">
<li id="ex-featured"><a rel="featured" href="#" class="current">Statistike</a></li>
<li id="ex-core"><a rel="core" href="#">Profil</a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">Tab3</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Tab4</a></li>
</ul>
<div id="all-list-wrap">
<ul id="featured" style="list-style: none;">
<li> <div id="stats">
<p class="right">{TOTAL_POSTS}</p>
<p>{TOTAL_USERS}</p>
<p>{NEWEST_USER}</p>
</div>
<div id="onlinelist">
<img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
<p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
<p>{TOTAL_USERS_ONLINE}
{RECORD_USERS}
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
<div class="clear"></div>
<p>{LEGEND} : {GROUP_LEGEND}</p>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div id="onlinechat">
<p class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></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 -->
</p>
</div>
<!-- END switch_chatbox_activate --></li>
</ul>
<ul id="core" style="list-style: none;">
<li style="display: block; padding: 4px; color: #fff;"><table width="840" border="0" cellspacing="0" cellpadding="5"><tr><td width="210">Preferences</td><td width="210">My messages</td><td width="210">Links</td><td width="210">Title</td></tr><tr><td style="padding-left:15px; line-height:20px;"><a href="/profile.forum?mode=editprofile&page_profil=avatars">Avatar gallery</a><br><a href="/profile.forum?mode=editprofile&page_profil=signature">Signature</a><br><a href="/profile.forum?mode=editprofile&page_profil=preferences">My preferences</a><br><a href="/profile.forum?mode=editprofile&page_profil=friendsfoes">My friends</a></td><td style="padding-left:15px; line-height:20px;"><a href="/msg.forum?mode=post">Send PM</a><br><a href="/msg.forum?folder=inbox">Inbox</a><br><a href="/msg.forum?folder=outbox">Sentbox</a><br><a href="/msg.forum?folder=savebox">Saved messages</a></td> <td style=" padding-left:15px; line-height:20px;"><a href="/memberlist.forum">Memberlist</a><br><a href="/groupcp.forum">Groups</a><br><a href="/viewonline.htm">Who is online?</a><br><a href="/stats.htm">Statistics</a></td> <td style="padding-left:15px; line-height:20px;"><a href="#">Link 1</a><br><a href="#">Link 2</a><br><a href="#">Link 3</a><br><a href="#">Link 4</a></td></tr></table></li>
</ul>
<ul id="jquerytuts" style="list-style: none;">
<li style="display: block; padding: 4px; color: #fff;"><table width="840" border="0" cellspacing="0" cellpadding="5"><tr><td width="210"></td><td width="210"></td><td width="210"></td><td width="210"></td></tr><tr><td style="padding-left:15px; line-height:20px;"><a href="#">Link 01</a><br><a href="#">Link 02</a><br><a href="#">Link 03</a><br><a href="#">Link 04</a></td><td style="padding-left:15px; line-height:20px;"><a href="#">Link 05</a><br><a href="#">Link 06</a><br><a href="#">Link 07</a><br><a href="#">Link 08</a></td> <td style=" padding-left:15px; line-height:20px;"><a href="#">Link 09</a><br><a href="#">Link 10</a><br><a href="#">Link 11</a><br><a href="#">Link 12</a></td> <td style="padding-left:15px; line-height:20px;"><a href="#">Link 13</a><br><a href="#">Link 14</a><br><a href="#">Link 15</a><br><a href="#">Link 16</a></td></tr></table></li>
</ul>
<ul id="classics" style="list-style: none;">
<li style="display: block; padding: 4px; color: #fff;">Your text here...</li>
<li style="display: block; padding: 4px; color: #fff;">Your text here 2.</li>
<li style="display: block; padding: 4px; color: #fff;">Your text here 3.</li>
</ul>
</div>
</div>
</div>
3. Go to your CSS and add this code:
- Code:
#organic-tabs { background: #253d5a; padding: 2px; margin: 0 0 15px 0; }
#explore-nav { overflow: hidden; margin: 0 0 10px 0; }
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #kod boje taba; color: white; font-size: 10px; text-align: center; border: 1px solid #253c59; }
#explore-nav li a:hover { background-color: #kod boje taba miĊĦem preko; }
#jquerytuts, #core, #classics { display: none; }
#explore-nav li#ex-featured a.current, ul#featured li a:hover { color: white; }
#explore-nav li#ex-core a.current, ul#core li a:hover {color: white; }
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { color: white; }
#explore-nav li#ex-classics a.current, ul#classics li a:hover { color: white; }
