Ультимативный список тем - картинки, описания и иконки для топиков

Страница: 1

Сообщений 1 страница 7 из 7

Поделиться122.12.23 19:02

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

portfoliopost

FDteam-portf

forsalepost

Позволяет экспортировать на страницу списка тем картинку и описания любой длины.
А также вставлять кастомные иконки топика и добавлять экстра-классы.

Дата: 22.12.2023

Платформа: MyBB.ru

Автор: Gerda

Стоимость: 400 рублей | 800НБ*

ДЕМО

подробное описание

Ультимативный список тем
Скрипт позволяет выводить на странице топика описание темы, картинку и иконку/надпись.
Вы можете сами решить, чем из этого пользоваться, а чем - не пользоваться. Все пункты опциональны.
Добавлена настройка работы скрипта - в любых форумах или только в заданном списке форумов, а также есть опция - позволять или не позволять скрипту работать на страницах поиска (активные темы и т.д.)
Весь экспортируемый контент (описания, картинки, инконки) добавлются в первое сообщения темы со специальным ББ-тегом. Скрипт "читает" топики со страницы списка тем и выгружает на нее заданный контент.
При этом в самом сообщении можно скрыть экспортируемый контент. (см. Как скрыть картинки, описания или иконки в тесте сообщения)
К скрипту прилагается инструментарий с кнопками вставки тегов для экспорта.
Инструментарий легко настраивается администратором: можно добавить любое количество разных кнопок с вариациями тегов и любыми пресетами. (см. настройка инструментария)
Доступ к инструментарию можно ограничить по группам.
Скрипт добавляет множество селекторов как в сами описания/картинки/иконки, так и на саму страницу списка тем, что дает дизайнерам обширные возможности по созданию дизайна для списка тем.
Если вам нужна помощь по созданию дизайна для списка тем, вы можете обратиться за помощью в раздел бесплатной техподдержки или заказать верстку страницы тем.

Превью картинки топиков
В отличие от бесплатного скрипта "Превью первой картинки топика в списках тем":
Выводится не любая первая картинка, а конкретная картинка, которая вставлена в специальный тег. Таким образом картинка не обязательно должна стоять первой, а также у вас есть возможность делать скрытые "обложки", которые отображаются только в списке тем и не отображаются в самом посте.
Встроено ограничение по минимальной ширине и высоте картинок - таким образом скрипт будет игнорировать смайлы, иконки и стикеры.
Вы можете выбрать, что делать, если картинки нет: ничего не делать, отображать вашу картинку по умолчанию или выцепить из поста другую подходящую картинку (см. Новые опции для картинок в списке тем).
Можно сделать картинку кликабельной и выбрать, куда будет вести ссылка: на первое сообщение темы или на последнее.

Описание топиков
В отличие от старого скрипта "Описания топиков":
Длина описаний не ограничена, а также заголовок темы не теряет в количестве символов.
В описания можно вставлять не только простой текст, но и использовать в нем ЛЮБЫЕ бб-теги, картинки и прочее.
Скрипт имеет два блока для описаний - один отображается над картинкой, второй под картинкой. Вы можете использовать оба или только один из них.
Удобный код вывода описаний позволит вам сокращать их длину через стиль, т.к. теперь они могут быть бесконечно длинными: например, можно добавить скроллы.
Добавлена опция описания по умолчанию, которая отображает начало текста сообщения, если пользователь не заполнил описание. Также в наличии ограничение количества символов и другие настройки для этой опции (см. Описание по умолчанию).

Дополнительные иконки для тем и экстра-классы
В отличие от старых скриптов дополнительных иконок:
Вы можете выводить не только кастомные иконки, но и надписи. Или даже комбинацию иконка + надпись.
Скрипт содержит ШЕСТЬ опций, куда вставлять иконки или надписи, что позволит вам создавать совершенно разные стили топиклиста с кастомными иконками. (см. гайдлайн по опциям вставки иконок)
Скрипт содержит опцию добавление своего экстра-класса к строке топика в списке тем, что позволяет создавать особое цветовыделение для некоторых тем и легко, без каких-либо дополнительных скриптов, добавлять или убирать это цветовыделение через редактирование первого поста топика. (см. экстра-классы)

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 1

Поделиться222.12.23 19:03

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Инструкции и гайды

