Statistici personalizate ca in imagine [punBB]

Titlul este foarte explicit,am sa lipesc o poza si sper ca veti  intelege cum vreau:

https://i.servimg.com/u/f55/18/62/88/60/snapsh11.png

Salut,

Incearca template-ul de mai jos: Panou de administrare ~> Afisare ~> Template-uri ~> General ~> index_body, stergi tot scriptul din template-ul index_body si pui scriptul de mai jos, apoi apesi butonul Inregistrare

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 -->

Ai putea sal faci mai asemanator ca in imagine te rog?

Buna ziua,

Cea ce doriti dumneavoastra puteti gasi aici -> https://help.forumgratuit.ro/t40797-statistici-sub-forma-de-tab-uri?highlight=statistici+in+tab+-uri

Mia iesit ceva de genu:

https://i.servimg.com/u/f55/18/62/88/60/snapsh12.png as vrea sa iasa conform culoarea temei

Buna dimineata,  

Daca ati folosit codurile din acest tutorial, stergeti codurile de la pasul 5 si adaugati urmatorul cod in P.A>Afisare>Imagini si culori>Culori ~> Foaie de stil css

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;
}

Este foarte bun dar nu sa schimbat tot ( la: Legenda si Tab4 tot alb a ramas inauntru

https://i.servimg.com/u/f55/18/62/88/60/snapsh13.png

asa imi apare si la tab4

Incercati:

Cod:

#tab3, #tab4 {
background: #CULOAREA DORITA !important;
}

https://help.forumgratuit.ro/t15-coduri-culori

Unde trebuie introdus codul?

Acel cod il introduceti in Foaia de stil CSS

Codul trebuie adaugat in P.A>Afisare>Imagini si culori>Culori ~> Foaie de stil css

Rezolvat

T/C