Профиль & подпись

КАк сделать так ?

Профиль:
Для реализации делаем следующее:
1. Идём в ПА - Оформление - Шаблоны - Общие настройки
Открываем шаблон viewtopic_body (Показ темы)
Находим фрагмент

Код:

<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->

и заменяем его на

Код:

<div class="spll">
<div class="splLink"><img src="http://savepic.ru/1788666.png"></div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
</div>
  </div>

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

Код:

<div class="splLink"><img src="http://savepic.ru/1788666.png"></div>

и есть кнопка которая появится у вас под аватаром.
Картинку можете вставить свою.

2. Далее идём в шаблон overall_footer (Нижняя часть страницы)
и в самый низ перед

Код:

</body>
</html>

ставим следующее:

Код:

<script type="text/javascript">
$(document).ready(function(){
  $('.splLink').parent().hover(function(){
$(this).children('div.splCont').toggle('normal');
  },
  function(){
$(this).children('div.splCont').toggle('normal');
  });
});
</script>

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

3. Теперь зададим внешний вид всплывающего профиля.
Для чего идём в Каскадная таблица стилей CSS
и вставляем следующее:

.spll {
width: 90px;
height: 30px;
}
.spll div.splCont {
height: auto;
width: 160px;
background-color: #fff!important;
padding: 15px 5px;
z-index: 999;
margin-top: 3px;
border: 1px solid #7E580A;
}

То что выделено синим трогать не стоит
ширина всплывающего профиля
фон всплывающего профиля
толщина, стиль и цвет рамки всплывающего профиля


Если вы хотите что бы профиль открывался по клику кнопки то скрипт из пункта 2 замените на это:

Код:

<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

для PUNBB добавить в CCS

Код:

.pun .post .user {
overflow: visible;
}

Сделал как вы написали, но вот что получилось:



как решить проблему?

Почти наверняка - надо снять overflow: hidden с профиля.

"Родом" этот код отсюда: https://help.forum2x2.ru/t12844-topic так что я хорошо помню этот момент

Подпись

Как сделать подпись

См. тут: https://help.forum2x2.ru/t18640-topic#148676

афигеть.
Вот может выложить все свои шаблоны и CSS, пусть пользуются

Домовой могу удалить если ты против

Dana Domirani пишет:См. тут: https://help.forum2x2.ru/t18640-topic#148676

У меня не PunBB3 покатит ?

Да.Там написано для BB3

P.S. этот способ подходит для всех движков.

Radnk пишет:Домовой могу удалить если ты против

Да нет, просто прикольно)))

gorezcaid пишет:Да.Там написано для BB3

у него PunBB

gorezcaid пишет:Да.Там написано для BB3

Что то не работает

У меня PunBB

можно сделать не картинкой, а текстом?

"◊Открыть профиль◊"

Что то не работает

Работает, на всех движках.
Как сделать текстом - написано в той же теме, внизу.

Roslyaev81, раз тебе так хочется вот тебе то что установлено у меня.

Сворачивание профиля
Зайди в ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создать новый Javascript
Название * : Сворачивание профиля
Расположение : В темах
Код Javascript * : вставь следующее:

Код:

jQuery(document).ready(function(){
  jQuery('.profilbutton').click(function(){
      jQuery(this).parent().children('div.profilCont').toggle('normal');
      return false;
    });
  });

Сохранить.

Далее
ПА - Оформление - Шаблоны - Общие настройки
Открой шаблон viewtopic_body
найди фрагмент

Код:

<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-info">
                                                  <div class="online_ikon"> {postrow.displayed.ONLINE_IMG}</div>
                   
              <div class="profil">
<div class="profilbutton"><a href="javscript://" style="text-decoration: none;">&loz;<span style="font-family:Times New Roman; font-size:18px;font-style:italic;">Открыть профиль</span>&loz;</a></div>
<div style="DISPLAY: none; position: absolute;" class="profilCont" >
<!-- BEGIN profile_field -->
      {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              <!-- END profile_field -->
</div>
  </div>
            {postrow.displayed.POSTER_RPG}

            </div>
</div>

Сохрани и опубликуй шаблон.
Далее
ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS
Вставь следующее:

Код:

/* Сворачивание профиля */
.pun .post .user {
overflow:visible;
}

.profil {
position:relative;
width:200px;
height:30px;
}

.profil div.profilCont {
position:absolute;
height:auto;
width:auto;
background-color:#fff !important;
z-index: 999;
margin-top:6px;
border:2px solid #B38000;
-moz-border-radius:7px;
-khtml-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
box-shadow:0 0 20px 3px #B38000;
-webkit-box-shadow:0 0 20px 3px #B38000;
-moz-box-shadow:0 0 20px 3px #B38000;
padding:15px;
}

Сохрани.

Сворачивание подписи.

Зайди в ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создать новый Javascript
Название * : Сворачивание подписи
Расположение : В темах
Код Javascript * : вставь следующее:

Код:

jQuery(document).ready(function(){
  jQuery('.sig').click(function(){
      jQuery(this).parent().children('div.sig-cont').slideToggle("slow");
      return false;
    });
  });

Сохрани.

Далее
Открываешь шаблон viewtopic_body (Показ темы), находим фрагмент:

Код:

<!-- BEGIN switch_signature -->
              <div class="sig-content">
                  {postrow.displayed.SIGNATURE_NEW}
              </div>
              <!-- END switch_signature -->

и заменяешь его на следующее:

Код:

<!-- BEGIN switch_signature -->
<div class="sig-content">
<center>
<div><a href="javscript://" class="sig" style="text-decoration: none;"><img src="http://savepic.net/1189114.png" border="0" /> <span style="font-family:Times New Roman; font-size:18px;font-style:italic;">•Открыть подпись•</span></a>

<div class="sig-cont">               
   {postrow.displayed.SIGNATURE_NEW}                           
</div></div>
</center>
</div>               
<!-- END switch_signature -->

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

Далее
ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS
Вставь следующее:

Код:

/* Сворачивание подписи */
.sig-cont {
background-color:#FFF;
display:none;
border:3px double #B38000;
-moz-border-radius:7px;
-khtml-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
box-shadow:0 0 20px 3px #B38000;
-webkit-box-shadow:0 0 20px 3px #B38000;
-moz-box-shadow:0 0 20px 3px #B38000;
width:99%;
margin-top:5px;
padding:3px;
}

Сохрани

Дана, если сочтёшь нужным можно отправить в туториалы.