Небольшая модификация позволяющая скрывать и раскрывать информацию о пользователе под аватаром.

Как работает эта модификация можно посмотреть на нашем форуме кликнув на "Доп. информация" в профиле пользователя напротив сообщения.

Модификация для prosilver и его клонов.

Открываем шаблон overall_header.html, находим:

Код: Выделить всё

// ]]>
</script>


перед найденным добавляем:

Код: Выделить всё

function doCollapseExpand(id,img){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.images[img].src='/images/dopinfo_up.gif';
} else {
      b.style.display='none';
   document.images[img].src='/images/dopinfo_down.gif';
} return false; }


/images/dopinfo_up.gif - изображение вверх, закрыть пункты профиля.
/images/dopinfo_down.gif - изображение вниз, открыть пункты профиля.
Закачиваем изображения на форум и меняем ссылки на свои.

Открываем шаблон viewtopic_body.html, находим:

Код: Выделить всё

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->


Перед найденным вставляем:

Код: Выделить всё

      <dd>
         <!-- IF postrow.U_POST_AUTHOR -->
         <a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}','btn{postrow.POST_ID}')">
         <img src="/images/dopinfo_down.gif" height="20" width="150" name="btn{postrow.POST_ID}" alt="" /></a>
         <!-- ENDIF -->
      </dd>
      <dl id="box{postrow.POST_ID}" style="display: none; margin-top: 5px; margin-bottom: 5px;">


/images/dopinfo_down.gif - меняем ссылку на своё изображение вниз. Если изображение других размеров, не забудьте изменить значения на свои.

Ниже находим:

Код: Выделить всё

      </dl>
   <!-- ENDIF -->


Перед найденным вставляем:

Код: Выделить всё

      </dl>




Модификация для subsilver2 и его клонов.

Открываем шаблон overall_header.html, находим:

Код: Выделить всё

// ]]>
</script>


перед найденным добавляем:

Код: Выделить всё

function doCollapseExpand(id,img){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.images[img].src='/images/dopinfo_up.gif';
} else {
      b.style.display='none';
   document.images[img].src='/images/dopinfo_down.gif';
} return false; }


/images/dopinfo_up.gif - изображение вверх, закрыть пункты профиля.
/images/dopinfo_down.gif - изображение вниз, открыть пункты профиля.
Закачиваем изображения на форум и меняем ссылки на свои.

Открываем шаблон viewtopic_body.html, находим:

Код: Выделить всё

            <span class="postdetails">


меняем на:

Код: Выделить всё

            <span class="postdetails">
               <!-- IF postrow.U_POST_AUTHOR -->
               <a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}','btn{postrow.POST_ID}')">
               <img src="/images/dopinfo_down.gif" height="20" width="150" name="btn{postrow.POST_ID}" alt="" /></a>
               <!-- ENDIF -->
            </span>
            <span id="box{postrow.POST_ID}" class="postdetails" style="display: none;">


/images/dopinfo_down.gif - меняем ссылку на своё изображение вниз. Если изображение других размеров, не забудьте изменить значения на свои.



Изображения

Спрятать информацию о пользователе под кнопку - dopinfo_down.gif
Спрятать информацию о пользователе под кнопку - dopinfo_down.gif (1.38 КБ) 5935 просмотров

Спрятать информацию о пользователе под кнопку - dopinfo_up.gif
Спрятать информацию о пользователе под кнопку - dopinfo_up.gif (1.38 КБ) 5935 просмотров





Вариант без использования изображений, надписи - развернуть и свернуть.

Для обоих стилей скрипт будет следующим:

Код: Выделить всё

function doCollapseExpand(id){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.getElementById('btn').innerHTML = '{L_COLLAPSE_VIEW}';
} else {
      b.style.display='none';
   document.getElementById('btn').innerHTML = '{L_EXPAND_VIEW}';
} return false; }


Для prosilver, в шаблоне viewtopic_body.html, находим:

Код: Выделить всё

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->


Перед найденным вставляем:

Код: Выделить всё

      <dd>
         <!-- IF postrow.U_POST_AUTHOR -->
         <a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}')"><b id="btn">{L_EXPAND_VIEW}</b></a>
         <!-- ENDIF -->
      </dd>
      <dl id="box{postrow.POST_ID}" style="display: none; margin-top: 5px; margin-bottom: 5px;">

Ниже находим:

Код: Выделить всё

      </dl>
   <!-- ENDIF -->


Перед найденным вставляем:

Код: Выделить всё

      </dl>



Для subsilver2 в шаблоне viewtopic_body.html:

Код: Выделить всё

            <span class="postdetails">


меняем на:

Код: Выделить всё

            <span class="postdetails">
               <!-- IF postrow.U_POST_AUTHOR -->
               <a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}')"><b id="btn">{L_EXPAND_VIEW}</b></a>
               <!-- ENDIF -->
            </span>
            <span id="box{postrow.POST_ID}" class="postdetails" style="display: none;">


Пользуемся.
Комментарии: 44

CabinetAdmin 14 май 2019, 16:38 Сообщение

Дык, точно так же, наверно... :scratch: Всё как в первом посте описано, за исключением скрипта, как скрипт устанавливать написано тут viewtopic.php?p=76496#p76496
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 15 май 2019, 08:17 Сообщение

CabinetAdmin, у меня нет ни одной строки, которые находятся в первом посте. Собственно, как я и ожидал.
Куда скрипт вставлять?
  • 0

