Am nevoie de statistici ca ale vostra dar pentru tema Animate ca sa fiu mai clar pun o imagine:
Cod:
<style type="text/css">
.board-title-line ul {margin-top: -23px;}
.tabActive {
background: black;
padding: 5px;
margin-top: -7px;
}
.tabInactive {
padding: 5px;
margin-top: -7px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.dashboard_body').css({display: 'none'});
jQuery('.tabContent a:first').addClass('current');
var rel = jQuery('.dashboard_tabs a.current').attr('rel');
jQuery('#'+rel).show();
jQuery('.dashboard_tabs a').click(function(){
jQuery('.tabHeaders a').removeClass('current');
jQuery('.tabContent').hide();
jQuery(this).addClass('current');
var rel = jQuery(this).attr('rel');
jQuery.cookie('active_tab', rel);
jQuery('#'+rel).show();
});
});
$(document).ready(function(){
$("#test_pages").find("div").hide();
$("#test_tab1").addClass("tabActive");
$("#test_tab1Content").show();
$(" #test_tab1,#test_tab2,#test_tab3").click(function(){var oldTab = "#"+ $("#test_tabHeaders").find(".tabActive").attr("id");
$(oldTab).removeClass("tabActive");
$(this).addClass("tabActive");
var newTab ="#"+$(this).attr("id")+"Content";$(oldTab+"Content").hide();$(newTab).fadeIn();});});</script>
{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}
<div id="board_stats">
<ul class="ipsType_small">
<li><span class="FORUMCOUNTPOST"></span> Total Posturi</li>
<li><span class="FORUMCOUNTUSER"></span> Total Memberi</li>
<li><span class="FORUMLASTUSER"></span> Membru Nou</li>
<li><span class="FORUMONLINEUSER"></span> Record Online</li>
</ul>
</div>
<!-- BEGIN disable_viewonline -->
<div class="board-title-line"><p>
<div class="tabHeaders" id="test_tabHeaders">
<table><tr><td><div id="test_tab1" class="tabInactive tabActive" style="cursor: pointer;">Cine este online?</div></td><td><div id="test_tab2" class="tabInactive" style="cursor: pointer;">Parteneri</div></td></tr></table>
</div></p><ul><li><a href="/search?search_id=activetopics">Subiectele active ale zile</a></li><li><a href="/memberlist?mode=today_posters">Top 20 al postatorilor zilei</a></li><li><a href="/memberlist?mode=overall_posters">Top 20 al postatorilor forumului</a></li></ul></div>
<div id="pun-info-ipb" class="main">
<div class="main-content" style="padding:7px;">
<div id="test_pages" class="tabPages">
<div class="tabContent" id="test_tab1Content" style="display: block;">
<p>{TOTAL_USERS_ONLINE}
<div id="etAvOnline">
{LOGGED_IN_USER_LIST}
</div>
<br>{L_ONLINE_USERS}</br>
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
<div class="clear"></div>
<p>{LEGEND} : {GROUP_LEGEND}</p>
</div>
<style type="text/css">
.parteneri { 900px; margin: 0 auto;}
.row14 {border: 1px solid #222;padding: 2px;}
</style>
<div class="tabContent" id="test_tab2Content" style="display: block; ">
<table class="parteneri" cellspacing="6">
<tr>
<td class="row14"><a href="http://redgames.taro.tv"><img src="http://i46.tinypic.com/309t0d1.gif" /></a></td>
<td class="row14"><a href="http://wtfcs-cs.forumgratuit.ro/"><img src="http://i.imgur.com/0a6Aank.gif" /></a></td>
<td class="row14"><a href="http://vip-gaming.forumz.ro"><img src="http://i.imgur.com/b4XjeNK.gif" /></a></td>
<td class="row14"><a href="http://llg-cstrike.forumer.ro"><img src="http://i1138.photobucket.com/albums/n540/Scoons1996/Llg-cstrike-Community2.gif" /></a></td>
<td class="row14"><a href="http://virtualcs.forumers.ro/"><img src="http://i57.servimg.com/u/f57/18/56/43/50/x4ibn110.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
</tr>
<tr>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
<td class="row14"><a href="#"><img src="http://i.imgur.com/bblWbwd.gif" /></a></td>
</tr>
</table>
</div>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div id="onlinechat">
<p class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}<br />
<!-- 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 -->
</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}
{AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
http://<![CDATA[
FB.init({
appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
http://]]>
</script>
<!-- END switch_fb_index_login -->
Cod:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
<div class="main-content">
<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">
<!-- 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 />
{RECORD_USERS}
<br />
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{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}<br />
<!-- 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 -->
</div>
</div>
<!-- END disable_viewonline -->
Cod:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
<ul id="explore-nav" style="list-style: none;">
<li id="ex-featured"><a rel="featured" href="#" class="current">Statistici forum</a></li>
<li id="ex-core"><a rel="core" href="#">Cine este conectat ? </a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">Legenda</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Tab4</a></li>
</ul>
<div id="all-list-wrap">
Cod:
#organic-tabs { background: #253d5a; padding: 2px; margin: 0 0 15px 0; }
#explore-nav { overflow: hidden; margin: 0 0 10px 0; }
#explore-nav li {
width: 151px;
float: left;
margin: 0 10px 0 0;
font-size: 24px;
}
#explore-nav li.last { margin-right: 0; }
#explore-nav li a {
display: block;
padding: 5px;
background: #222;
color: #d7d7d7;
border-radius: 5px;
opacity: 0.9;
font-size: 10px;
text-align: center;
border: 1px solid #444;
font-size:13px;
}
#stats {color: #d7d7d7;font-size: 12px;}
#explore-nav li a:hover { background-color: #000;opacity: 1.0; }
#jquerytuts, #core, #classics { display: none; }
#explore-nav li#ex-featured a.current, ul#featured li a:hover { color: #f1f1f1; }
#explore-nav li#ex-core a.current, ul#core li a:hover {color: #f1f1f1; }
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { color: #f1f1f1; }
#explore-nav li#ex-classics a.current, ul#classics li a:hover { color: #f1f1f1; }
#statistici {
background-color: #222;
border: 1px solid #ccc;
padding: .6em 1em;
}
#tab3, #tab4 {
border: 1px solid #ddd;
width: 100%;
min-height: 100px;
padding-top: 4px;
padding-left: 4px;
background: #f4f4f4;
}
Cod:
$(function() {
$("#explore-nav li a").click(function() {
// Figure out current list via CSS class
var curList = $("#explore-nav li a.current").attr("rel");
// List moving to
var $newList = $(this);
// Set outer wrapper height to height of current inner list
var curListHeight = $("#all-list-wrap").height();
$("#all-list-wrap").height(curListHeight);
// Remove highlighting - Add to just-clicked tab
$("#explore-nav li a").removeClass("current");
$newList.addClass("current");
// Figure out ID of new list
var listID = $newList.attr("rel");
if (listID != curList) {
// Fade out current list
$("#"+curList).fadeOut(300, function() {
// Fade in new list on callback
$("#"+listID).fadeIn();
// Adjust outer wrapper to fit new list snuggly
var newHeight = $("#"+listID).height();
$("#all-list-wrap").animate({
height: newHeight
});
});
}
// Don't behave like a regular link
return false;
});
});
Cod:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
<ul id="explore-nav" style="list-style: none;">
<li id="ex-featured"><a rel="featured" href="#" class="current">Statistici forum</a></li>
<li id="ex-core"><a rel="core" href="#">Cine este conectat ? </a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">Legenda</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Tab4</a></li>
</ul>
<div id="all-list-wrap">