Как скрыть картинки, описания или иконки в тесте сообщения

Скрытие экспортируемого контента поста в топике
Если вы хотите, чтобы что-либо (описания, превью-картинка или иконки и надписи) отображались только на странице списка тем, но НЕ отображались в тексте сообщения, вы можете легко скрыть любой блок через CSS:
.post-content .tl-descr {display: none;} /* скрывает блок с описанием НАД картинкой */
.post-content .tl-details {display: none;} /* скрывает блок с описанием ПОД картинкой */
.post-content .tl-pic {display: none;} /* скрывает превью картинки */
.post-content .tl-icon {display: none;} /* скрывает иконки */
Удалите ненужные вам строчки и вставьте это в свой стиль или html-верх внутри тегов <style></style>

Таким образом блоки не будут отображаться в контенте поста, то есть вы можете делать, например, "скрытые" обложки для тем, которые не видны пользователям в сообщении, но отображаются в списке тем.

Также помните, что порядок расположения тегов в посте НЕ влияет на страницу списка тем.
Блоки, которые экспортируют контент в список тем, в самом топике могут отображаться в любом нужном вам порядке: хоть в начале, хоть в конце, хоть в середине.
Например, вам не нужно вставлять блок tl-descr НАД картинкой, чтобы в списке тем он отображался там же. Вы можете начать с картинки и вставить описание под ней или даже в самом конце сообщения.

Для форумов с включенным ajax - нет инструментария при редактировании топика

Если вы используете аджакс - поставьте следующий скрипт в html-низ.
Код:

<script>
if (loadForumdForums === 1) {
var found = false;
$('#pun-crumbs1 .crumbs a[href*="/viewforum.php?"]').each(function() {
  var href = $(this).attr('href');
  var forumIdMatch = href.match(/\/viewforum\.php\?id=(\d+)/);
  if (forumIdMatch && loadForumdId.includes(parseInt(forumIdMatch[1]))) {found = true;return false;}
});
if (found) {$('.topicpost .pl-edit').removeClass('edit-ajax');}
} else {$('.topicpost .pl-edit').removeClass('edit-ajax');}
</script>
Он убирает аджакс-редактирование в первом посте, таким образом при попытке редактировать его вы будете перекинуты на отдельную страницу, где инструментарий будет отображаться.
Редактирование остальных постов этот скрипт не трогает. А также он не трогает первые посты в форумах, где отключен скрипт (если вы включили опцию, чтобы скрипт работал только в заданном списке форумов).

Настройка инструментария

Настройка инструментария

В форме ответа находится следующий HTML-код:
<div id="forumd-form" class="hide">
<h5>Теги для экспорта контента в список тем</h5>
<div class="tags picture"><label>Превью картинки темы</label></div>
<div class="tags descr"><label>Краткое описание (НАД картинкой)</label></div>
<div class="tags details"><label>Подробное описание (ПОД картинкой)</label></div>
<div class="tags icons"><label>Иконка темы (или надпись)</label></div>
<div class="tags classes">
<label>Экстра классы (для стилизации темы)</label>
<i>Внутрь блока класса можно вставлять иконки (альтернатива предыдущему пункту).</i>
</div>
</div>

Кнопки будут отображаться внутри блоков tags.
Заголовки помещены в тег <label> - вы можете поменять их на свои или удалить, если они вам не нужны.
Вы можете вставлять свои заголовки, дополнения и пояснения как внутрь этих блоков, так и между ними в формате html - они будут отображаться в инструментарии.

Если вам НЕ нужен какой-либо из блоков, достаточно просто удалить его из HTML кода.

Далее идет скрипт, который отвечает за вставку кнопок в блоки, где каждый "комплект" тегов вставляется в свой блок:
var tagPictureData - вставляет кнопки в блок picture
var tagDescrData - вставляет кнопки в блок descr
var tagDetailsData - вставляет кнопки в блок details
var tagIconsData - вставляет кнопки в блок icons
var tagClassesData - вставляет кнопки в блок classes

Вставка кнопок осуществляется следующим образом:
var tagPictureData = [
{ name: 'название кнопки', code: 'начало бб-тега,конец бб-тега' },
{ name: 'название кнопки', code: 'начало бб-тега,конец бб-тега' }
];

