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

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


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

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



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

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


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

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

Profile of the tabs. [phpBB2]

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

Решено Profile of the tabs. [phpBB2]

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

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

В течении определённого времени я работал над совершенствованием нерасширенного профиля и в конце концов я смог прийти к решению желанной задачи. Для начала хочу сказать что данное улучшение подойдёт пока лишь для phpBB2. Опыта работы с punBB у меня ещё мало, но думаю в скором времени я его наберу. И так собственно говоря речь пойдёт о таком улучшении, как блок с вкладками в профиле юзера. Подобный блок может включать в себя : Аудио плеер, стену для общения, новостные блоки, чатик, флеш игры, да вообще что угодно можно в него поставить. А также доступна гибкая настройка оформления.  Arrow

Хочу сказать огромное спасибо Дане Домирани, так как блок с вкладками взят из её туториала.  rose

И так ниже расположена подробная инструкция, по установке на свой форум подобного профиля с вкладками:





Exclamation  Инструкция по созданию и установке.  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://savepic.org/3298035.gif");
}
td.row2{
background-image: url("http://savepic.org/3298035.gif");
}
td.row3{
background-image: url("http://savepic.org/3298035.gif");
}
</style>


<style type="text/css" >
/* Внутренний фон форума */
.bodyline {
background-image: url(http://savepic.org/3298035.gif);
}
</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 -->
        
       
   <table class="forumline ton" width="100%" border="0" cellspacing="1" cellpadding="0">
<div class="profiblok"><td class="catHead" colspan="2" height="28">
</td>
<tr>

<td>

     <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 id="pw5-button" class="button">Радио сайта</div>
          <div id="pw6-button" class="button">Новости VK</div></div>
          <div class="clear"></div>
      
         <div id="nwcontent">

               <div id="pw1" class="list">
                    <b>Сколько юзеров на форуме?</b>
                    <hr />
                    <p>{TOTAL_USERS_ONLINE}</p>
                   <p>{RECORD_USERS}</p>
                    <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p><table>{L_CONNECTED_MEMBERS}</table>
               </div>

               <div id="pw2" class="list">
                   Здесь ваше содержимое
               </div>

               <div id="pw3" class="list">
                    
                    Здесь ваше содержимое
               </div>

               <div id="pw4" class="list">
                    Здесь ваше содержимое
      </div>
 

<div id="pw5" class="list">
              
                    Здесь ваше содержимое
               </div>

 <div id="pw6" class="list">
                    
        Здесь ваше содержимое
               </div>


          </div>
</div>
         </td>
      </tr>
   </table></div>
        
   <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>


В данном шаблоне присутствуют блоки, которые нужно настроить под свой форум и нужное содержимое. Инструкция в ниже расположенном этапе.  Exclamation








Этап четвёртый - Настройка блоков.

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

Главный код с вкладками:

Спойлер:

<table class="forumline ton" width="100%" border="0" cellspacing="1" cellpadding="0">
<div class="profiblok"><td class="catHead" colspan="2" height="28">
</td>
<tr>

<td>

    <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 id="pw5-button" class="button">Радио сайта</div>
         <div id="pw6-button" class="button">Новости VK</div>

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

         <div id="nwcontent">

              <div id="pw1" class="list">
                   <b>Сколько юзеров на форуме?</b>
                   <hr />
                   <p>{TOTAL_USERS_ONLINE}</p>
                  <p>{RECORD_USERS}</p>
                   <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p><table>{L_CONNECTED_MEMBERS}</table>
              </div>

            <div id="pw2" class="list">
                Здесь ваше содержимое
            </div>

              <div id="pw3" class="list">
                   
                   Здесь ваше содержимое
              </div>

              <div id="pw4" class="list">
                   Здесь ваше содержимое
     </div>


<div id="pw5" class="list">
             
                   Здесь ваше содержимое
              </div>

<div id="pw6" class="list">
                   
       Здесь ваше содержимое
              </div>


         </div>
</div>
        </td>
     </tr>
  </table></div>



Настройка вкладок и блоков:

Спойлер:
Настройка блоков №1.

Ниже приведённый кусок кода, отвечает за блоки:


<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 id="pw5-button" class="button">Радио сайта</div>
         <div id="pw6-button" class="button">Новости VK</div>



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

         <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 id="pw5-button" class="button">Радио сайта</div>
         <div id="pw6-button" class="button">Новости VK</div>
        <div id="pw7-button" class="button">Радио сайта</div>
         <div id="pw8-button" class="button">Флеш игры</div>
         <div id="pw9-button" class="button">Меню сайта</div>






Настройка блоков №2.

А эти коды отвечают за саму ячейку с содержимым:

<div id="pw2" class="list">

</div>


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




Настройка содержимого блока.

И последняя часть настройки блоков, это содержимое. Заместо слов "Здесь ваше содержимое", вставляете ваши коды, картинки, видео и т.д

Здесь ваше содержимое

Но тут возникает трабла. старайтесь не сильно запихивать эти блоки, иначе в один момент они могут глюкнут, но это всего 30% вероятности.  Exclamation

Когда закончите с настройкой вкладок и блоков, можно переходить к последним этапам.  Exclamation








Этап пятый - Javascript.


Теперь самое время подключить Javascript, для работоспособности блока с вкладками:

ПА  - Модули - HTML & JAVASCRIPT - Управление кодами Javascript.


Создаём новый Javascript с такими параметрами:

Название * : Любое, например Профиль с вкладками.
Расположение : На всех страницах!


В содержимое, ставим ниже указанный скрипт:
Код:
$(function(){
               $("#pw2-button, #pw3-button, #pw4-button, #pw5-button, #pw6-button").css({
            'background-position' : 'center top', 'opacity' : '0.95'
         });
 $("#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'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(60, function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
               }, 60 );
            });
      });

