Оформление блока статистики с помощью вкладок

Данный метод позволяет оформить блоки "Статистика", "Кто сейчас на форуме" и "ЧАТ" в виде единого блока с переключающимися вкладками :



1. Включите внизу на странице чат (ПА > Модули > ЧАТ - Конфигурация > Показ ЧАТа: на главной стр. внизу)

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

Код:

    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
      </tr>
      <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 class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
      </tr>
      <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
      </tr>
      {L_CONNECTED_MEMBERS}
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
      <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
      </tr>
      <!-- BEGIN switch_chatbox_activate -->
      <tr>
          <td class="row1">
            <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
            </span>
          </td>
      </tr>
      <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->
    {CHATBOX_BOTTOM}
    <br clear="all" />

на

Код:

<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-button" class="button">Кто онлайн</div>
          <div id="pw2-button" class="button">Дни Рождения</div>
          <div id="pw3-button" class="button">Статистика</div>
          <div id="pw4-button" class="button">Чат</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 id="pw4" class="list">
                    <b>Общение онлайн</b>
                    <hr />
              {CHATBOX_BOTTOM}
              <p>[ <a href="/chatbox/index.forum?" target="_blank">Открыть чат на отдельной странице</a> ]</p>
              <p>Если кнопка "Войти в ЧАТ" не видна, авторизируйтесь на форуме ;) </p>
      </div>

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

Сохраните, опубликуйте шаблон.

3. Откройте ПА > Модули > Управление кодами Javascript - создать новый Javascript
В поле "Название" вбейте название, например, Статистика
В поле "Код" скопируйте:

Код:

$(function(){
              $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.95'
        });
 $("#pw1-button").css({'background-position' : 'center -30px'});
                  $("#page-wrap div.button").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(".button").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
              }, 60 );
            });
      });

Сохраните скрипт.

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

Код:

#page-wrap td.row1 {
background-color: transparent;
padding: 0;
margin: 0;
}

.button {
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, #pw4 {
display: none;
}

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

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

/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button {
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-button {
background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/snap0011.png") center -40px no-repeat;
margin-left: 15px;
}


и сохраните.

---

Само собой разумеется, вам нужно будет изменить дизайн кнопок на подходящий под стиль вашего форума.

Эти кнопки состоят из текста и фоновой картинки:

Размеры - 150*30

Фон у всех кнопок общий. Он прописан тут:

Код:

/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button {
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;
}


Чтобы заменить кнопки на свои, надо изменить ссылку
https://i.servimg.com/u/f44/16/54/26/99/snap0011.png
на новую, такую же двойную кнопку, например:

https://i.servimg.com/u/f44/16/54/26/99/snap0013.png

И здесь - заменить на ту же фоновую кнопку (она просто смещена вверх по умолчанию):

Код:

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