Сюжетные Истории
Отредактировано Платформа (2023-12-15 16:35:46)
Сюжетные Истории
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12022-09-15 18:36:51
- GameMaster
- ...
- GameMaster
- Сообщений: 388
- Провел на форуме:
9 дней 13 часов - Последний визит:
Вчера 23:39:53
Поделиться22026-05-01 19:36:09
- Некто из Ордена Исследователей Платформы.
- Очень много лет
- Администратор
- Сообщений: 230
- Провел на форуме:
23 дня 10 часов - Последний визит:
Сегодня 20:30:33
Код:
[html]
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://forumstatic.ru/files/001b/84/6e/92624.css" rel="stylesheet">
<!-- НАЗВАНИЕ ЭПИЗОДА -->
<div class="THROW2">
<!-- TITRE --><div class="tleTHROW2" style="min-width: 28vw;">
.....</div>
<!-- ВЕДУЩИЕ ЭПИЗОДА -->
<div class="ftTHROW style="z-index: 5000;">
<p style="width: 90.525vw;
padding: 5.67vw 0;
position: relative;
margin: -4.57vw auto;
background-image: linear-gradient(360deg, #0000, #00000066, #1a0a0ad6, #00000061, #0000);
color: #e5bdbd;">ВЕДУЩИЙ(Е)</br>
....</p>
<!-- ИЗОБРАЖЕНИЕ ЭПИЗОДА -->
<img src="...." />
</div></div>
<!-- МЕСТО И ДАТА -->
<div class="THROW" style="margin: auto;
top: -0.99vw;
position: relative;
background-image: linear-gradient(180deg, #000000b0 37%, transparent);
border-bottom-left-radius: 5.8vw;
border-bottom: none !important;
border-top: none !important;
border-bottom-right-radius: 5.8vw;
border: 0.1vw solid #f7d2d2;">
<div class="tleTHROW">
Жанр(ы): ...</br>
Место событий: ....</br>
Календарь: Декабрь 44 524 года от а.п.</div>
<!-- УЧАСТНИКИ ЭПИЗОДА -->
<div id='container3'>
<!-- УЧАСТНИК 1 -->
<div class="item tm1">
<img src="....">
<p><a href="....">....</a></p>
</div>
<!-- УЧАСТНИК 2 -->
<div class="item tm2">
<img src="....">
<p><a href=".....">.....</a></p>
</div>
</div>
<!-- ОПИСАНИЕ ЭПИЗОДА -->
<div class="msgTHROW" style="color: #d9d9d9;">
....
</br>
......
</br></br>
.....
</div></div>
[/html]
Инструкция
<!-- ВЕДУЩИЕ ЭПИЗОДА -->
<div class="ftTHROW">
<p style="width: 90.525vw;
padding: 5.67vw 0;
position: relative;
margin: -4.57vw auto;
background-image: linear-gradient(360deg, #0000, #00000066, #1a0a0ad6, #00000061, #0000);
color: white;">ВЕДУЩИЙ(Е)</br>
........</p>ПОЯСНЕНИЕ: просто вписываем вместо многоточия никнейм персонажа, который ведет эпизод. Если ведущих несколько, то вписываем никнеймы персонажей через запятую.
<!-- ИЗОБРАЖЕНИЕ ЭПИЗОДА -->
<img src="https://upforme.ru/uploads/001b/84/6e/11/124620.png" />
</div></div>ПОЯСНЕНИЕ: уже имеющееся изображение можно менять, а можно и не менять - при желании.
В случае, если решили изменить:
- кадрировать(обрезать) изображение обязательно. Лучше всего придерживаться размера с "примера" - 1490х480. Разрешение и качество у исходного изображения должны быть максимальными;
- вставлять прямую ссылку на изображение, как показано на примере. Загружать файл изображения только(!) через встроенный на форуме файлообменник, путь к которому - Профиль » Редактировать » Загрузки. Загружаете файл, тыкаете на числовое название файла правой кнопкой мыши, жмете на "Скопировать адрес ссылки", вставляете в код вместо старой ссылки. Ссылка должна оставаться в "кавычках", как на примере - следим за этим;
- в случае, если Вы не можете (не умеете) обрезать изображения, но поменять картинку под свой эпизод очень хочется - смело обращайтесь за помощью в дискорд-канал к нашим мастерам.
<!-- ОПИСАНИЕ ЭПИЗОДА -->
<div class="msgTHROW" style="color: #eef9d7;">
........
</br></br>
........
</br>
........
</div></div>ПОЯСНЕНИЕ: вместо многоточий идет текст описания эпизода. Код </br>
служит для начала нового абзаца (переносит следом идущий текст на новую строку) - ставится прямо в тексте в начало нового абзаца. Двойной код - </br></br> - ставится в тексте между абзацами, которые нужно зрительно отделить пробелом.
Участники эпизода
<!-- УЧАСТНИК 1 -->
<div class="item tm1">
<img src="прямая ссылка на изображение аватара персонажа">
<p><a href="ссылка на профиль персонажа">имя персонажа или прозвище</a></p>
</div>
Когда нужно увеличить количество ячеек участников, копируем этот код:Код:<!-- УЧАСТНИК 1 --> <div class="item tm1"> <img src="........"> <p><a href="........">........</a></p> </div>...- и дублируем-вставляем его нужное количество раз. ВАЖНО вставлять скопированный код ячейки до закрывающих общий код </div>[/html]. В каждой новой ячейке обязательно меняйте числа в соответствии с числовым порядкам.
<!-- УЧАСТНИК 1 -->
<div class="item tm1">
Страница: 1