Примечание: Если вы увеличите число кнопок, тогда в этой строке кода : #pw2-button, #pw3-button, #pw4-button, добавьте ещё коды #pw7-button, #pw8-button, #pw9-button.









Этап шестой - Коды CCS.


Ну и завершающий этап настройки данного профиля, это коды CCS. Топаем в каскадную таблицу и ставим туда коды:

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

Для начала ставим коды для общего оформления Профиля:

Код:
/* Доп. настройка для блока №1 */
#page-wrap {
padding: 1;
}


/* Доп. настройка для блока №2 */
.profiblok {
  margin-top: 20px;
}

/* Отключить лишние черточки */
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 60px;
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 кодах.



Дополнительный код блока:

/* Дополнительный код */
#page-wrap {
padding: 1;
}

Данный код лучше не трогать, так как он отвечает за вертикальное положение кнопок.



Вертикальное положение блока:

/* Поднятие блока вкладок */
.profiblok {
 margin-top: 20px;
}

Данный код редактировать стоит лишь в том случае, если блок слишком высоко или низко.


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

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

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



Затем вставляем коды для настройки Блока с вкладками:

Код:
/* Оформление блока с вкладками */

#page-wrap td.row1 {
background-color: black;
padding: 0;
margin: 0;
}

.button {
float: left;
cursor: pointer;
}

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

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

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

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

#pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover, #pw5 a:hover, #pw6 a:hover {
text-decoration: none !important;
}

/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button, #pw5-button, #pw6-button {
display: block;
width: 150px;
height: 30px;
margin: 2px 2px 0 0;
text-align: center;
line-height: 30px;
background: transparent url("http://savepic.org/3273868.png") center top no-repeat;
color: #fff;
text-shadow: 1px 1px #000000;
font-size: 14px;
}

/* первая активная кнопка */
#pw1-button {
background: transparent url("http://savepic.org/3273868.png") center -40px no-repeat;
margin-left: 20px;
}


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

Спойлер:
/* Оформление блока с вкладками */

#page-wrap td.row1 {
background-color: black;
padding: 0;
margin: 0;
}

.button {
float: left;
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #000000;   - Цвет фона внутри блоков. Настроить можно цвет фона.
border: 2px solid #DDF7C6; - Рамка вокруг блока. Настроить можно толщину и цвет рамки.
-moz-border-radius: 5px; - Уровень закругления углов рамки.
-webkit-border-radius: 5px; - Уровень закругления углов рамки.
-khtml-border-radius: 5px; - Уровень закругления углов рамки.

border-radius: 5px;
margin: 0 3px 3px;
padding: 5px;
}

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

/* все скрытые блоки после первого */
#pw2, #pw3, #pw4, #pw5, #pw6 {   - При добавлении новых вкладок, добавьте сюда доп.коды, вот так: #pw7, #pw8#, pw9.
display: none;
}


/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4, #pw5, #pw6 {  - При добавлении новых вкладок, добавьте сюда доп.коды, вот так:  #pw7, #pw8#, pw9.

padding: 3px;
text-align: left;
font-size: 12px;
}

#pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover, #pw5 a:hover, #pw6 a:hover { - При добавлении новых вкладок, добавьте сюда доп.коды, вот так:  #pw7 a:hover, #pw8 a:hover, #pw9 a:hover.
text-decoration: none !important;
}

/* общее оформление всех кнопок */
n]]#pw1-button, #pw2-button, #pw3-button, #pw4-button, #pw5-button, #pw6-button {  - При добавлении новых вкладок, добавьте сюда доп.коды, вот так: #pw7-button, #pw8-button, #pw9-button,[/b]
display: block;
width: 150px;  - Ширина изображения - кнопки вкладки. Желательно не изменять.(!)
height: 30px;  - Высота изображения - кнопки вкладки. Желательно не изменять. (!)

margin: 2px 2px 0 0;
text-align: center;
line-height: 30px;
background: transparent url("http://savepic.org/3273868.png") center top no-repeat;  - Ссылка на изображение кнопки - вкладки. Можно использовать не двойную кнопку, т.е обычную.
color: #fff;   - Цвет текста названия Вкладок.
text-shadow: 1px 1px #000000; - Наложение тени на текст названия кнопки.
font-size: 14px;  - Размер шрифта названия вкладки.

}

/* первая активная кнопка */
#pw1-button {  
background: transparent url("http://savepic.org/3273868.png") center -40px no-repeat; - Первая активная кнопка должна двойной, т.е чтобы под первым изображением было аналогичное первому по размеру.
margin-left: 20px;
}




Примечание.

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



На этом заканчивается стандартная инструкция по установке. Когда будет время, я напишу дополнительный туториал, по улучшению Блока с вкладками в профиле. Желаю всем удачи и успеха в улучшении ваших форумов. До встречи в новых туториалах ребятки.  :89:



С уважением автор данного туториала Михаэль Вейк aka Сказочник Зазеркалья.

Сказочник Зазеркалья
Дизайнер
Дизайнер

Пол : Мужчина
Сообщения : 3672
Возраст : 25
Место обитания : Морг.
Карма : Без предупреждений
Благодарности : 687
Регистрация : 2012-11-16

http://help.forum2x2.ru

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

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


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