В конце каждой строчки надо ставить запятую после фигурной скобки: },
В конце ПОСЛЕДНЕЙ строчки запятую ставить НЕЛЬЗЯ.

В качестве названия кнопки можно вставлять не только текст, но и html, например:
<img src="https://forumupload.ru/uploads/001c/05/8a/2/89399.png"> - вставит картинку

Далее вставляется бб-код, который будет вставлен в форму ответа по клику на кнопку:
начало бб-тега,конец бб-тега
Там, где стоит запятая будет помещен курсор для вставки контента.

Например:
Код:
[block="tl-descr"]введите описание темы,[/block]
Если вам не нужна вторая часть бб-кода (то есть вы хотите, чтобы курсор был перемещен в конец тега), ставьте код следующим образом:
ваш бб-тег,
Например:
Код:
[block="tl-icon"][img]https://forumupload.ru/uploads/001c/05/8a/2/89399.png[/img][/block],
Без запятой в строке тега скрипт НЕ работает.

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

Отображение дополнительных иконок тем
В скрипте есть обширные опции установки кастомной иконки для темы:
Код:
var iconForumdPlace = 0;
// 0 - новый блок под названием (оптимально для позиционирования в нестандартной верстке)
// 1 - новый блок рядом со стандартной иконкой (оптимально для доп.иконок при табличной верстке)
// 2 - внутри блока стандартной иконки (оптимально для доп. мини-иконок или замены стандартной иконки)
// 3 - перед заголовком (оптимально для мини-иконок и надписей)
// 4 - после заголовка (оптимально для мини-иконок и надписей)
// 5 - в блок картинки (не отображаются если нет картинки, оптимально для доп. иконок и надписей)
Зачем это нужно? Для создания стиля отображения иконки - таким образом будет проще верстать страницу списка тем в зависимости от того, какого эффекта вы хотите добиться.
ВНИМАНИЕ! Если вам нужна помощь по созданию дизайна для иконок, вы можете обратиться за помощью в раздел бесплатной техподдержки или заказать верстку страницы тем.
Настройка и описание
Пример отображения
Пример кода стиля
0 - новый блок под названием

Создается новый блок <div class="forumd-icon"></div> под названием топика.
Эта опция оптимальна для нестандартной верстки, и.к. позволяет через позиционирование перемещать иконку в любые места строки топика, не затрагивая при этом описания.
Также эта опция может использоваться не как иконка, а как дополнительные надписи под названием тем по аналогии с описаниями.
с таким кодом можно создавать абсолютно любые стили, все зависи от вашей фантазии
1 - новый блок рядом со стандартной иконкой

Рядом со станадартной иконкой <div class="icon"></div> появляется блок кастомной иконки.
Эта опция оптимальна, если вы хотите, чтобы дополнительные иконки вставали рядом со стандартной или рядом с заголовком топика.
Код:
/* Иконка рядом со стандартной */
#pun .punbb .main .tcl {padding-left: 55px; position: relative;}
#pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;}
#pun .punbb td div.tclcon {margin-left: 0;}

.forumd-tr .forumd-icon p {display: none;}
.forumd-tr .forumd-icon div p {display: inline;}
.forumd-tr .forumd-icon div, .forumd-tr .forumd-icon img {width: 24px; height: 24px;}
#pun .punbb .main .forumd-tr .tcl {padding-left: 10px;}
#pun .punbb .forumd-tr div.icon {margin: -8px 8px 3px 0; position: unset;}
.forumd-tr .forumd-icon div {margin: -2px 8px 3px 0;}
.forumd-tr .forumd-icon div {float: left;}
.forumd-tr .forumd-topic {margin: 14px 0 0;}
2 - внутри блока стандартной иконки

Помещает блок иконки ВНУТРИ блока станадартной иконки <div class="icon"></div>.
Эта опция оптимальна, если вы хотите, чтобы кастомные иконки как-то взаимодействовали со стандартной. Например, можно заменять стандартную иконку своей или можно сделать кастомные иконки в виде дополнительной мини-иконки поверх стандартной.
Код:
/* Своя иконка ВМЕСТО стандартной */
#pun .punbb .main .tcl {padding-left: 55px; position: relative;}
#pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;}
#pun .punbb td div.tclcon {margin-left: 0;}

.punbb .forumd-tr div.icon {background: none !important;}
.punbb .forumd-tr .tcl .icon .forumd-icon, .forumd-tr .tcl .icon .forumd-icon img {
width: auto; height: auto;
max-width: 36px; max-height: 36px;
}
Код:
/* Мини-иконка темы НА стандартной */
#pun .punbb .main .tcl {padding-left: 55px; position: relative;}
#pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;}
#pun .punbb td div.tclcon {margin-left: 0;}

.forumd-tr .tcl .icon .forumd-icon, .forumd-tr .tcl .icon .forumd-icon img {width: 16px; height: 16px;}
.forumd-tr .tcl .icon .forumd-icon {position: absolute; left: 0; top: 0; overflow: hidden;}
3 - перед заголовком

Помещает иконку в НАЧАЛО блока <div class="tclcon"></div>, где назодится заголовок темы.
В отличие от предыдущих вариантов, иконка находится не в блоке, а внутри <span class="forumd-icon"></span>.
Эта опция позволит вам отображать иконки или надписи как инлайн-элементы ПЕРЕД заголовком темы.
Код:
/* Иконка перед заголовком */
#pun .punbb .main .tcl {padding-left: 55px; position: relative;}
#pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;}
#pun .punbb td div.tclcon {margin-left: 0;}

.forumd-tr .tcl .forumd-icon div {display: inline;}
.forumd-tr.tcl .forumd-icon img {width: 20px; height: 20px; margin-right: 5px; position: relative; top: 5px;}
.forumd-tr .tclcon, .forumd-tr .forumd-icon p {line-height: 20px;}
4 - после заголовка

Помещает иконку в КОНЕЦ блока <div class="tclcon"></div>, где назодится заголовок темы.
В отличие от предыдущих вариантов, иконка находится не в блоке, а внутри <span class="forumd-icon"></span>.
Эта опция позволит вам отображать иконки или надписи как инлайн-элементы ПОСЛЕ заголовка темы.
Код:
/* Иконка после заголовка */
#pun .punbb .main .tcl {padding-left: 55px; position: relative;}
#pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;}
#pun .punbb td div.tclcon {margin-left: 0;}

.forumd-tr .tcl .forumd-icon div {display: inline;}
.forumd-tr .tcl .forumd-icon img {width: 20px; height: 20px; margin-left: 5px; position: relative; top: 5px;}
.forumd-tr .tcl .forumd-icon p {margin-left: 5px;}
.forumd-tr .tclcon, .forumd-tr .forumd-icon p {line-height: 20px;}
5 - в блок картинки

Помещает иконку ВНУТРИ блока картинки <div class="forumd-pic"></div>, который появляется при наличии превью картинки топика.
Если у темы НЕТ превью картинки (импортированной или картинки по умолчанию), то иконка добавляться не будет.
Эта опция позволит позиционировать иконки, надписи и прочий контент внутри блока картинки.
Код:
/* Иконки и надписи блоке картинки */
#pun .punbb .main .tcl {padding-left: 55px; position: relative;}
#pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;}
#pun .punbb td div.tclcon {margin-left: 0;}

.forumd-pic {position: relative;}
.forumd-pic .forumd-icon .sign {
position: absolute;
  padding: 6px 50px;
  display: inline-block;
  background: #326d42;
  transform: rotate(-40deg);
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  left: -55px;
  max-width: 130px;
  text-align: center;
  font-size: 11px;
  top: 30px;
  font-family: 'Times New Roman';
  letter-spacing: 2px;
}
.forumd-pic .forumd-icon img {
width: 40px;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 5px;
  display: block;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
}

Экстра-классы: как применять и как использовать

ДЕМО

Экстра-классы - это опцииональная возможность для кастомной настройки дизайна ВСЕЙ строки конкретного топика и, соответственно, любых ее внутренних элементов.

Секрет добавления экстра-класса очень прост - это делается через тег иконки.
Обычно мы вставляем иконку в такой тег:
Код:
[block="tl-icon"]тут, например, картинка или надпись[/block]
Но если вы вставите внутрь этого блока дополнительный блок с своим классом, то этот класс будет добавлен в строку таблицы в списке тем. Пример:
Код:
[block="tl-icon"][block="class5"]тут, например, картинка или надпись[/block][/block]
Этот код добавит class5 к строке топика:

