2025, декабрь

03.09.25. План выполнен!
29.08.25. Новая информация о особенности информации появилась в мат. части. Подробнее читайте в новостях.

18.08.25. Появились первые акции и новые темы в билиотеке. Посмотреть список можно здесь.

13.08.25. Немного о планах.

11.08.25. Форум открыт!

Ревон

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Ревон » Создание истории » Для оформления

Для оформления

Страница: 1

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

1

  • Автор: Танатос
  • alone in the dark
  • Танатос
  • Сообщений: 1724
  • Уважение: +107
  • Последний визит:
    Сегодня 20:05
  • Властелин котиков, ужасный тиран и повелитель абсурда.

Полезные шаблоны для использования в хронологии, дневников отношений и т. д.

[hz]Хронология[/hz]

внешний вид

[html]<link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
<div id="ship13h">Хронология
<em>какой-то текст</em></div>
<div id="ship13"><!--- НАЧАЛО БЛОКОВ --->

<!--- ДАТА 1--->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>

<!--- ДАТА 2 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>

<!--- ДАТА 3 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>

<!--- ДАТА 4 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>

<!--- ДАТА 5 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>
<!--- КОНЕЦ БЛОКОВ ---></div>[/html]
модифицированный код вящего духа

код
Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
<div id="ship13h">Хронология
<em>какой-то текст</em></div>
<div id="ship13"><!--- НАЧАЛО БЛОКОВ --->

<!--- ДАТА 1--->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>


<!--- ДАТА 2 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>


<!--- ДАТА 3 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>


<!--- ДАТА 4 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>

<!--- ДАТА 5 --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>
<!--- КОНЕЦ БЛОКОВ ---></div>[/html]

[hx]ВАЖНО![/hx]
Не удаляйте никакие тэги.
Помещайте свой текст только туда, где это предусмотрено шаблоном.
Чтобы добавить новый временный период, скопируйте код, приведенный ниже, и поместите его перед комментарием:
<!--- КОНЕЦ БЛОКОВ --->
Да, код может быть сложным для неразбирающихся в хтмл. Зато красиво будет выглядеть хронология.

код даты
Код:
<!--- ДАТА --->
<div class="boxf"><em class="numbrow">ГОД</em><div class="boxcat"></div>
<div class="textf">
<p> <a href="ссылка"><b>эпизод 1</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 2</b></a> - описание</p>
<p>с новой строки</p>
<p><a href="ссылка"><b>эпизод 3</b></a> - описание</p>
<p>с новой строки</p>
<p> <a href="ссылка"><b>эпизод 4</b></a> - описание</p>
<p>с новой строки</p>
</div></div>

Если что-то у вас сломается, я починю.

[hz]Картинки[/hz]

Выглядит это как в оформлении Царств. Размер картинок фиксированной. Независимо от количества всегда будут по центру.

код
Код:
[html]<div class="img-grid">
<div class="img-wrap"><img src="ССЫЛКА"></div>

<div class="img-wrap"><img src="ССЫЛКА"></div>

<div class="img-wrap"><img src="ССЫЛКА"></div>

<div class="img-wrap"><img src="ССЫЛКА"></div>

<div class="img-wrap"><img src="ССЫЛКА"></div></div>[/html]

+1

2

  • Автор: Танатос
  • alone in the dark
  • Танатос
  • Сообщений: 1724
  • Уважение: +107
  • Последний визит:
    Сегодня 20:05
  • Властелин котиков, ужасный тиран и повелитель абсурда.

[hz]Отношения[/hz]

Внешний вид

[hz]Отношения[/hz]
[html]
<div class="uc-table">

<!---- ПЕРСОНАЖ 1---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="https://i.pinimg.com/736x/e1/47/0f/e1470f21c944a89f7b1ba34d05892380.jpg" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

  <!---- ПЕРСОНАЖ 2---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="https://i.pinimg.com/736x/23/b9/e8/23b9e876ca8aa4837d72129cbaf1df68.jpg" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

<!---- ПЕРСОНАЖ 3---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="https://i.pinimg.com/1200x/f7/42/9f/f7429f69d1a7dcbf72a4b94d328f878e.jpg" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

<!---- ПЕРСОНАЖ 4---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="https://i.pinimg.com/736x/9d/3a/46/9d3a46fba9682768cd8676f0f5f32c4b.jpg" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

<!---- СЮДА МОЖНО ВСТАВИТЬ ЕЩЕ ОДИН БЛОК ДЛЯ ОПИСАНИЯ ОТНОШЕНИЙ.---->

</div>[/html]

шаблон
Код:
[align=center][hz]Отношения[/hz][/align]
[html]<div class="uc-table">

<!---- ПЕРСОНАЖ 1---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="КАРТИНКА" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

  <!---- ПЕРСОНАЖ 2---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="КАРТИНКА" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>
 
<!---- ПЕРСОНАЖ 3---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="КАРТИНКА" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

<!---- ПЕРСОНАЖ 4---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="КАРТИНКА" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

<!----ДОПОЛНИТЕЛЬНЫЙ БЛОК---->

</div>[/html]

[hx]ВАЖНО![/hx]
Не удаляйте никакие тэги. <br> можно, если в описании не нужно сделать с нового абзаца.
Помещайте свой текст только туда, где это предусмотрено шаблоном.
Чтобы добавить новый блок о персонаже, скопируйте код, приведенный ниже, и поместите его перед или вместо:

<!----ДОПОЛНИТЕЛЬНЫЙ БЛОК---->

код
Код:
<!---- ПЕРСОНАЖ №---->
<div class="uc-row" style="margin-bottom: 40px;"><div class="uc-img-box">

<img src="КАРТИНКА" style="max-width: 100%; max-height: 100%;"></div>

<div class="uc-info"><div class="uc-name">Имя</div>

<div class="uc-relation">Степень родства\дружбы</div>

<div class="uc-phrase">Что-то о персонаже.
<br>С новой строки.
</div></div></div>

Размер картинок фиксированный. Чтобы ваша корректно отображалась, сделайте их либо 150х150, либо большего размера, но квадратные.

0

Страница: 1

Вы здесь » Ревон » Создание истории » Для оформления