Compact profile. [phpBB2]

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

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



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





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

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

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

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

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

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



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





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

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

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

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






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

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

В шаблоне найдите ниже указанный фрагмент и замените его:

Код:

<td align="{MENU_POSITION}" {MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

На этот код:

Код:

<td align="{MENU_POSITION}" {MENU_NOWRAP} class="basemn">{GENERATED_NAV_BAR}</td>

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





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

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

Панель Администратора - Оформление - Шаблоны - Профиль - 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>

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


Внимание:
В шаблоне присутствует такая строка кода:

<td colspan="2" style="padding: 0; margin: 0; background: url('https://i.servimg.com/u/f70/17/66/77/30/i_back13.jpg') repeat-x; height: 32px;"> </td>

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


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


Вот эти коды:

Спойлер:

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





Этап пятый - Настройка через 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;
}

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

Спойлер:

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



Примечание.

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


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



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