Добавлено: Пт Окт 11, 2019 23:59
Заголовок сообщения: Дополнительный функционал форума
Тема предназначена для коллекционирования дополнительного функционала форума. А так же чтобы не искать его по всему форуму.
______________________________________________________________________
Ограничения размера изображений
<style type="text/css">.inframe_rt img, .postbody img { max-width: 800px; max-height: 600px; }</style>
Вставляете в любое сообщение на странице и все изображения во всех сообщениях (в рамках одной страницы) будут НЕ БОЛЬШЕ указанных значений (с сохранением пропорций).
Изображение по ссылке
По причине того, что не у всех ссылок на изображения присутствует в конце ".jpg", ".png" или другой формат, то использование:
просто оставит ссылку в виде текста, а не в виде изображения.
Чтобы это поправить, необходимо использовать вот эту конструкцию:
<img src="ССЫЛКА_НА_ИЗОБРАЖЕНИЕ">
Читабельный жёлтый и белый текст
<style type="text/css">span[style='color: yellow'],span[style='color: white']{padding:0px 4px 1px;background:#222;}span.postbody span[style='color: yellow'],span.postbody span[style='color: white']{box-shadow:inset 0 0 3px 2px #DEE3E7;}div.inframe_rt span[style='color: yellow'],div.inframe_rt span[style='color: white']{box-shadow:inset 0 0 3px 2px #F6E9C9;}</style>
Так выглядит жёлтый текст.
Так выглядит белый текст.
Вставляете в любое сообщение на странице и любой белый и жёлтый текст во всех сообщениях (в рамках одной страницы) будут иметь тёмный фон.
Спойлеры
Код вставить в комментарий и заменить CONTENT на что хотите (текст, картинки и т.д.).
<div class="spoiler-2"><a class="toggle-spoiler" href="javascript:var t=document.querySelector('a.toggle-spoiler:hover').parentElement.lastChild;if(t.style.opacity === '1'){const s = t.style;s.transition = 'height 300ms cubic-bezier(.25,.46,.45,.94) 0s, opacity 50ms ease-out 250ms';s.opacity = 0;s.height = '0px';}else{const s = t.style;s.transition = 'height 300ms cubic-bezier(.25,.46,.45,.94) 0s, opacity 50ms';s.opacity = 1;s.height = `${t.scrollHeight - 5}px`;}void(0);">< Спойлер ></a>
<div class="spoiler-2__hidden">CONTENT</div></div>
Стиль (
без него работать не будет). Вставить в любое место сообщения. Стиль работает на ВСЕ спойлеры на странице (больше одного на страницу вставлять не имеет смысла).
<style type="text/css">.spoiler-2{margin-top:10px;}.spoiler-2 .spoiler-2__hidden{height: 0px;overflow: hidden;opacity: 0;border: 2px solid #0002;margin: 0 40px 0 20px;padding:5px;transition: height 300ms cubic-bezier(.25,.46,.45,.94) 0s, opacity 50ms;}.toggle-spoiler{font-weight:bold;margin-left:20px;text-decoration: none;}.toggle-spoiler:hover{text-decoration: none;}</style>
< Старая реализация спойлера >
Код вставить в комментарий и заменить CONTENT на что хотите (текст, картинки и т.д.).
<div class="spoiler"><a class="toggle-spoiler" href="javascript:var t=document.querySelector('a.toggle-spoiler:hover').parentElement.lastChild;t.style.display=t.style.display===''?'block':'';void(0);">< Спойлер ></a>
<div class="hidden">CONTENT</div></div>
Стиль (
без него работать не будет). Вставить в любое место сообщения. Стиль работает на ВСЕ спойлеры на странице (больше одного на страницу вставлять не имеет смысла).
<style type="text/css">.spoiler{padding-top:10px;}.hidden{display: none;border: 2px solid #0002;margin: 0 40px 0 20px;padding:5px;}.toggle-spoiler{font-weight:bold;margin-left:20px;text-decoration: none;}.toggle-spoiler:hover{text-decoration: none;}</style>
Кубик
После броска результат автоматически копируется в буфер обмена.
Код вставить в комментарий и всё.
<div class="generator"><a class="simple-generator" href="javascript:var a=document.querySelector('a.simple-generator:hover'),p=a.parentElement;a.innerText='[ Бросить кубик ]';var g1=document.createElement('input'),d=document.createElement('span'),g2=document.createElement('input');g1.type='text';g1.className='simple-gen-output';p.appendChild(g1);d.innerText=' Макс. число: ';p.appendChild(d);g2.type='text';g2.className='simple-gen-input';g2.value=20;p.appendChild(g2);a.onclick=()=>{g1.value=Math.floor(Math.random()*(g2.value||20)+1);g1.select();document.execCommand('copy');};a.href='javascript:void(0);';void(0);">[ Подготовить бросок ]</a></div>
Стиль. Вставить в любое место сообщения. Стиль работает на ВСЕ кубики на странице (больше одного на страницу вставлять не имеет смысла).
<style type="text/css">.generator{display:inline-block;margin:10px 0;}.simple-generator{font-weight:bold;margin:0 10px 0 20px;text-decoration: none;}.simple-generator:hover{text-decoration: none;}.simple-gen-output,.simple-gen-input{width:30px;text-align:center;}.simple-gen-output{margin-right:10px;}</style>
Таблицы
Контент 1 |
Контент 2 |
Контент 3 |
Контент 4 |
Контент 5 |
Контент 6 |
Тут всё сложнее.
1. Создать и заполнить таблицу в экселе или гугл таблицах. Оформление можно не делать, оно не перенесётся.
2. Вставить в комментарий код:
<div class="div-table">
<style type="text/css">.div-table>br{display:none}.div-table>table{margin-top:10px;border-collapse:collapse;font-size:12px;color:#000}.div-table>table>tbody>tr>td{padding:2px 6px}.div-table>table>tbody>tr:not(.table-block-header):nth-child(2n){background:#6602}.table-block-header{background:#6604}.table-block-header>td{padding:10px 0 2px 6px;border-left:none!important;border-right:none!important;border-bottom:1px solid;font-weight:700}.div-table>table>td:nth-child(n+2){border-left:1px dashed;text-align:left}.table-header{font-size:14px;font-weight:700}.table-header>td{border-left:none!important;border-right:none!important;border-bottom:1px solid}.table-header>td:last-child{text-align:center}
</style>
TABLE
</div>
3. Перейти сюда:
https://www.avalanche.kiev.ua/site/free/convert-table-html.html ─ это конвертер таблиц из экселя / гугл таблиц в браузерное представление таблиц.
Скопировать свою таблицу и вставить в левое окно.
Убрать галочку "показать рамку таблицы", нажать "сделать".
Скопировать всё и вставить в комментарий вместо "TABLE".
4. Указать строки-заголовки, если надо.
class="table-header" ─ основной заголовок.
class="table-block-header" ─ подзаголовок.
Вставлять в
"tr" элементы (а
не "td"):
<tr class="table-header">
<tr class="table-block-header">
При необходимости дополнить таблицу, достаточно в пункте 2 вставить перед:
новую информацию (эта строка появится после пункта 3), только вставлять надо
БЕЗ:
Иначе создастся новая таблица.
ВАЖНО! Количество
столбцов должно совпадать.
Шаблон хода
<<< СДЕЛАТЬ ХОД >>>
JohnSmith
TITLE
[i][b]Дано: э[/b][/i]
[b]Способность:[/b]
[b]ОД1:[/b]
[i][u]Основная задача:[/u][/i]
[b]ОД2:[/b]
[i][u]Основная задача:[/u][/i]
const to=document.getElementById("private-message-to").innerText,title=document.getElementById("private-message-title").innerText,template=document.getElementById("private-message-template").innerText.slice(4).replace(/\n\n/g,"\n"),formRaw=`##form class="hidden" action="privmsg.php" method="post">##input type="text" name="username" value="${to}">##input type="text" name="subject" value="${title}">##textarea name="message">${template}##/textarea>##input type="submit" name="preview">##/form>`.replace(/##/g,"<"),formParent=document.getElementById("private-message-body");formParent.innerHTML+=formRaw,formParent.querySelector('input[type="submit"]').click();
Ниже предоставлен скрипт, позволяющий игрокам относительно удобно пользоваться шаблоном хода, который создаст ГМ.
Всё очень просто, берёте этот код и вставляете, к примеру, в шапку ИСа:
<div id="private-message-block"><a id="private-message-button" href="javascript:const at=document.getElementById('private-message-button');at.onclick=()=>eval(document.getElementById('private-message-code').innerText);at.href='javascript:void(0);';at.click();void(0);"><<< СДЕЛАТЬ ХОД >>></a>
<div id="private-message-body" class="hidden-easy">
<div id="private-message-to">НИКНЕЙМ_ГМА</div>
<div id="private-message-title">ЗАГОЛОВОК_ПИСЬМА</div>
<div id="private-message-template">[code]ШАБЛОН_ПИСЬМА[/code]</div>
<div id="private-message-code">const to=document.getElementById("private-message-to").innerText,title=document.getElementById("private-message-title").innerText,template=document.getElementById("private-message-template").innerText.slice(4),formRaw=`##form class="hidden-easy" action="privmsg.php" method="post">##input type="text" name="username" value="${to}">##input type="text" name="subject" value="${title}">##textarea name="message">${template}##/textarea>##input type="submit" name="preview">##/form>`.replace(/##/g,"<"),formParent=document.getElementById("private-message-body");formParent.innerHTML+=formRaw,formParent.querySelector('input[type="submit"]').click();</div>
</div>
<style type="text/css">#private-message-button{display:block;font-size:20px;font-weight:bold;text-transform:uppercase;margin:0 0 20px 50px;text-decoration:none;}#private-message-button:hover{text-decoration: none;}#private-message-block br{line-height: 0;}.hidden-easy{position: absolute;height: 0;font-size: 0;line-height: 0;z-index: -1;}</style>
</div>
Остаётся только заменить "НИКНЕЙМ_ГМА", "ЗАГОЛОВОК_ПИСЬМА" и "ШАБЛОН_ПИСЬМА" на то, что надо, и усё!
ВАЖНО! В "ШАБЛОН_ПИСЬМА" [ code ][ /code ] обязателен! Просто замените строку на то, что надо. Не стоит удалять то, что не разрешено.
Таймер в заголовке темы
Для добавления таймера необходимо добавить в конец заголовка:
_ tt 31.12.2099 22:00 tt _
Перед первым "_" должен быть пробел для гарантии корректной работы.
ВАЖНО! После вставки необходимо
убрать пробелы между "_" и "tt" и между "tt" и "_".
Также учтите, что максимальная длина заголовка 60 символов из которых таймер займёт 25.
Дата и время должны быть указаны
всегда и полностью.
Возможны следующие варианты:
dd.MM.yyyy hh:mm
dd-MM-yyyy hh:mm
ВАЖНО! Дату и время необходимо указывать
по МСК (+3), вне зависимости от вашего местоположения.
Копирование дедлайна в тему
Команда для автоматического копирования дедлайна
из заголовка (чтобы указывать его только в одном месте):
ВАЖНО! После копирования убрать пробелы перед "qs" и "deadline".
Данная строка заменится на дату и время дедлайна.
Если по какой-то причине дедлайн не будет найден, то выведется "undefined".
Данную строку можно стилизовать как обычный текст:
[b][i][u]_ qs_ _ deadline_date_[/u][/i][/b]
Пример: 31.12.2099
------------------------------------
Если создам что-то ещё или кто-то другой что-то создаст, дополню этот пост. Так что можете без проблем оставлять комментарии ниже.
Последний раз редактировалось: Восьмой (Вс Окт 31, 2021 4:00), всего редактировалось 32 раз(а)