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

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


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

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

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


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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Compact profile. [phpBB2]

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

Compact profile. [phpBB2]

Сообщение автор Сказочник Зазеркалья в Вт 16 Апр - 11:22

Всем приветик ребята. girl_yes

В данном туториале речь пойдёт об подобном отображения личного профиля юзеров(см. Скриншот). Как видите вариант подобного отображения очень даже привлекательный и удобный, а с дополнительной настройкой, может выглядеть ещё лучше. В данном туториале я выложу инструкцию по созданию "Классического" профиля. В дальнейшем я выложу туториалы, которые можно применить с этим отображением профиля. 12



Данная версия туториала пока что только для версии форумов phpBB2 , для других версий, ещё в разработке. И так ниже приведена инструкция по созданию подобного профиля.





Этап первый - Отключение лишних функций.

Панель Администратора - Пользователи и группы - Профили.

Редактируете поле Сообщения , путём отключения его отображения в профиле.

Затем топаем дальше:

Панель Администратора - Пользователи и группы - Профили - Общие настройки.

И отключаем вкладки для показа:



Внимание: Для корректного отображения профиля, советую отключить лист персонажа.





Этап второй - Включение Неразвёрнутого профиля.

Поначалу считала этот этап лишним и убрала его из туториала, но потом поняла что не все сразу смогут найти где включить подобный профиль. Ниже указано как включить неразвёрнутый профиль, у себя на форуме:

Панель Администратора - Пользователи и группы - Пользователи - Профили - Общие настройки.
Активировать развёрнутый профиль :
НЕТ!

Теперь можно переходить в третьему этапу. Exclamation






Этап третий - Отключение меню в профиле.

Панель Администратора - Оформление - Шаблоны - Общие настройки - overall_header.

В шаблоне найдите ниже указанный фрагмент и замените его:
Код:
<td align="{MENU_POSITION}" {MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

На этот код:
Код:
<td align="{MENU_POSITION}" {MENU_NOWRAP} class="basemn">{GENERATED_NAV_BAR}</td>

Опубликуйте и сохраните шаблон. plus





Этап четвёртый - Замена шаблона.

Теперь можно пойти в шаблон профиля, чтобы заменить его.

Панель Администратора - Оформление - Шаблоны - Профиль - profile_view_body.

Полностью удаляем содержимое шаблона, после чего вставляем ниже выложенный шаблон:

Код:
<style type="text/css">
/* Поднять форум изнутри */
.forumline {
margin-top: -50px;
}
</style>


<style type="text/css">
/* Опустить логотип */
#i_logo {
margin-bottom : -40%;
}
</style>


<style type="text/css">
/* Скрыть меню навигации */
.basemn {
display: none;
}
</style>


<style type="text/css" >
/* углы сайта */
.forumline{
-moz-border-radius:1px !important;
-khtml-border-radius:1px !important;
-webkit-border-radius:1px !important;
border-radius:1px !important;
border:2px double #FFFFFF !important;
padding:5-px !important; 
}

.bodyline{
-moz-border-radius:10px !important;
-khtml-border-radius:10x !important;
-webkit-border-radius:10px !important;
border-radius:10px !important;
border:7px double #FFFFFF !important;
padding:1px !important;
}
</style>

 
<style type="text/css" > 
/* Скрыть линии разделения */
.forumline {
border-collapse: collapse;
}
.forumline.ton {
border-collapse: separate !important;
}
</style>
 
 

<style type="text/css" >
 
/* Внутренний фон №2*/

td.row1{
background-image: url("http://www.snapsnap.ru/i/ibackground.png");
}
td.row2{
background-image: url("http://www.snapsnap.ru/i/ibackground.png");
}
td.row3{
background-image: url("http://www.snapsnap.ru/i/ibackground.png");
}
</style>


<style type="text/css" >
/* Внутренний фон форума */
.bodyline {
background-image: url(http://www.snapsnap.ru/i/ibackground.png);
}
</style>


<style type="text/css">
/* Скрыть Тулбар */
#fa_toolbar, #fa_toolbar_hidden {
display: none !important;
}
</style>



<style type="text/css" >
  /* Опустить сайт */
body {
margin-top: 50px;
}
</style>


<style type="text/css">
/* Опустить сайт№2 */
.bodylinewidth {
padding-top: 50px;
}
 </style>




    <style>
    /* Скрыть шапку */
      #i_logo {display : none;}
    </style>


