Статистика во вкладках

При таком способе оформления статистики на тестовике попробовала убрать изображение слева (в Управлении картинками заменила прозрачной), но остался небольшой зазор.

Как сделать равномерные отступы, как, например, здесь??

И если вставлять свои кнопки, можно ли изменить их размер??
Еще хотелось бы убрать кнопку Чат, и вместо нее вставить Друзья форума, чтобы поместить в эту вкладку баннеры дружеских сайтов и форумов, но это уж совсем идеальном варианте.

Есть вариант конкретно под Pun - но без 4-ой вкладки (чата) вообще.

Сейчас сделаю вариант с листом для партнерских баннеров...

Dana Domirani, была бы очень признательна!!

у меня на форуме с баннерами под пун. могу поделиться

Домовой, давайте)) Так и Dana Domirani меньше работы будет.
И еще вопрос - можно ли сделать все кнопки разными?? То есть в этом варианте, как я поняла, надписи на кнопках сделаны не в графическом редакторе. А если мы сделаем каждую кнопку в фотошопе отдельно - Кто онлайн, Дни рождения, Статистика, Баннеры?? Их можно будет поставить??
И вот еще как убрать изображение отсюда??

Убираю через Управление картинками, но остается зазор.

Вот пока с одинаковыми кнопками

Для [punBB]


Идём в ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создаём новый Javascript
Название * : Статистика
Расположение : В оглавлении
Код Javascript * :

Код:

$(function(){
              $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.9'
        });
 $("#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'
                  }, 700 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(700, function(){
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
              }
              $clicked.siblings(".button").animate({
                  opacity: 0.9, backgroundPosition: '0 0'
              }, 700 );
            });
      });

Сохранить.

Далее идём в ПА - Оформление - Шаблоны - Общие настройки
Открываем шаблон index_body (Главная страница)
Находим фрагмент:

Код:

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

         {RECORD_USERS}

         

         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}

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

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

и заменяем его на следующее:

Код:

<!-- Статистика-->
    <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">
                    <span style="font-size:14px;"><b>Сколько человек на форуме?</b></span>
                    <hr />
                    <p>{TOTAL_USERS_ONLINE}</p>
                  <p>{RECORD_USERS}</p>
                    <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p>{L_CONNECTED_MEMBERS}
<hr />
<p><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
              </div>

              <div id="pw2" class="list">
                  <span style="font-size:14px;"><b>Поздравляем с Днём Рождения!</b></span>
                  <hr />
                  {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
              </div>

              <div id="pw3" class="list">
                    <span style="font-size:14px;"><b>Статистика</b></span>
                    <hr />
                    <p>{TOTAL_POSTS}</p>
                    <p>{TOTAL_USERS}</p>
                    <p>{NEWEST_USER}</p>
                    <p>{LEGEND} : {GROUP_LEGEND}</p>
              </div>

              <div id="pw4" class="list">
                  <span style="font-size:14px;"><b>Баннеры друзей</b></span>
                  <hr />
<br/>
<center>
ЗДЕСЬ РАЗМЕЩАЕМ КОДЫ БАННЕРОВ
</center>

                    </div>
          </div>
</div>
<!-- Окончание статистики-->

Сохраняем и опубликовываем шаблон

Далее идём в ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS
и ставим код:

Код:

/*Статистика */
.button {
float: left;
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #FFFFF2; /* фон блока */
border: 1px solid #B38000; /* размер, стиль и цвет рамки блока */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 0 3px 3px;
padding: 5px;
min-height: 165px; /* минимальная высота блока. */
}

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

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

/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4 {
padding: 3px;
text-align: left;
font-size: 12px; /* размер шрифта в поле статистики */
line-height: 19px;
}

#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://r28.imgfast.net/users/2814/33/31/58/album/ddn_nn11.png") center top no-repeat;
color: #210505; /* цвет шрифта на кнопках */
text-shadow: 1px 1px #8B4513; /* тень шрифта на кнопках */
font-size: 13px; /* размер шрифта на кнопках */
}

/* первая активная кнопка */
#pw1-button {
background: transparent url("http://r28.imgfast.net/users/2814/33/31/58/album/ddn_nn11.png") center -40px no-repeat;
margin-left: 15px;
}

