Регистрируйся на латинице с большой буквы. Например: Veritas Ratio. Забронируй в гостевой роль, чтоб её не увёл кто-то другой! На подачу анкеты у тебя есть трое суток. Для анкеты используй шаблон. Не используй внешности из Honkai Impact 3rd, так как персонажи из этой игры могут появиться в мире Honkai Star Rail и это может создать конфликт персонажей. Анимированные аватары и подписи тоже не используй, пожалуйста. Можешь смело брать себе твина, но учти, что у тебя может быть только 1 ключевой каноничный персонаж. Это правило обсуждаемо, и если ты активный и готов активничать в два раза больше, приходи, и мы обсудим этот вопрос.
их разыскивает КММ
охуенный ивент! — ещё один ебать! — давайте трахаться
роли
акции
правила
гостевая
хронология
сюжет

Bero

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

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

Вы здесь » Bero » МАСИЛИЙ! » Хронология

Хронология

Страница: 1

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

1

  • Автор: Bero
  • Администратор
  • Bero

  • БЕРО | Самый умный

    Я мыслю - значит, я существую!

  • Сообщений: 15
  • Уважение: +0
  • Провел на форуме:
    1 день 3 часа

инструкция:
Ограничить ширину блока - установите нужную ширину в max-width:700px; в блоке [  #ship7   ] или же вовсе удалите строку с ограничением, если ваш форум позволяет таблице не растягиваться за пределы окна (некоторые форумы в своей верстке затрагивают ширину html и это "ломает" блоки с html-вставками в постах - потому здесь и задано ограничение на ширину)

Боковая картинка - используется любой бесшовный фон. Не масштабируется. Картинка устанавливается в html-части.

Увеличить отступ текста от картинки - в начале кода измените значение у --shotg. Там же (чуть ниже) измените последнее [отрицательное] значение у --shotz, он отвечает за "наползание" заголовка на картинку.

Цвет фона у заголовка - в самом начале найдите и измените #fdfbf9

Цвет границ у картинки и заголовков - там же, но цвет #11001a

Разделитель  эпизодов - там же, но измените цвет у linear-gradient на нужный (на transparent если вам не нужны разделители). Там же можно найти и изменить размер отступа (сейчас он 14px)

Шрифт в заголовках - цвет меняется в начале шаблона (--shtxt). размер и семейство можно заменить в блоке [  #ship7 sh4  ]

Шрифт в названии ссылки-эпизода - изменяется в [  #ship7 a.epss  ]. Цвет заимствуется с настроек форума, но можете вписать и свои - в этом же блоке.

Шрифт участников эпизода - в блоке [  #ship7 .pers  ]

Шрифт в текстовом описании - можно двумя способами, в блоке [  #ship7 .sh4  ] или [  #ship7 .sh5  ]. Лучше в первом, потому что второй блок вы можете безболезненно "выкинуть" - он нужен лишь для ограничения описания по высоте (появление полосы прокрутки).

<div class="sh3">...</div> - общий блок, "обволакивающий" один период (заголовок и все относящиеся к нему эпизоды).

<h7>...</h7> - заголовок / год.

<div class="sh4">...</div> - "обволакивает" эпизод со всем его содержимым (ссылка, игроки, описание)

<a href="#" class="epss">...</a> - только ссылка с этим классом будет отображаться со всеми настройками, установленными для "названия эпизода". Сделано это для того, чтобы можно было вносить в текст и прочие ссылки.

<em class="pers">...</em> - сюда вставляем список участников. Он же содержит "отступы" от названия до описания.

<p class="sh5">...</p> - необязательный тег. Нужен для ограничения текста по высоте. Можно безболезненно выбросить и писать текст вне этого тега.

0

2

  • Автор: Bero
  • Администратор
  • Bero

  • БЕРО | Самый умный

    Я мыслю - значит, я существую!

  • Сообщений: 15
  • Уважение: +0
  • Провел на форуме:
    1 день 3 часа

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
.ship7 {
  --shtxt: #11001a;   /* текст в заголовках*/
  --shbg: #fdfbf9; /* фон в заголовках */
  --shbrd: #11001a; /* границы заголовка и картинки */
  --shots: 14px;   /* отступы эпизодов друг от друга */
  --shotg: 16px;   /* отступ текста от картинки */
  --shotz: auto auto 16px -40px;   /* отступ заголовка */
  --shgrad: linear-gradient(90deg, transparent 10%, #11001a 50%, transparent 90%);
}
.ship7 {max-width:700px;  /* ограничиваем ширину блока*/
position:relative; overflow:hidden; box-sizing:border-box; display:grid; grid-template-columns: 120px auto; align-items: start; margin: 8px auto auto 2em;}
.ship7 * {box-sizing:border-box;}
.ship7 *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.ship7 *::-webkit-scrollbar-thumb {background: var(--shbg);}
.ship7 *::-webkit-scrollbar-corner {background: transparent;}
.ship7 .sh1 {display:block; min-height: 100px; height:100%; padding:0px !important; background: var(--shbg) 50% 0% repeat; border: 1px solid var(--shbrd);} /* shipovnik */
.ship7 .sh2 {display:block; height: 100%; width: auto; padding: 20px 6px 14px var(--shotg);}
.ship7 .sh3 {display:block; margin-top:34px;}
.ship7 .sh3:nth-child(1) {margin-top:0px;}
.ship7 h7 {font-family: 'Cuprum', Georgia, serif; font-size: 18px; display:block; background:var(--shbg); color:var(--shtxt); padding: 8px 14px 7px; width: 85%; margin: var(--shotz); border: 1px solid var(--shbrd);}
.ship7 p.sh5 {display:block; overflow:auto; scroll-behavior: smooth; padding-right:8px; max-height: 60px;}
.ship7 .sh4 {position:relative; padding: 0 !important; margin-bottom:var(--shots); text-align: justify; font-size: 11px; line-height: 120%;}
.ship7 .sh4:last-child {margin-bottom:0px;}
.ship7 .sh4::after {display:block; content:""; width:auto; height:1px; background:var(--shgrad); margin-top:var(--shots); }
.ship7 .sh4:last-child::after {display:none;}
.ship7 a.epss {font-family: 'Oswald', Tahoma, sans-serif; font-size: 15px; display:block; width:max-content;}
.ship7 .pers {font-size: 10px; font-family: Tahoma, sans-serif; color: rgba(0, 0, 0, 0.6); font-style:normal !important; display:block; width:max-content; margin: 3px auto 5px 0px;}
</style><div class="ship7"><!-- START -->

<div class="sh1" style="background-image:url(https://image.freepik.com/free-vector/r … 9-6232.jpg);"></div><div class="sh2">

<!-------- ПЕРВЫЙ ГОД -------->
  <div class="sh3"><h7> Сюда вписываем год </h7>

    <!-- Эпизод_1 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_2 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_3 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

</div><!-- КОНЕЦ ГОДА -->

<!-------- ВТОРОЙ ГОД -------->
    <div class="sh3"><h7> Сюда вписываем следующий период </h7>

    <!-- Эпизод_1 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_2 -->
    <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
    <em class="pers">  Список игроков  </em>
    <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_3 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

</div><!-- КОНЕЦ ГОДА -->

<!-- END --></div></div>[/html]

0

Страница: 1

Вы здесь » Bero » МАСИЛИЙ! » Хронология

Рейтинг форумов | Создать форум бесплатно