Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Gamatos в Чт 9 Июн - 22:05

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



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

Gamatos
Активист

Пол : Мужчина
Сообщения : 1294
Возраст : 24
Место обитания : Греция/Афины
Карма : Без предупреждений
Благодарности : 188
Регистрация : 2009-11-06

http://www.forum2x2.ru/forum

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Чт 9 Июн - 23:36

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

Вариант для 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;
}


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: Как сделат такой профиль?

Сообщение автор Gamatos в Пт 10 Июн - 16:34

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

Gamatos
Активист

Пол : Мужчина
Сообщения : 1294
Возраст : 24
Место обитания : Греция/Афины
Карма : Без предупреждений
Благодарности : 188
Регистрация : 2009-11-06

http://www.forum2x2.ru/forum

Вернуться к началу Перейти вниз

Решено Re: Как сделат такой профиль?

Сообщение автор Dj Raccoon в Чт 6 Сен - 17:50

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

Dj Raccoon
Новичок

Пол : Мужчина
Сообщения : 27
Возраст : 27
Место обитания : London
Карма : Без предупреждений
Благодарности : 0
Регистрация : 2012-09-06

http://fatalerror.2x2forum.ru/

Вернуться к началу Перейти вниз

Решено Re: Как сделат такой профиль?

Сообщение автор Dana Domirani в Пт 7 Сен - 17:58

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

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


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено профиль во вкладках

Сообщение автор Dj Raccoon в Пт 7 Сен - 18:30

13 

Dj Raccoon
Новичок

Пол : Мужчина
Сообщения : 27
Возраст : 27
Место обитания : London
Карма : Без предупреждений
Благодарности : 0
Регистрация : 2012-09-06

http://fatalerror.2x2forum.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения