Оформление профиля

Поделиться1Пт, 21 Дек 2018 20:39:34

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Подскажите, пожалуйста, каким скриптом можно оформить профиль в похожем стиле?
Интересует панель для информации под аватаром, а также расположение информации "сообщения", "уважение" и награды.

Нашла такой вариант... Хотела бы в рамку вставить аватар, а внизу на отрывном листочке уже размещать информацию! Ниже, под листочком строки Сообщения, Уважение и ниже Награды, как на примере... Если нужно, то вот ссылка на форум с примером: http://newdozor.rusff.ru

Отредактировано Boston (Пт, 21 Дек 2018 21:06:19)

0

Поделиться2Сб, 22 Дек 2018 01:26:07

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Boston
Обрамление Профиля своими фоновыми картинками

Выстраиваем в одну строку числа сообщений и репутации

Можно через скрипт: Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика
все поля скрываете двумя косыми // , поле

"award", //Награды(только для rusff и ork)

Наоборот - открываете

Отредактировано Deff (Сб, 22 Дек 2018 01:29:21)

+1

Поделиться3Вс, 23 Дек 2018 16:42:32

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Deff
Спасибо! С этим разобралась! Но теперь не получается отцентровать картинки "онлайн" и "оффлайн"....
Выравнивала профиль этим скриптом:

Код:

<style type="text/css">
.pa-adnote{ text-align: center;}
.pa-from{ text-align: center;}
.pa-reg{ text-align: center;}
.pa-posts{ text-align: center;}
.pa-reputation{ text-align: center;}
.pa-sex{ text-align: center;}
.pa-icq{ text-align: center;}
.pa-ip{ text-align: center;}
.pa-online{ text-align: center;}
.pa-age{ text-align: center;}
.pa-mailagent{ text-align: center;}
.pa-reg { text-align: center;}
.pa-avatar, .pa-title, .pa-author { text-align: center;}
.pa-time-visit{ text-align: center;}
.pa-last-visit{ text-align: center;}
.pa-fld1{ text-align: center;}
.pa-fld2{ text-align: center;}
.pa-fld3{ text-align: center;}
</style>

0

Поделиться4Вс, 23 Дек 2018 17:03:59

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Boston
Ссылку на пост, видный гостю
Лучше не мучить длинный код, для центрирования, а совместить все в одном:

.pa-author>ul,
.pa-author>ul li{
text-align:center;
}

Поправил,

Отредактировано Deff (Вс, 23 Дек 2018 19:42:42)

+1

Поделиться5Вс, 23 Дек 2018 18:52:43

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Deff
Этот код не помог((

0

Поделиться6Вс, 23 Дек 2018 19:15:49

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Deff написал(а):

Ссылку на пост, видный гостю

+1

Поделиться7Вс, 23 Дек 2018 19:20:07

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Deff
http://gluharpatnickiu.rolebb.ru/viewto … ?id=3#p104

0

Поделиться8Вс, 23 Дек 2018 19:33:11

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Boston
Поменяйте код скрипта:

<script type="text/javascript"> var L0='<img class="imgON_Off" src="';
var L1='" style="width:84px;margin:10px auto;display:block;" />';

var ImgON="https://forumstatic.ru/files/0010/aa/92/52806.png"; // Картинка Online;
var ImgOff="https://forumstatic.ru/files/0010/aa/92/56509.png"; // Картинка OffLine;

$("#pun-viewtopic .post .post-author > ul").each(function () {
if ($(this).find(".pa-online").html()!=null){$(this).append(L0+ImgON+L1)
}else $(this).append(L0+ImgOff+L1);
});
</script>

//Ксать сейчас смотрится как раз прикольно

+1

Поделиться9Вт, 25 Дек 2018 13:51:14

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Спасибо большое!!
Назрел еще один вопрос... Вы не могли бы помочь мне с редактированием таблицы?
Ссылка на форум - http://gluharpatnickiu.rolebb.ru
Эскизы вкладок - https://forumstatic.ru/files/0010/aa/92/81262.png | https://forumstatic.ru/files/0010/aa/92/83420.png
Мне просто нужно создать ячейки во всплывающих вкладках и настроить отображение таблицы по центру форума, потому что сейчас она находится слева и мне пришлось ее растягивать для симметричности)

Код:

</style>
<style type="text/css">
div.block {
  height:200px;
  background:#979ea1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 12px;
  border-radius:7px;
}
div.Kn {
  height:21px;
  width:21px;
  border:3px solid transparent;
  padding:8px;
  margin:4px -2px;
  background:#fff;
  border-radius:50%;
  box-shadow:inset 0 0 2em rgba(0,0,0,0.5); /* Параметры тени */
}
div.Kn:hover {
  background:rgba(0,0,0,0.1);
  box-shadow:inset 0 0 3em rgba(255,255,255,0.9)!important; /* Параметры тени */
}
div.Kn.active {
  border-color:rgba(255,0,0,0.5);
  box-shadow:inset 0 0 2em rgba(0,0,0,0.6); /* Параметры тени */
}
.Kn-title {
  font: normal normal 400 13px/normal "Times New Roman";
  margin-top:-2px;
  margin-left:-7px;
}
div.tab {
  height:100%;
  display:none;
  overflow-y:auto;
  overflow-x:hidden;
}
</style>
 
<table cellspacing="15" style="border-radius:3px;background:#25333d;margin-left:-31px;width:940px;table-layout:fixed;">
<tr valign=center align=center>
  <td width="27%">
   <div class="block" style="height:50px">
<!-- Контент левый верхний блок -->
   </div>
   <div class="block"  style="height:132px;margin-top:12px">
<!-- Контент левый нижний блок -->
  </td>
  <td>
   <div class="Kn" title="Главная"><img src="https://forumstatic.ru/files/0010/aa/92/74580.png" width=100%/></div>
   <div class="Kn" title="Навигация"><img src="https://forumstatic.ru/files/0010/aa/92/53503.png" width=100%/></div>
   <div class="Kn" title="События в игре"><img src="https://forumstatic.ru/files/0010/aa/92/14442.png" width=100%/></div>
   <div class="Kn" title="Розыск"><img src="https://forumstatic.ru/files/0010/aa/92/64599.png" width=100%/></div>
   <div class="Kn" title="Партнеры"><img src="https://forumstatic.ru/files/0010/aa/92/40570.png" width=100%/></div>
  </td>
  <td width="50%">
   <div class="block">
   <!-- Переключаемые Вкладки -->
     <div class="tab"> 
<!-- Контент Первой Вкладки-->
 1
     </div>
     <div class="tab">
<!-- Контент Второй Вкладки-->
2
     </div>
     <div class="tab">
<!-- Контент Третьей Вкладки-->
3
     </div>
     <div class="tab">
<!-- Контент Четвертой Вкладки-->
4
     </div>
     <div class="tab">
<!-- Контент Пятой Вкладки-->
5
     </div>
   </div>
  </td>
  <td width="18%">
   <div class="block">
<!-- Контент крайне правый блок -->
   </div>
  </td>
</tr>
</table>
<script type="text/javascript">
 $('.Kn').eq(0).addClass('active');
 $('.tab').eq(0).show();    
 
 $('.Kn').click(function(){
     $('.Kn').removeClass('active');
     $(this).addClass('active');
     var num = $('.Kn').index(this);
     $('.tab').hide().eq(num).show();
 });
 $('div.Kn').tipsy({fade: true, gravity: 'e Kn-title'}); 
 </script>

Отредактировано Boston (Вт, 25 Дек 2018 13:51:42)

0

Поделиться10Сб, 29 Дек 2018 21:53:01

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Долго искала, но ничего не нашла... Мне нужен спойлер, который я могла бы поставить в таблицу! Чтобы свернуть часть большого текста и не растягивать таблицу)
Подскажите, пожалуйста...

П.С.: с таблицами вроде разобралась)

Отредактировано Boston (Сб, 29 Дек 2018 21:53:33)

0

Поделиться11Сб, 29 Дек 2018 22:08:16

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Boston
На скриншоте обведите к примеру что скрыть и , желательна кнопка(ссылка) или какая то иконка скрытия... к ней привязка

0

Поделиться12Сб, 29 Дек 2018 22:15:17

Автор: Boston
Заслуженный
Зарегистрирован: Пт, 21 Дек 2018
Сообщений: 9
Уважение: +1
Позитив: 0
Последний визит:
Пн, 25 Фев 2019 13:19:53

Deff

Иконка для примера, потом заменю

0

Поделиться13Сб, 29 Дек 2018 23:26:30

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Boston
Замените Первую вкладку:

Код:

<!-- Контент Первой Вкладки-->
<table border="0" width="100%" height="100%">
<tr>
<td align="center" width="100%" height="30%">
______________________
</td>
</tr>
<tr>
<td width="60%" height="50%" align="center" valign="top">Рады приветствовать вас на проекте <b>"Пятницкий отдел"</b>
<br>
<br>
Сюжет ролевой игры основан на сериалах <b>"Глухарь"</b> и <b>"Пятницкий"</b>, а значит у вас есть возможность примерить  на себя роль одного из персонажей этих сериалов. Но это еще не все! В сюжете также присутствует альтернативная сюжетная линия, то есть вы можете увидеть и прочувствовать все то, что было вырезано и недопоказано!</td>
<td width="40%" height="70%" align="center" valign=top>Рейтинг игры
<br>
<font size="3"><b>NC-18</b></font>
<br>
<br>
<font size="1">Вступая в проект, вы подтверждаете</font>...<img src="https://i.imgur.com/sWLqG5E.png" width="20" style="cursor:pointer" title"Показать" onclick="$(this).before($(this).next().remove().html())"><div style="display:none"><font size="1"><br>,что вы дееспособный совершеннолетний человек со здоровой устойчивой психикой, различающий границы игрового и реального миров и понимающий разницу между собой и персонажем.</font><div>
</td>
</tr>
</table>
     </div>
     <div class="tab">

0

Поделиться14Ср, 2 Янв 2019 13:04:50

Автор: Грюнт
Стремящийся
Зарегистрирован: Чт, 11 Окт 2018
Сообщений: 3
Уважение: 0
Позитив: 0
Последний визит:
Вт, 24 Сен 2019 13:56:46

Deff
http://catbrotherhood.rusff.ru/viewtopi … ;p=3#p7098
Пожалуйста, помогите с возникшей проблемой:

У гостя картинка "Награды" (которых у гостя в принципе быть не может) накладывается на картинку "Оффлайн" (Красный кружок)
Так видят профиль гостя гости и игроки.
Администратор видит профиль гостя так:

Потому что под кнопкой "Игрок" (показана на скрине) находится IP адрес, который видят только администраторы.
Как сделать так, чтобы иконка "Награды" не накладывалась на картинку "Оффлайн"? При этом мне не важно, будет ли у Гостя картинка "награды" или её не будет вообще. Для меня главное, чтобы наложения не было. При этом профиль пользователя выглядит так:

Мне бы хотелось, чтобы изменения затронули только Гостя, т.к. оформление профиля пользователя меня полностью устраивает.

0

Поделиться15Ср, 2 Янв 2019 13:55:44

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

Грюнт написал(а):

У гостя картинка "Награды" (которых у гостя в принципе быть не может) накладывается на картинку "Оффлайн" (Красный кружок)

Для гостя, поставьте поле кода спойлера под N- кнопок

<style>
.post[data-group-id="3"] .post-img-Sp[data=".Sp3"]{
display:none;
}
</style>

Ващет, стоило б Вынести поле c IP адресом из спойлера и спозиционировать его прям под авиком(переставить в Доп.полях в Админке, а в скрипте закомментить двумя слешами, я б сделал цвет шрифта темно-вишнёвым,

Отредактировано Deff (Ср, 2 Янв 2019 13:57:54)

0

Поделиться16Ср, 2 Янв 2019 16:44:08

Автор: Грюнт
Стремящийся
Зарегистрирован: Чт, 11 Окт 2018
Сообщений: 3
Уважение: 0
Позитив: 0
Последний визит:
Вт, 24 Сен 2019 13:56:46

Deff
Спасибо огромное)

0

Поделиться17Пт, 10 Апр 2020 12:01:31

Автор: Азраиль
Стремящийся
Зарегистрирован: Пт, 10 Апр 2020
Сообщений: 2
Уважение: 0
Позитив: 0
Последний визит:
Вс, 12 Апр 2020 11:55:10

Добрый день! Надеюсь куда нужно пишу. Подскажите пожалуйста, как можно на форуме сделать так, чтобы новые посты отображались всегда вверху. То есть были первыми. И возможно ли такое.

0