Вы также можете добавить сразу несколько классов:
Код:
[block="tl-icon"][block="class1 class2 class3"]тут, например, картинка или надпись[/block][/block]
ВЕСЬ список классов будет добавлен к строке топика.

Также вставка самой иконки или надписи НЕ ОБЯЗАТЕЛЬНА! вы можете вставить просто пустой блок, чтобы вам добавился экстра-класс, но не вставлялось никакой иконки:
Код:
[block="tl-icon"][block="class1"][/block][/block]
Таким образом можно создавать особое цветовыделение для некоторых тем и легко, без каких-либо дополнительных скриптов, добавлять или убирать это цветовыделение через редактирование первого поста топика.

ВНИМАНИЕ! Если вам нужна помощь по созданию дизайна для топиков с экстра-классами, вы можете обратиться за помощью в раздел бесплатной техподдержки или заказать верстку страницы тем.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 2

Поделиться322.12.23 19:03

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

[резервный пост на случай большего количества гайдов и расширения функционала скрипта]

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 3

Поделиться423.12.23 17:09

Автор: Moju
а я другая крашенная
Последний визит:
12.12.24 18:30
Уважение: +603

Это просто шедевральный скрипт, которые невероятно преображает раздел с игровыми эпизодами и сразу дает понимание, стоит туда заходить или нет. Исключает лишнее брожение по темам, если вы ищите чтиво на вечер, а возможность сразу предупредить участников о происходящем в эпизоде, просто взрывает мозг. Максимум информации без захода в тему. Не передать словами, как я от него тащусь))))

#распаковка_талантов

Забыла упомянуть самое главное, он невероятно просто в настройке и оформлении! И самый жирный плюс, он не влияет на количество символов в заголовке и не надо думать, что убрать из названия эпизода, что все поместилось

Отредактировано Moju (23.12.23 17:10)

Подпись автора

Цитировать Сообщение 4

Поделиться525.12.23 08:25

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

идеи по расширению функционала

сделано

опция если картинки нет - подгружать первую
дефолтное описание:
опция если нет описания, подгружать текст первого параграфа
выбор блока вставки дефолтного описания
ограничить количество отгружаемых символов
ограничение доступа к скрипту (инструментарию) по группам

Добавлено спустя 29 дней 6 часов 7 минут 20 секунд:
идеи расширения фукнционала дефолтных описаний:

сделать отдельное включение и настройки и на верх, и на низ
сделать для каждого выбор что вставлять - текст поста или предустановленное
сделать опциональный конец - только троеточие, троеточие + ссылка, либо ничего

Отредактировано Gerda (23.01.24 14:32)

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 5

Поделиться623.01.24 07:53

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

smile Ультимативная обнова ультимативного топиклиста smile

Новые настройки доступа
Добавлено опциональное ограничение доступа к инструментарию по группам

Новые опции для картинок в списке тем
Добавлена настройка минимальной ширины и высоты картинок для импорта.
Она позволяет скрипту игнорировать всякие мелкие картинки и теперь он не будет пытаться импортировать смайлики, иконки или стикеры.
Это работает как для картинок, которые пользователи вставляют в спец-тег, так и для новых опций дефолтных картинок.

Добавлено две новые опции импорта картинок:

если обложки нет, отображать первую картинку из поста
если обложки нет, отображать первую картинку, если нет подходящих картинок вообще, отображать дефолтную

Таким образом, у вас есть следующие опции отображения картинок:

Вариант 1
- Скрипт проверяет наличие картинки в специальном теге.
- Если она есть и она подходит по минимальным размерам, то он импортирует ее.
- Если нет или она слишком маленькая, он ничего больше не делает.
Вариант 2
- Скрипт проверяет наличие картинки в специальном теге.
- Если она есть и она подходит по минимальным размерам, то он импортирует ее.
- Если нет или она слишком маленькая, то он вставит заранее заданную картинку по умолчанию.
Вариант 3
- Скрипт проверяет наличие картинки в специальном теге.
- Если она есть и она подходит по минимальным размерам, то он импортирует ее.
- new! Если нет или она слишком маленькая, скрипт проходит по всем картинкам из первого сообщения и ищет картинку подходящего размера.
- Если скрипт не находит в сообщении других картинок подходящего размера, он ничего больше не делает.
Вариант 4
- Скрипт проверяет наличие картинки в специальном теге.
- Если она есть и она подходит по минимальным размерам, то он импортирует ее.
- new! Если нет или она слишком маленькая, скрипт проходит по всем картинкам из первого сообщения и ищет картинку подходящего размера.
- new! Если скрипт не находит в сообщении других картинок подходящего размера, он вставляет заранее заданную картинку по умолчанию.

