как таким образом оформить статистику?

Добрый день, уважаемые "волшебники"! :cveti:

Может Вы мне поможете? Я увидела на сайте Dana Domirani безумно стильную статистику форума. Очень хочется так оформить и свою(плавный переход от "Кто онлайн" к "Дни рождения", "Статистика" и "Чат") - http://www.poltergeist-legacy.com/forum

И ещё, как туда поместить чат?

Большое спасибо!

Можно сделать на BB2 и Pun.

у меня как раз phpBB2. как я могу это оформить?
так ведь у Вас на форуме внизу есть кнопочка "чат" ...

Проверила, чат тоже ставится.
Целиком все выглядит так:

Выглядит шикарно! и очень подходит к моему форуму) будем ждать.

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}


на

Код:

<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
В поле "Название" вбейте, например, Статистика во вкладках
В поле "Код" скопируйте:

Код:

jQuery(document).ready(function(){

$("#pw2-button, #pw3-button, #pw4-button").css("opacity", "0.95").addClass("dez");
$("#pw1-button").addClass("aktv");
$("#page-wrap div.button").click(function(){
                 $clicked = $(this);
                      if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                      $clicked.animate({
                     opacity: 1}, 60 ).removeClass("dez").addClass("aktv");
                  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}, 60 ).removeClass("aktv").addClass("dez");
            });

});

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


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;
min-height: 150px !important; /* минимальная высота блока */
}

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

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

/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4 {
padding: 3px;
text-align: left;
font-size: 10px;
min-height: 140px !important; /* минимальная высота содержимого блока */
}

#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") no-repeat; /* изображение кнопок */
color: #fff;
text-shadow: 1px 1px #688E23;
font-size: 13px;
font-weight: bolder;
}

/* первая активная кнопка */
#pw1-button {
margin-left: 15px;
}

/* стиль дезактивированной кнопки - показана только верхняя половина ее фона */
.dez {
background-position: 50% 0% !important;
}

/* стиль активированной кнопки - показана только нижняя половина ее фона */
.aktv {
background-position: 50% 100% !important;
}


и сохраните.

Ссылка https://i.servimg.com/u/f44/16/54/26/99/snap0011.png — это фоновое изображение всех кнопок:

Замените его на свое.
Фон должен состоять из двух одинаковых по высоте половинок: верхняя — для дезактивированных кнопок, нижняя — для активированных.

всё заработало! Как я могу Вас отблагодарить? Вы просто чудооо!!!

Всё работает!
Спасибо! ))

Спасибо. Всё прекрасно работает. Отличная работа.

Пожалуйста! Рада, что идея понравилась.

Дана а на punBB тоже самое или по другому?

Да, почти то же. Только отсюда

Код:

<table>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</table>
...
<table>{L_CONNECTED_MEMBERS}</table>

надо табличные теги выкинуть - они нужны исключительно для BB2.

Настройки для

Код:

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

лишние, смело убирай.

Ну и общую обвертку в таблицу можно убрать, оставить только дивы.

Понял, спасибо, разобрался.

Не за что ;)