Как сделат такой профиль?

Dana, привет, меня тут попросили узнать как соорудить такое, ты для моего сайта делала:



Нужно для Пунн, спасибо!

Принцип тот же,что и у статистики во вкладках, только чуть грубее.
Поля профиля раскладываются на три блока: в первом аватар, во втором собственно поля профиля, а в третьем — контакты.
Над блоками вложены кнопки (фото, досье, контакты). Клик по первой кнопке отображает первый блок и прячет второй и третий, клик по второй кнопке отображает второй блок и прячет первый и третий. Третья работает аналогично.

Вариант для Pun.

1) В шаблоне viewtopic_body заменить

Код:

<div class="user">
                     <div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}<br />
                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>

на

Код:

<div class="user">
      <div class="user-ident"><h4 class="username">{postrow.displayed.POSTER_NAME}</h4></div>
      <div class="prof-post">
         <div class="pp-but">
               <span class="pp-button1">Фото</span>
               <span class="pp-button2">Досье</span>
               <span class="pp-button3">Контакты</span>
         </div>

         <div class="clear"></div>

         <div class="pp-1">
            {postrow.displayed.ONLINE_IMG}
            <div class="user-basic-info">{postrow.displayed.POSTER_AVATAR}   {postrow.displayed.POSTER_RANK_NEW}<br />{postrow.displayed.RANK_IMAGE}</div>
         </div>

         <div class="pp-2">
            <div class="user-info"><!-- BEGIN profile_field --><br />{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>
         </div>

         <div class="pp-3">
            <div class="user-contact">{postrow.displayed.PROFILE_IMG}{postrow.displayed.PM_IMG}{postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div>
         </div>

      </div>

</div>

Сохранить, опубликовать (!)


2) Добавить в ПА > Модули > Управление кодами Javascript скрипт для переключения вкладок по клику на соответствующей кнопке

Код:

$(document).ready(function (){

    $(".pp-button2").click(function(){
          $(this).parents("div.prof-post").children("div.pp-1,div.pp-3").hide();
          $(this).parents("div.prof-post").children("div.pp-2").show();
    });

    $(".pp-button3").click(function(){
          $(this).parents("div.prof-post").children("div.pp-1,div.pp-2").hide();
          $(this).parents("div.prof-post").children("div.pp-3").show();
    });

    $(".pp-button1").click(function(){
          $(this).parents("div.prof-post").children("div.pp-2,div.pp-3").hide();
          $(this).parents("div.prof-post").children("div.pp-1").show();
    });

});

Сохранить.

3) В CSS добавить:

Код:

/* оформление профиля с содержимым */

.prof-post {
text-align: center;
}

    /* первый активный блок */
    .pp-1 {
    display: block;
    }

    /* все скрытые блоки после первого */
    .pp-2, .pp-3 {
    display: none;
    }

    /* общее оформление всех блоков */
    .pp-1, .pp-2, .pp-3 {
    padding: 0;
    }

    /* общее оформление всех кнопок */
    .pp-button1, .pp-button2, .pp-button3 {
    display: inline-block;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    margin: 2px 2px 2px 0;
    padding: 0 2px; 
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px #8E7E97;
    font-size: 10px;
    font-weight: bolder;
    background: #D2B48C;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    }

.pp-but {
display: block;
margin: 0 auto;
text-align: center;
}

/* кнопки контактов друг под другом */
.user-contact > a {
display: block;
margin-bottom: 10px;
}


Спасибо, Даначка!

А для PHPbb2 подойдёт?

Да, уточнения минимальны.

1. В шаблоне viewtopic_body (Показ темы) заменить

Код:

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />

на

Код:

<div class="user">
      <div class="user-ident"><h4 class="username">{postrow.displayed.POSTER_NAME}</h4></div>
      <div class="prof-post">
        <div class="pp-but">
              <span class="pp-button1">Фото</span>
              <span class="pp-button2">Досье</span>
              <span class="pp-button3">Контакты</span>
        </div>

        <div class="clear"></div>

        <div class="pp-1">
            <div class="user-basic-info">{postrow.displayed.POSTER_AVATAR}  {postrow.displayed.POSTER_RANK_NEW}<br />{postrow.displayed.RANK_IMAGE}</div>
        </div>

        <div class="pp-2">
            <div class="user-info"><!-- BEGIN profile_field --><br />{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>
        </div>

        <div class="pp-3">
            <div class="user-contact">{postrow.displayed.PROFILE_IMG}{postrow.displayed.PM_IMG}{postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div>
        </div>

      </div>

</div>

А фрагмент

Код:

<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
</td>

заменить на

Код:

<td valign="middle"></td>

Сохранить, опубликовать.

2. Скрипт без изменений.

3. В CSS добавить:

Код:

/* оформление профиля с содержимым */

.prof-post {
font-size: 10px;
}

    /* первый активный блок */
    .pp-1 {
    display: block;
    }

    /* все скрытые блоки после первого */
    .pp-2, .pp-3 {
    display: none;
    }

    /* общее оформление всех блоков */
    .pp-1, .pp-2, .pp-3 {
    padding: 0;
    }

    /* общее оформление всех кнопок */
    .pp-button1, .pp-button2, .pp-button3 {
    display: inline-block;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    margin: 2px 2px 2px 0;
    padding: 0 2px; 
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px #8E7E97;
    font-size: 10px;
    font-weight: bolder;
    background: #D2B48C;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    }

.user-contact {
text-align: center;
}

.pp-but {
display: block;
margin: 0 auto;
text-align: center;
}

/* кнопки контактов друг под другом */
.user-contact > a {
display: block;
margin-bottom: 10px;
}