Описание по умолчанию

Добавлено опциональное описание по умолчанию с выбором блока, где оно работает (над картинкой или под картинкой).
Если пользователь не вставил описание темы, то импортируется текст сообщения.
При этом любые картинки, html-теги и прочее игнорируются - скрипт выдерет только ТЕКСТ поста, чтобы ничто никуда не уехало и не поскакало.

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

На случай, если кто-то создал топик, где в первом посте НЕТ текста (например, там только картинки или html), в админке устанавливается текст описания по умолчанию с возможностью использовать HTML.

Обновление БЕСПЛАТНО для тех, у кого уже есть скрипт - обращайтесь в ЛС, дискорд или этот топик smile

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 6

Поделиться711.11.24 22:25

Автор: Helle
Участник
Последний визит:
04.12.24 12:30
Уважение: 0

Здравствуйте! Хочу приобрести данный скрипт. Куда можно обратиться?

Цитировать Сообщение 7

Ответить

Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»

Имя

font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens

format_align_left format_align_center format_align_right list table_view

link add_photo_alternate ondemand_video mood mic

content_cut lock_open format_quote code

horizontal_rule anchor live_help emoji_symbols library_add

ТочкамиDots

КружочкамиCircles

КвадратамиSquares

ЦифрамиNumbers

Римскими цифрамиRoman Numerals

Без обозначенийNo Markers

Многострочный пункт спискаMultiline List Item

ТекстText

HTML

Javascript

Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms

10px 12px 14px 16px 18px 20px 22px

ЗаголовокTitle Автосжатие больших картинокAuto-resize large images Скрыть от гостейHide from guests Ссылка «скачать» Download link Имя читателяReader's name Добавлено спустя…Added after... Надстрочный текстSuperscript text Подстрочный текстSubscript text БлокBlock HTML иконка

Скрыть инструментарий Показать инструментарий

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],

Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],

Красный пост[block="saledpost"]saledpost[/block],

Синий пост[block="forsalepost"]forsalepost[/block],

Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]

Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]

Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]

Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]

Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)

Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,

Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)
Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

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

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)

Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,

Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)

Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,

Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)

Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]

Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]

Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]

Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]

Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]

Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]

Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]

Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]

Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]

Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]

Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]

Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]

Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]

Настройка и описание	Пример отображения	Пример кода стиля
0 - новый блок под названием Создается новый блок <div class="forumd-icon"></div> под названием топика. Эта опция оптимальна для нестандартной верстки, и.к. позволяет через позиционирование перемещать иконку в любые места строки топика, не затрагивая при этом описания. Также эта опция может использоваться не как иконка, а как дополнительные надписи под названием тем по аналогии с описаниями.		с таким кодом можно создавать абсолютно любые стили, все зависи от вашей фантазии
1 - новый блок рядом со стандартной иконкой Рядом со станадартной иконкой <div class="icon"></div> появляется блок кастомной иконки. Эта опция оптимальна, если вы хотите, чтобы дополнительные иконки вставали рядом со стандартной или рядом с заголовком топика.		Код: /* Иконка рядом со стандартной */ #pun .punbb .main .tcl {padding-left: 55px; position: relative;} #pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;} #pun .punbb td div.tclcon {margin-left: 0;} .forumd-tr .forumd-icon p {display: none;} .forumd-tr .forumd-icon div p {display: inline;} .forumd-tr .forumd-icon div, .forumd-tr .forumd-icon img {width: 24px; height: 24px;} #pun .punbb .main .forumd-tr .tcl {padding-left: 10px;} #pun .punbb .forumd-tr div.icon {margin: -8px 8px 3px 0; position: unset;} .forumd-tr .forumd-icon div {margin: -2px 8px 3px 0;} .forumd-tr .forumd-icon div {float: left;} .forumd-tr .forumd-topic {margin: 14px 0 0;}
2 - внутри блока стандартной иконки Помещает блок иконки ВНУТРИ блока станадартной иконки <div class="icon"></div>. Эта опция оптимальна, если вы хотите, чтобы кастомные иконки как-то взаимодействовали со стандартной. Например, можно заменять стандартную иконку своей или можно сделать кастомные иконки в виде дополнительной мини-иконки поверх стандартной.		Код: /* Своя иконка ВМЕСТО стандартной */ #pun .punbb .main .tcl {padding-left: 55px; position: relative;} #pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;} #pun .punbb td div.tclcon {margin-left: 0;} .punbb .forumd-tr div.icon {background: none !important;} .punbb .forumd-tr .tcl .icon .forumd-icon, .forumd-tr .tcl .icon .forumd-icon img { width: auto; height: auto; max-width: 36px; max-height: 36px; }
		Код: /* Мини-иконка темы НА стандартной */ #pun .punbb .main .tcl {padding-left: 55px; position: relative;} #pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;} #pun .punbb td div.tclcon {margin-left: 0;} .forumd-tr .tcl .icon .forumd-icon, .forumd-tr .tcl .icon .forumd-icon img {width: 16px; height: 16px;} .forumd-tr .tcl .icon .forumd-icon {position: absolute; left: 0; top: 0; overflow: hidden;}