<style type="text/css">
/* Отдельный фон */
body {
background: url(http://i70.servimg.com/u/f70/17/66/77/30/nastol12.jpg); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}
</style>

 
    <table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
    <tr>
    <td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
    </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
     
      <tr>
          <td class="catLeft" align="center" width="40%" height="28">
          <td class="catRight" width="50%" align="center"><b><span class="gen">Досье пользователя: {USERNAME}</span></b></td>
      </tr>
      <tr>
          <td class="row1" align="center" valign="top" height="120">
            <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <tr>
                  <td valign="middle" nowrap="nowrap" align="right" width="20%">
                  <td width="80%"style="padding-top: 15px;"><b><span class="gen pof-ava ">{AVATAR_IMG}</span></b></td>
                </tr>
                <!-- BEGIN switch_allow_friendsfoes -->
<!-- START
                <tr>
                  <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_FRIENDS_AND_FOES}: </span></td>
                  <td><span class="gen"><strong>{FRIENDSFOES}</strong></span></td>
                </tr>
FINISH -->
                <!-- END switch_allow_friendsfoes -->
                <!-- BEGIN switch_auth_user -->
                <tr>
                  <td valign="middle" nowrap="nowrap" align="right"><br /><span class="gen">{L_ADMINISTRATE_USER}: </span></td>
                  <td><br /><strong><span class="gen">{ADMINISTRATE_USER}{BAN_USER}</span></strong></td>
                </tr>
              <!-- END switch_auth_user -->
                </table>
              </td>
              <td class="row1" valign="top" id="profile_user_right">
            <div class="profff"><table width="100%" border="0" cellspacing="1" cellpadding="0">
           
            <!-- BEGIN switch_dhow_mp -->
           
            <!-- END switch_dhow_mp -->
            <!-- BEGIN profile_field -->
            <tr id="field_id{profile_field.ID}">
                <td width="40%" align="right" valign="top" nowrap="nowrap"><span class="gen">{profile_field.LABEL}  </span></td>
                <td width="60%" width="100%"><b><span class="gen">{profile_field.CONTENT}</span></b><!-- BEGIN profil_type_user_posts --><br /><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br />
                <span class="genmed"><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
                    - <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                    - <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span><!-- END profil_type_user_posts --></td>
            </tr>
             
            <!-- END profile_field -->
                  <tr>
      <td width="40%" align="right" valign="top" nowrap="nowrap"><b><span class="gen">{L_STATUT}:</span></b></td>
      <td width="60%" width="100%"><b><span class="gen">{USER_ONLINE}</span></b></td>
  </tr>
            </table></div>
          </td>
      </tr>
<!-- START
      <tr>
          <td class="row1" valign="top" height="{S_CONTACT_HEIGHT}">
            <table width="100%" border="0" cellspacing="1" cellpadding="0">
FINISH -->
                <!-- BEGIN switch_admin_user_comment_active -->
<!-- START
                <tr>
                  <td align="right" valign="middle" nowrap="nowrap" width="50%">
                      <span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span>
                  </td>
                  <td class="row1" valign="middle">
                      <table align="center">
                        <tr>
                            <td>
                              {ADMIN_USER_COMMENT}
                            </td>
                        </tr>
                      </table>
                  </td>
                </tr>
FINISH -->
                <!-- END switch_admin_user_comment_active -->
<!-- START
            </table>
          </td>
      </tr>
FINISH -->
      <!-- BEGIN switch_rpg -->
      <tr>
          <td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
      </tr>
      <tr>
          <td class="row1" align="center" valign="top" height="6">
            {RPG_IMAGE}<br /><br />
            <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN rpg_fields_left -->
                <tr>
                  <td align="right" valign="middle" nowrap="nowrap">
                  <span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
                  </td>
                  <td width="100%" valign="middle" nowrap="nowrap">
                  <b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
                  </td>
                </tr>
                <!-- END rpg_fields_left -->
            </table>
          </td>
          <td class="row1" align="center" valign="top" height="6">
            <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN rpg_fields -->
                <tr>
                  <td align="right" valign="middle" nowrap="nowrap">
                      <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
                  </td>
                  <td width="100%" valign="baseline">
                      <b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
                  </td>
                </tr>
                <!-- END rpg_fields -->
            </table>
          </td>
      </tr>
      <tr>
          <td colspan="2" align="center" class="row1">
            {U_ADMIN_RPG}
          </td>
      </tr>
                  <!-- END switch_rpg -->
        <tr>
            <td colspan="2" style="padding: 0; margin: 0; background: url('http://i70.servimg.com/u/f70/17/66/77/30/i_back13.jpg') repeat-x; height: 32px;"> </td>
        </tr>
    </table>
    <br />
    <script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
      $(document).ready(function(){
          $('[id^=field_id]').each(function(){
            if ( $(this).find('.field_editable').is('span') )
            {
                $(this).hover(function()
                {
                  if( $(this).find('.field_editable.invisible').is('span') )
                  {
                      $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                      $(this).find('.ajax-profil_edit').attr({
                            alt: "{L_FIELD_EDIT_VALUE}",
                            title: "{L_FIELD_EDIT_VALUE}"
                        }).click(function(){
                        $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                        $(this).prev().find('.ajax-profil_valid').attr({
                            alt: "{L_VALIDATE}",
                            title: "{L_VALIDATE}"
                        }).click(function(){
                            var content = new Array();
                            $(this).parent().find('[name]').each(function(){
                              var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                              if ( (type_special && $(this).is(':checked')) || !type_special )
                              {
                                  content.push(new Array($(this).attr('name'), $(this).attr('value')));
                              }
                            });
                            var id_name = $(this).parents('[id^=field_id]').attr('id');
                            var id = id_name.substring(8, id_name.length);
                            $.post(
                              "{U_AJAX_PROFILE}",
                              {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                              function(data){
                                  $.each(data, function(i, item){
                                    $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                  });
                              },
                              "json"
                            );
                        });
                        $(this).remove();
                      });
                  }
                },function()
                {
                  if( $(this).find('.field_editable.invisible').is('span') )
                  {
                      $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                      $(this).find('.ajax-profil_edit').remove();
                  }
                });
            }
          });
      });
    //]]>
    </script>

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


Внимание:
В шаблоне присутствует такая строка кода:
<td colspan="2" style="padding: 0; margin: 0; background: url('http://i70.servimg.com/u/f70/17/66/77/30/i_back13.jpg') repeat-x; height: 32px;"> </td>

Она отвечает за изображение - полоску, внизу профиля под аватаркой. Ссылку изображения, вы можете заменить на своё изображение полоску. Exclamation


Дополнительная информация: Как вы видите в начале шаблона, находятся дополнительные коды. Они нужны для того, чтобы улучшить отображение профиля. Некоторые из них вы можете изменить на своё усмотрение, например "Рамку вокруг форума" или "Внутренний фон".


Вот эти коды:

Спойлер:
<style type="text/css">
/* Поднять форум изнутри */
.forumline {
margin-top: -50px;
}
</style>


<style type="text/css">
/* Опустить логотип */
#i_logo {
margin-bottom : -40%;
}
</style>


<style type="text/css">
/* Скрыть меню навигации */
.basemn {
display: none;
}
</style>


<style type="text/css" >
/* углы сайта */
.forumline{
-moz-border-radius:1px !important;
-khtml-border-radius:1px !important;
-webkit-border-radius:1px !important;
border-radius:1px !important;
border:2px double #FFFFFF !important;
padding:5-px !important;
}

.bodyline{
-moz-border-radius:10px !important;
-khtml-border-radius:10x !important;
-webkit-border-radius:10px !important;
border-radius:10px !important;
border:7px double #FFFFFF !important;
padding:1px !important;
}
</style>


<style type="text/css" >
/* Скрыть линии разделения */
.forumline {
border-collapse: collapse;
}
.forumline.ton {
border-collapse: separate !important;
}
</style>



<style type="text/css" >

/* Внутренний фон №2*/

td.row1{
background-image: url("http://www.snapsnap.ru/i/ibackground.png");
}
td.row2{
background-image: url("http://www.snapsnap.ru/i/ibackground.png");
}
td.row3{
background-image: url("http://www.snapsnap.ru/i/ibackground.png");
}
</style>


<style type="text/css" >
/* Внутренний фон форума */
.bodyline {
background-image: url(http://www.snapsnap.ru/i/ibackground.png);
}
</style>


<style type="text/css">
/* Скрыть Тулбар */
#fa_toolbar, #fa_toolbar_hidden {
display: none !important;
}
</style>



<style type="text/css" >
/* Опустить сайт */
body {
margin-top: 50px;
}
</style>


<style type="text/css">
/* Опустить сайт№2 */
.bodylinewidth {
padding-top: 50px;
}
</style>




<style>
/* Скрыть шапку */
#i_logo {display : none;}
</style>


<style type="text/css">
/* Отдельный фон */
body {
background: url(http://i70.servimg.com/u/f70/17/66/77/30/nastol12.jpg); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}
</style>

Exclamation Внимание: Код: Поднять форум изнутри, вам придётся сразу же изменить под свои параметры (если отображение профиля, будет неправильным), так как может возникнуть кривое отображение профиля. У вас должно получиться как на первом скрине, т.е аккуратное отображение. Экспериментируйте и используйте разные настройки, для того чтобы улучшить отображение внешнего вида профиля. Arrow





Этап пятый - Настройка через CCS.

Теперь переходим к настройке оформления. В настройках CCS можно настроить рамку, фон инфы, шрифт в профиле и т.д. Ниже выложен полный свёрток кодов, которые нужны для корректного отображения профиля:

Код:

/* Отключить лишние чёрточки */
td.catLeft, th.thLeft, td.catHead, th.thHead, td.catBottom, th.thBottom {
border-width: 0 !important;
}


/* Рамка для аватарки в профиле */
.pof-ava img{
background-color: #FFFFFF;
padding: 1px;
margin: 2px 0 6px;
border: 1px solid transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 10px 0 #FFFFFF;
-webkit-box-shadow: 0 0 10px 0 #FFFFFF;
-moz-box-shadow: 0 0 10px 0 #FFFFFF;
}



/* Фон инфы в профиле */
.profff {
background:#000 url(http://i70.servimg.com/u/f70/17/66/77/30/dnnnnn12.jpg) center right no-repeat;
margin: 30px auto 40px;
width: 300px; 
border: 2px solid #FFFFFF;
padding: 0px 5px 5px 0px;
border-radius: 10px; 
}


/* Для профиля */
div.userblok_name{
text-align: left;
font-size: 11px;
font-weight: bold;
float: left;
margin-left: 6px;
}
div.userblok_pm{
float: left;
margin-left: 6px;
}
div.userblok_nomber{
text-align: right;
font-size: 11px;
float: right;
margin-right: 6px;
}

div.userblok_info{
text-align: left;
font-size: 10px;
margin-left: 6px;
}
div.userblok_infodown{
text-align: left;
font-size: 10px;
margin-left: 6px;
}


/* Шрифт инфы */
.profff .gen, .field_uneditable {
font-family: Arial !important;
}


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

Спойлер:
Разберём коды по частям:


Отключение лишних чёрточек:

/* Отключить лишние черточки */
td.catLeft, th.thLeft, td.catHead, th.thHead, td.catBottom, th.thBottom {
border-width: 0 !important;
}

Этот код подвергать изменению думаю не нужно. Он помогает убрать из форума, а в основном из показа профиля лишние чёрточки,рядом с рамками.



Рамка для аватарок в профиле:

/* Рамка для аватарки в профиле */
.pof-ava img{
background-color: #FFFFFF;
padding: 1px;
margin: 2px 0 6px;
border: 1px solid transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 10px 0 #FFFFFF;
-webkit-box-shadow: 0 0 10px 0 #FFFFFF;
-moz-box-shadow: 0 0 10px 0 #FFFFFF;
}

Данный код отвечает за красивую рамку, для аватарок каждого юзера. Меняйте её параметры на свои, чтобы добиться красивого слияния с дизайном своего форума.



Фон и рамка инфы в блоке об юзере:

/* Фон и рамка инфы в профиле */
.profff {
background:#000 url(http://i70.servimg.com/u/f70/17/66/77/30/dnnnnn12.jpg) center right no-repeat;
margin: 30px auto 40px;
width: 300px;
border: 2px solid #FFFFFF;
padding: 0px 5px 5px 0px;
border-radius: 10px;
}

Этот код позволит изменить толщину рамки, цвет рамки, а также добавить фон в внутрь блока с информацией об юзере. Дополнительно можно настроить отступ блока сверху и снизу.



Настройки отображения профиля:

/* Для профиля */
div.userblok_name{
text-align: left;
font-size: 11px;
font-weight: bold;
float: left;
margin-left: 6px;
}
div.userblok_pm{
float: left;
margin-left: 6px;
}
div.userblok_nomber{
text-align: right;
font-size: 11px;
float: right;
margin-right: 6px;
}

div.userblok_info{
text-align: left;
font-size: 10px;
margin-left: 6px;
}
div.userblok_infodown{
text-align: left;
font-size: 10px;
margin-left: 6px;
}

Это лучше не трогать, если вы не разбираетесь в CCS кодах.


Шрифт информации в профиле:

/* Шрифт инфы */
.profff .gen, .field_uneditable {
font-family: Arial !important;
}

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


На этом заканчивается основная настройка отображения "Классического «профиля». В скором времени я буду выкладывать туториалы, в которых описывается как сделать более крутые профили. Exclamation



Примечание.

Уважаемые форумчане: Если вы найдёте в туториале ошибки или неправильные шаги туториала, пожалуйста напишите мне об этом в л/с. Туториал хоть и писала не на скорую руку, но всё же могла допустить ошибки в грамматике или инструкции. punish


Желаю всем удачи в улучшении и продвижении ваших форумов. До встречи в новых туториалах ребята. 40



С уважением Мишель Картер aka Сказочница Зазеркалья.
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://stihi.ru/autor/milanwake

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

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


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