LEOPARD 15 май 2019, 08:23 Сообщение

CabinetAdmin, и да, как центрировать минипрофиль? Чтобы все было по центру.
  • 0

CabinetAdmin 15 май 2019, 15:47 Сообщение

По поводу скрипта я уже выше дал ссылку.
По поводу остального, строка:

Код: Выделить всё

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
в 3.1 и 3.2 версиях выглядит так:

Код: Выделить всё

<!-- IF postrow.POSTER_POSTS != '' --><dd class="profile-posts"><strong>{L_POSTS}{L_COLON}</strong> <!-- IF postrow.U_SEARCH !== '' --><a href="{postrow.U_SEARCH}"><!-- ENDIF -->{postrow.POSTER_POSTS}<!-- IF postrow.U_SEARCH !== '' --></a><!-- ENDIF --></dd><!-- ENDIF -->
в принципе можно догадаться что это тоже самое.
Всё.

По поводу центрирования профиля. В content.css к .postprofile { добавить text-align: center;, далее найти:

Код: Выделить всё

.postprofile .avatar {
	display: block;
	float: left;
	max-width: 100%;
}
float: left; заменить на margin: 0 auto;.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 15 май 2019, 17:08 Сообщение

CabinetAdmin, я не въеду куда скрипт вставлять. Первое сделано.
  • 0

LEOPARD 15 май 2019, 18:57 Сообщение

CabinetAdmin, вот такая дичь получается :(
Изображение
  • 0

CabinetAdmin 16 май 2019, 15:30 Сообщение

LEOPARD писал(а): я не въеду куда скрипт вставлять
Процитировать чтоль?
CabinetAdmin писал(а): Добавьте перед </head> так
LEOPARD писал(а): вот такая дичь получается
Не правильно добавили, видимо.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 16 май 2019, 15:43 Сообщение

CabinetAdmin, скрипт я туда и вставлял. Там все верно.
Вот это не туда вставил

Код: Выделить всё

[quote="CabinetAdmin"][post]64095[/post] Ниже находим:
КОД: ВЫДЕЛИТЬ ВСЁ

		</dl>
	<!-- ENDIF -->


Перед найденным вставляем:
КОД: ВЫДЕЛИТЬ ВСЁ

		</dl>[/quote]
Просто такой строки не было. Пришлось допирать, где окончание кода.
А так, да, все получилось, спасибо!
  • 0

CabinetAdmin 16 май 2019, 15:55 Сообщение

Ну ёмаё...
Найти:

Код: Выделить всё

		</dl>

		<div class="postbody">
и перед добавить:
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 16 май 2019, 16:13 Сообщение

CabinetAdmin, да все уже сделал из предыдущего поста)
Просто для меня этот код - сущий ад. Гуманитарии мы... :(
  • 0

LEOPARD 13 июн 2019, 15:06 Сообщение

CabinetAdmin, можно еще вопросец по этому всему?)
Спойлер есть. А можно ли как-то открытие/закрытие сделать плавным, с заданной плавностью?
  • 0

CabinetAdmin 13 июн 2019, 20:51 Сообщение

Можно, но тогда будут нужны ещё и стили.
Структура:

Код: Выделить всё

		<dd>
			<!-- IF postrow.U_POST_AUTHOR -->
			<a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}','btn{postrow.POST_ID}')">
			<img src="/images/dopinfo_down.gif" height="20" width="150" name="btn{postrow.POST_ID}" alt="" /></a>
			<!-- ENDIF -->
		</dd>
		<dl id="box{postrow.POST_ID}" class="dopinfo">
остальное тоже самое.

Скрипт:

Код: Выделить всё

<script>
function doCollapseExpand(id){
	var b = document.getElementById(id);
	if (b.className=='dopinfo'){
		b.classList.add('dopinfo-open');
		document.getElementById('btn').innerHTML = '{L_COLLAPSE_VIEW}';
	} else {
		b.classList.remove('dopinfo-open');
		document.getElementById('btn').innerHTML = '{L_EXPAND_VIEW}';
	} return false;
}
</script>
И стили:

Код: Выделить всё

.dopinfo {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-top: 5px;
	margin-bottom: 5px;
	-webkit-transition: opacity .3s, max-height .3s;
	-moz-transition: opacity .3s, max-height .3s;
	transition: opacity .3s, max-height .3s;
}
.dopinfo.dopinfo-open {
	max-height: 250px;
	opacity: 1;
}
opacity .3s плавное появление - 0.3 секунды.
max-height .3s плавное открытие до максимальной высоты блока, так же 0.3 секунды.
max-height: 250px; максимальная высота блока, если мало - добавить.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 13 июн 2019, 22:54 Сообщение

CabinetAdmin, теперь при клике на спойлер меня просто перекидывает в самый верх страницы
  • 0

CabinetAdmin 14 июн 2019, 15:21 Сообщение

А, ну да, надо же ещё класс элементу добавить, плюс инлайновые стили можно в css перенести... сейчас подправлю предыдущее сообщение.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 14 июн 2019, 17:52 Сообщение

CabinetAdmin писал(а): А, ну да, надо же ещё класс элементу добавить, плюс инлайновые стили можно в css перенести... сейчас подправлю предыдущее сообщение.
Ну ваще! Красотенечка)
Громнейшее спасибо!
  • 0

Похожие темы