Оформление статистики

Доброго времени суток, подскажите пожалуйста, подойдет ли этот вариант для Инвизион? - https://help.forum2x2.ru/t21641-topic#165835 , или нужно по другому как-то прописывать?
Хотелось бы, чтоб вместо чата был или контейнер для баннеров, или вообще чата не было, возможно ли это?
И хотелось бы поставить изначально рисованные кнопки , уже с надписью и фоном.

Я пробовала еще по этому методу, получается, но смущает вкладка чат и вообще, что он включен тут: https://help.forum2x2.ru/t26528-topic и почему-то подвисает форум на этом варианте, когда вернула все на место,висеть перестал.

jeani, чат можно убрать с вкладки)

Меня и интересует ,каким образом обойтись без чата и поставить рисованные кнопки)

1. Не включаете чат
2. Откройте ПА > Оформление > Общие настройки - шаблон index_body (Главная страница) и замените

Код:

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
   <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>

   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>
            <th colspan="2" class="formsubtitle">
            <!-- 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 -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>
         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>
         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- 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 -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

</div>

<!-- END disable_viewonline -->
<br />
{CHATBOX_BOTTOM}

на

Код:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<td class="catHead" colspan="2" height="28">
<span class="cattitle">  Статистика нашего форума</span>
</td>
<tr>

<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

<td>

    <div id="page-wrap">

          <div id="pw1-but" class="but">Кто онлайн</div>
          <div id="pw2-but" class="but">Дни Рождения</div>
          <div id="pw3-but" class="but">Статистика</div>
          <div class="clear"></div>

          <div id="nwcontent">

              <div id="pw1" class="list">
                    <b>Сколько юзеров на форуме?</b>
                    <hr />
                    <p>{TOTAL_USERS_ONLINE}</p>
                  <p>{RECORD_USERS}</p>
                    <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p><table>{L_CONNECTED_MEMBERS}</table>
              </div>

              <div id="pw2" class="list">
                  <b>Поздравляем с ДР!</b>
                  <hr />
                  <table>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</table>
              </div>

              <div id="pw3" class="list">
                    <b>Статистика</b>
                    <hr />
                    <p>{TOTAL_POSTS}</p>
                    <p>{TOTAL_USERS}</p>
                    <p>{NEWEST_USER}</p>
                    <p>{LEGEND} : {GROUP_LEGEND}</p>
              </div>

          </div>
</div>
        </td>
      </tr>
  </table>

сохранить опубликовать
3. Откройте ПА > Модули > Управление кодами Javascript - создать новый Javascript

Код:

$(function(){
              $("#pw2-but, #pw3-but").css({
            'background-position' : 'center top', 'opacity' : '0.95'
        });
 $("#pw1-but").css({'background-position' : 'center -30px'});
                  $("#page-wrap div.but").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                    opacity: 1, backgroundPosition: '0 -30px'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(60, function(){
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
              }
              $clicked.siblings(".but").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
              }, 60 );
            });
      });

4. В ПА > Оформление > Цвета - Каскадная таблица стилей CSS

Код:

#page-wrap td.row1 {
background-color: transparent;
padding: 0;
margin: 0;
}
.but {
float: left;
 
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #F5FFFA;
border: 1px solid #DDF7C6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 0 3px 3px;
padding: 5px;
}

/* первый активный блок */
#pw1 {
display: block;
}

/* все скрытые блоки после первого */
#pw2, #pw3{
display: none;
}

/* общее оформление всех блоков */
#pw1, #pw2, #pw3{
padding: 3px;
text-align: left;
font-size: 10px;
}

#pw1 a:hover, #pw2 a:hover, #pw3 a:hover {
text-decoration: none !important;
}

/* общее оформление всех кнопок */
#pw1-but, #pw2-but, #pw3-but {
display: block;
width: 150px;
height: 30px;
margin: 2px 2px 0 0;
text-align: center;
line-height: 30px;
background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/snap0011.png") center top no-repeat;
color: #fff;
text-shadow: 1px 1px #688E23;
font-size: 13px;
font-weight: bolder;
}

/* первая активная кнопка */
#pw1-but {
background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/snap0011.png") center -40px no-repeat;
margin-left: 15px;
}

вроде так )

Спасибо огромное,чата нет, но форум почему-то подвисает, именно видно,что грузится низ долго. Кнопки пока оставлю эти, надоело сегодня в админке возиться)  Еще раз благодарю! 

Ой, а меня сдвинулись кнопки "предпросмотр" и "ответить" влево  

jeani, поправила код теперь кнопки в быстром стоят ровно....

Спасибо огромное, кнопки на месте! Пока темку не закрывайте,мало ли что вылезет,потестирую немного.