Сохранить.

Попробую с разными кнопками.
Но только они будут не анимированными

Попробую с разными кнопками.
Но только они будут не анимированными

Спасибо.
Анимация не обязательна, главное, чтобы можно было на каждый блок поставить свою кнопочку, и по возможности - размер кнопок можно было увеличить немного.

Вот вариант
http://test-063.forum777.com/

Там отдельными кнопками, текст написан прямо на кнопках.
Это пример, кнопки можно поставить свои, разные

Домовой, отлично!!
Вы потом мне, как особо одаренной, подскажете еще, куда вставлять коды баннеров, чтобы они отображались в этой вкладке??

С разными кнопками

Идём в ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создаём новый Javascript
Название * : Статистика
Расположение : В оглавлении
Код Javascript * :

Код:

$(function(){
              $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.9'
        });
 $("#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'
                  }, 700 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(700, function(){
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
              }
              $clicked.siblings(".button").animate({
                  opacity: 0.9, backgroundPosition: '0 0'
              }, 700 );
            });
      });

Сохранить.

Далее идём в ПА - Оформление - Шаблоны - Общие настройки
Открываем шаблон index_body (Главная страница)
Находим фрагмент:

Код:

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

         {RECORD_USERS}

         

         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}

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

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

и заменяем его на следующее:

Код:

<!-- Статистика-->
    <div id="page-wrap">
<div id="ttt">
          <div id="pw1-button"  class="button" title= "Кто на форуме"><img src="http://www.snapsnap.ru/i/2rrr.png"></div>
          <div id="pw2-button" class="button" title= "Кто отмечает день рождения"><img src="http://www.snapsnap.ru/i/2bjb.png"></div>
          <div id="pw3-button" class="button" title= "Статистика форума"><img src="http://www.snapsnap.ru/i/2zrz.png"></div>
          <div id="pw4-button" class="button" title= "Баннеры наших друзей"><img src="http://www.snapsnap.ru/i/2fvf.png"></div>
            </div>
          <div class="clear"></div>

          <div id="nwcontent">

              <div id="pw1" class="list">
                    <span style="font-size:14px;"><b>Сколько человек на форуме?</b></span>
                    <hr />
                    <p>{TOTAL_USERS_ONLINE}</p>
                  <p>{RECORD_USERS}</p>
                    <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p>{L_CONNECTED_MEMBERS}
<hr />
<p><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
              </div>

              <div id="pw2" class="list">
                  <span style="font-size:14px;"><b>Поздравляем с Днём Рождения!</b></span>
                  <hr />
                  {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
              </div>

              <div id="pw3" class="list">
                    <span style="font-size:14px;"><b>Статистика</b></span>
                    <hr />
                    <p>{TOTAL_POSTS}</p>
                    <p>{TOTAL_USERS}</p>
                    <p>{NEWEST_USER}</p>
                    <p>{LEGEND} : {GROUP_LEGEND}</p>
              </div>

              <div id="pw4" class="list">
                  <span style="font-size:14px;"><b>Баннеры друзей</b></span>
                  <hr />
<br/>
<center>
ЗДЕСЬ РАЗМЕЩАЕМ КОДЫ БАННЕРОВ
</center>

                    </div>
          </div>
</div>
<!-- Окончание статистики-->

Сохраняем и опубликовываем шаблон

Далее идём в ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS
и ставим код:

Код:

/*Статистика */
.button {
float:left;
cursor:pointer;
}

#ttt{
margin-left:10px !important;
}

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

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

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

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

#pw1-button, #pw2-button, #pw3-button, #pw4-button{
display:block;
width:150px;
height:30px;
margin:2px 2px 0 0;
}

Сохранить.
А коды баннеров ставятся в фрагмент

<center>
ЗДЕСЬ РАЗМЕЩАЕМ КОДЫ БАННЕРОВ
</center>

который находится в коде который ставится в шаблон.
Коды ставить вместо выделенного текста

Домовой, огромное спасибо, все именно так, как нужно!!
Оформление замечательное, кнопки - чудо!!