3 - перед заголовком Помещает иконку в НАЧАЛО блока <div class="tclcon"></div>, где назодится заголовок темы. В отличие от предыдущих вариантов, иконка находится не в блоке, а внутри <span class="forumd-icon"></span>. Эта опция позволит вам отображать иконки или надписи как инлайн-элементы ПЕРЕД заголовком темы.		Код: /* Иконка перед заголовком */ #pun .punbb .main .tcl {padding-left: 55px; position: relative;} #pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;} #pun .punbb td div.tclcon {margin-left: 0;} .forumd-tr .tcl .forumd-icon div {display: inline;} .forumd-tr.tcl .forumd-icon img {width: 20px; height: 20px; margin-right: 5px; position: relative; top: 5px;} .forumd-tr .tclcon, .forumd-tr .forumd-icon p {line-height: 20px;}
4 - после заголовка Помещает иконку в КОНЕЦ блока <div class="tclcon"></div>, где назодится заголовок темы. В отличие от предыдущих вариантов, иконка находится не в блоке, а внутри <span class="forumd-icon"></span>. Эта опция позволит вам отображать иконки или надписи как инлайн-элементы ПОСЛЕ заголовка темы.		Код: /* Иконка после заголовка */ #pun .punbb .main .tcl {padding-left: 55px; position: relative;} #pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;} #pun .punbb td div.tclcon {margin-left: 0;} .forumd-tr .tcl .forumd-icon div {display: inline;} .forumd-tr .tcl .forumd-icon img {width: 20px; height: 20px; margin-left: 5px; position: relative; top: 5px;} .forumd-tr .tcl .forumd-icon p {margin-left: 5px;} .forumd-tr .tclcon, .forumd-tr .forumd-icon p {line-height: 20px;}
5 - в блок картинки Помещает иконку ВНУТРИ блока картинки <div class="forumd-pic"></div>, который появляется при наличии превью картинки топика. Если у темы НЕТ превью картинки (импортированной или картинки по умолчанию), то иконка добавляться не будет. Эта опция позволит позиционировать иконки, надписи и прочий контент внутри блока картинки.		Код: /* Иконки и надписи блоке картинки */ #pun .punbb .main .tcl {padding-left: 55px; position: relative;} #pun .punbb div.icon {position: absolute; left: 10px; top: 10px; margin: 0;} #pun .punbb td div.tclcon {margin-left: 0;} .forumd-pic {position: relative;} .forumd-pic .forumd-icon .sign { position: absolute; padding: 6px 50px; display: inline-block; background: #326d42; transform: rotate(-40deg); text-transform: uppercase; font-weight: bold; color: #fff; left: -55px; max-width: 130px; text-align: center; font-size: 11px; top: 30px; font-family: 'Times New Roman'; letter-spacing: 2px; } .forumd-pic .forumd-icon img { width: 40px; height: 40px; position: absolute; right: 5px; top: 5px; display: block; padding: 5px; background: #fff; border-radius: 50%; }

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе