Полезное для оформления

Страница: 1

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

Поделиться12023-11-13 19:25:21

Автор: Красный Паладин
Администратор
Сообщений: 144
Провел на форуме:
30 дней 8 часов
Последний визит:
2026-09-21 23:27:46

Шрифты, коды...
...разделители и всякое-такое!

Поделиться22023-11-13 19:40:12

Автор: Красный Паладин
Администратор
Сообщений: 144
Провел на форуме:
30 дней 8 часов
Последний визит:
2026-09-21 23:27:46

Шрифты. Часть 1

Zeferino Three - Робин Малия Нойманн

Clip Condensed - Нойманн Мстислава Воронцова

Fun City Level - Эрдрин Ахо

Orpheus - Хенмей Юн Сюань

Rurintania - Виктория Кевин Агассис

Carolina - Диего Чакал

Shlapak Script - Ганрей Спенсер

DeniStina - Иветт Атталь

RUSJellyka Love and Passion - Фосса Кэйетан

Etude - Винтер Найт

Carmen - Миранда Бром

Lombardina Two - Артур Джонатан Сальери

Avenue Deco - Каритас Морэм

Corinthia - Мэйуми Оокубо

Vetrino - Шаганэ Брайя

Sunday - Амано Ран

CafeParisC - Инар Рамирас Тонг

Victorian Gothic One - Лилия Доротея

Lombardia - Вильгельм Рихард Вагнер

Fortuna Gothic FlorishC - Нурбану Гюль Джан

Mason - Михримах Текин Акташ

SeminariaC - Флер Региосса Нэкс

DelphianC - Лизбетт Бах

DS Diploma - Октавия Сирин Белл

WienLight - Алиса Токагэ

skratch-punk - Елим Нойманн

amadeus - Ван Сяомин

Beast Impacted - Тирия Эдриль

Rubik Distressed - Амано Кида

DEAD SECRETARY Cyr - Лирой Маклейн

Rosemaria - Рюрика Бель Орхус

Borntod - Ричард Адамс

METTLACH - АННА ЛИЛИ ВЕБЕР (только капс)

Acid Label Cyr - Сайклен Лонгуэй

SAGRADA Black Cond - Маркус Нойманн

Skandal - Ру Лин Юй

blackmoor let - Теодор Капеловски

Lombardina Initial One - Альмира аль-Габ

Bony - Мун Джиу

Kashima - Мефистофель

GhastlyPanicCyr - Буран Аслог

Blackcraft - Иона Дельгадо

NeedleteethSP - Аль-Рами Бен ал-Кайс

Santa Catarina - Амелия Додо

Legend - Роум Колас

Charming - Сольи де Мануаль

Leotaro - Август Аристарх Омран

Old Horror Films - Алай Койре

Поделиться32025-10-20 20:48:24

Автор: Красный Паладин
Администратор
Сообщений: 144
Провел на форуме:
30 дней 8 часов
Последний визит:
2026-09-21 23:27:46

Визитная карточка для персонажей НПЦ:

Код:

[html]
<link href="" rel="stylesheet"><!-- COULEURS PERSONNALISABLES --><div class="THROW" style="    margin: auto;"><!-- TITRE --><div class="tleTHROW" style="display:none; background:#212121; color:lightgrey;"></div><!-- FT --><div class="ftTHROW"><!-- IMAGE 500*150 - REDIMENSIONNEMENT AUTOMATIQUE --><img src="https://forumstatic.ru/files/001b/84/6e/41453.png" /></div><!-- MESSAGE --><div class="msgTHROW" style="color:black;">
<!-- DIALOGUE GAUCHE --><div class="UITHROW" style="padding: 0.3em 0 0; background-image: linear-gradient(45deg, #0b1011, transparent);
    color: #f3a6a1;
    text-shadow: 2px 2px #000;">       NPC</div>
<!-- FIN DIALOGUE DROITE --></div></div>

<style>
.THROW {
margin:auto; 
width: 17em;
    padding: 0em 0;
box-shadow:0 0 10px rgba(0,0,0,0); 
}
.tleTHROW {
margin:auto; 
width:450px; padding:10px 5px; 
text-align:center; text-transform:uppercase; font-size:24px; font-family:Raleway; line-height:24px;
}
/* FT */
.ftTHROW {
    margin: 15px auto;
    height: 8em;
    overflow: hidden;
    text-align: center;
    border: 0.1vw solid #e16749;
    background-image: linear-gradient(180deg, #111516b0 -6%, #755f5f73, #9191914f, transparent);
}
.ftTHROW img{
width:500px;
}
.ftTHROW:hover img {
filter:grayscale(1); -webkit-filter:grayscale(1);
}

/* DIALOGUE GAUCHE */
.UITHROW::before {
    content: '';
    position: absolute;
    margin-top: -0.61em;
    margin-left: -1.94em;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 15px 15px;
    border-color: transparent;
    border-bottom-color: black;
}
/* DIALOGUE DROITE */
.UIITHROW {
margin:5px 0; 
width:6em; padding:10px 20px 10px 10px; 
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.cdtTHROW {
position:absolute; z-index:3; margin-left:485px; margin-top:85px; 
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.75s; -webkit-transition:-webkit-transform ease-in-out 0.75s;
}
.msgTHROW {
    font-family: "DelphianC" !important;
    z-index: 100;
    position: absolute !important;
    margin: -2.4em -0.33em 0 !important;
    width: 5.8em !important;
    padding: 0.35em 0 !important;
    font-size: 3em;
    text-align: -webkit-center;
    font-family: inherit;
}
</style>
[/html]
[hr]

Выглядит это так:

[html]
<link href="" rel="stylesheet"><div class="THROW" style=" margin: auto;"><div class="tleTHROW" style="display:none; background:#212121; color:lightgrey;"></div><div class="ftTHROW"><img src="https://forumstatic.ru/files/001b/84/6e/41453.png" /></div><div class="msgTHROW" style="color:black;">
<div class="UITHROW" style="padding: 0.3em 0 0; background-image: linear-gradient(45deg, #0b1011, transparent);
color: #f3a6a1;
text-shadow: 2px 2px #000;"> NPC</div>
</div></div>

<style>
.THROW {
margin:auto;
width: 17em;
padding: 0em 0;
box-shadow:0 0 10px rgba(0,0,0,0);
}
.tleTHROW {
margin:auto;
width:450px; padding:10px 5px;
text-align:center; text-transform:uppercase; font-size:24px; font-family:Raleway; line-height:24px;
}
/* FT */
.ftTHROW {
margin: 15px auto;
height: 8em;
overflow: hidden;
text-align: center;
border: 0.1vw solid #e16749;
background-image: linear-gradient(180deg, #111516b0 -6%, #755f5f73, #9191914f, transparent);
}
.ftTHROW img{
width:500px;
}
.ftTHROW:hover img {
filter:grayscale(1); -webkit-filter:grayscale(1);
}

/* DIALOGUE GAUCHE */
.UITHROW::before {
content: '';
position: absolute;
margin-top: -0.61em;
margin-left: -1.94em;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 15px 15px;
border-color: transparent;
border-bottom-color: black;
}
/* DIALOGUE DROITE */
.UIITHROW {
margin:5px 0;
width:6em; padding:10px 20px 10px 10px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.cdtTHROW {
position:absolute; z-index:3; margin-left:485px; margin-top:85px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.75s; -webkit-transition:-webkit-transform ease-in-out 0.75s;
}
.msgTHROW {
font-family: "DelphianC" !important;
z-index: 100;
position: absolute !important;
margin: -2.4em -0.33em 0 !important;
width: 5.8em !important;
padding: 0.35em 0 !important;
font-size: 3em;
text-align: -webkit-center;
font-family: inherit;
}
</style>
[/html]
тексттексттексттексттексттексттексттексттексттексттексттексттекст
тексттексттексттексттексттекст
тексттексттексттекст
тексттексттексттексттекст

Поделиться42026-05-17 01:25:48

Автор: Итикава Аи Мейфенг
Чиновница Аи Мей
Монарши: 7,5
Миловидная типичная нейвийка с длинными темными волосами и карими глазами. Энергичность бьет через край. Общительная, воздушная, с ней легко найти общий язык. Чиновник, впрочем, въедливый... Если построила какие-то серьезные планы, то биться за них будет с заметным энтузиазмом.
Местный | Острова Нейва
≈ 95 лет | 20 лет
Воздух
Соавтор
Сообщений: 22
Провел на форуме:
14 часов 59 минут
Последний визит:
2026-09-02 04:03:39

Неплохой вариант для хранения изображений ~

Получается вот такое. Аватары представлены в досье автора кода ♥

Код:

[html]  
<br/>

<div style="display: flex;flex-wrap: wrap;justify-content: center;">

<a href="......." target="_blank" style="width: 100px;display: inline-flex;"><img name="imgORUZH" src="......" /></a> 
<a href="......" target="_blank" style="width: 100px;display: inline-flex;"><img name="imgORUZH" src="....." /></a>
 
</div>
[/html]

Инструкция

1.
Сколько нам надо изображений, столько раз дублируем только вот эти коды: <a href="......." target="_blank" style="width: 100px;display: inline-flex;"><img name="imgORUZH" src="......" /></a> . То, что выше них или ниже них не трогаем!

2.
На месте ....... по два раза (на один кодик-строчку) вставляем одну и ту же ссылку на изображение. На одно и то же, не на разные. Просто одно ..... дает предварительный просмотр, а другое выведет в окошко полной версии.

3.
Используем ссылки только из Загрузок. Путь: Профиль > Редактировать > Загрузки.

4.
Любые украшения (название c шрифтами, комментарии и т.п.) делаем вне рамок [hтml]...[/hтml], то есть только до или после кода. Не в нем.

5.
Наслаждаемся итогами ~

[icon]https://upforme.ru/uploads/001b/84/6e/69/873401.png[/icon]

Отредактировано Итикава Мейфенг (2026-05-17 01:28:45)

Поделиться52026-05-17 01:54:28

Автор: Итикава Аи Мейфенг
Чиновница Аи Мей
Монарши: 7,5
Миловидная типичная нейвийка с длинными темными волосами и карими глазами. Энергичность бьет через край. Общительная, воздушная, с ней легко найти общий язык. Чиновник, впрочем, въедливый... Если построила какие-то серьезные планы, то биться за них будет с заметным энтузиазмом.
Местный | Острова Нейва
≈ 95 лет | 20 лет
Воздух
Соавтор
Сообщений: 22
Провел на форуме:
14 часов 59 минут
Последний визит:
2026-09-02 04:03:39

Если нужно удобно хранить локации ~

Получается вот такое. Привет от модераторов ♥

Код:

[html]
<br/>

<div style="display: flex;flex-wrap: wrap;justify-content: center;">

<a href="....." target="_blank" style="margin: 3px;
    width: 235px;display: inline-flex;"><img name="imgORUZH" src="....." /></a>
<a href="....." target="_blank" style="margin: 3px;
    width: 235px;display: inline-flex;"><img name="imgORUZH" src="....." /></a>

</div>
[/html]

Инструкция

1.
Сколько нам надо изображений, столько раз дублируем только вот эти коды: <a href="....." target="_blank" style="margin: 3px;
width: 235px;display: inline-flex;"><img name="imgORUZH" src="....." /></a>. То, что выше них или ниже них не трогаем!

2.
На месте ....... по два раза (на один кодик-строчку) вставляем одну и ту же ссылку на изображение. На одно и то же, не на разные. Просто одно ..... дает предварительный просмотр, а другое выведет в окошко полной версии.

3.
Используем ссылки только из Загрузок. Путь: Профиль > Редактировать > Загрузки.

4.
Любые украшения (название c шрифтами, комментарии и т.п.) делаем вне рамок [hтml]...[/hтml], то есть только до или после кода. Не в нем.

5.
Наслаждаемся итогами ~

[icon]https://upforme.ru/uploads/001b/84/6e/69/928936.png[/icon]

Отредактировано Итикава Мейфенг (2026-05-17 01:58:04)

Поделиться62026-07-21 22:39:57

Автор: Красный Паладин
Администратор
Сообщений: 144
Провел на форуме:
30 дней 8 часов
Последний визит:
2026-09-21 23:27:46

Код для оформления записей
Вариант 1

ПРИМЕР:
[html]
<link href="http://fonts.googleapis.com/css?family=Economica" rel="stylesheet" type="text/css"><link href="https://forumstatic.ru/files/001b/84/6e/61689.css" rel="stylesheet" type="text/css">
<div class="SDL" style="background: linear-gradient(92deg, #375777b5, transparent, transparent);"><div class="imgSDL">
<img src="https://www.aht.li/3121370/135100BW.png" />
<img src="https://www.aht.li/3121370/135100BW.png" />
<img src="https://www.aht.li/3121370/135100BW.png" />
<img src="https://www.aht.li/3121370/135100BW.png" /></div>
<div class="msgSDL"style="background: #8e73625e; color: #ebcfab;">Message.</div>
<div class="abtSDL" style="color:white;"><p>Название темы</p>
<span><img src="https://upforme.ru/uploads/001b/84/6e/3/168106.png" /></span>
</div>
</div>
[/html]
Пример у персонажа с полным оформлением

Код:

<link href="http://fonts.googleapis.com/css?family=Economica" rel="stylesheet" type="text/css"><link href="https://forumstatic.ru/files/001b/84/6e/61689.css" rel="stylesheet" type="text/css"><!-- COULEURS PERSONNALISABLES -->
<div class="SDL" style="background: linear-gradient(92deg, #375777b5, transparent, transparent);"><!-- 4 IMAGES 135*100 - REDIMENSIONNEMENT AUTOMATIQUE --><div class="imgSDL">
<!-- I --><img src="..." />
<!-- II --><img src="..." />
<!-- III --><img src="..." />
<!-- IV --><img src="..." /></div>
<!-- MESSAGE --><div class="msgSDL"style="background: #8e73625e; color: #ebcfab;">...</div>
<!-- TITRE --><div class="abtSDL" style="color:white;"><p>...</p>
<!-- FT / INFORMATIONS DIVERSES --><span><img src="..." /></span>
</div>
</div>

Как заполнять

[html]
<div style="display: flex;flex-wrap: wrap;justify-content: center;">
<a href="https://upforme.ru/uploads/001b/84/6e/3/503527.png" target="_blank" style="width: 600px;display: inline-flex;"><img name="imgORUZH" src="https://upforme.ru/uploads/001b/84/6e/3/503527.png" /></a>
</div>
[/html]
Изображения размером 135х100
Изображение вертикальное и узкое. Размер любой (подгоняется автоматически.
Название темы.
Основной текст.
[html]
По желанию:
<div style="display: flex;flex-wrap: wrap;justify-content: center;">
<a href="https://upforme.ru/uploads/001b/84/6e/3/256508.png" target="_blank" style="width: 600px;display: inline-flex;"><img name="imgORUZH" src="https://upforme.ru/uploads/001b/84/6e/3/256508.png" /></a>
</div>
[/html]
Здесь можно поменять цвет общего градиентного фона.
Здесь можно поменять цвет у окна с основным текстом.
Здесь можно поменять цвет самого основного текста
(!)Если прописываете цвет кодовым обозначением - сохраняете впереди знак #. Если прописываете цвет словом на латинице - знак убираем.

Поделиться72026-10-02 19:29:42

Автор: Тирия Эдриль
Факел
Монарши: 10,5
Яркое пятно в толпе, отличается как "огненной" внешностью, так и своеобразным выбором одежды. Ярко-красные волосы, часто заплетённые в разнообразные косички и украшенные то цветами, то бижутерией. Острые черты лица, длинные остроконечные уши и до идеала натренированная улыбка. Осторожно! Кусается!
Местная | Империя Нэкс
≈ 53 года | 25 лет
Огонь
Почетный соавтор
Сообщений: 322
Провел на форуме:
9 дней 6 часов
Последний визит:
Сегодня 10:28:05

Хронология изображений
_______________________________________________________________________________________

Как оформить хронологию событий в дневнике
Одна карточка в шаблоне - один игровой эпизод. На ней показаны арт и статус эпизода. При наведении на карточку открываются игровая дата и название эпизода.

1. Подготовьте арт
Размер каждого арта - 200 × 400 пикселей. Именно такой размер задан в коде.
Арты обязательно загружать через форумный проводник: Профиль → Редактировать → Загрузки. После загрузки скопируйте прямую ссылку на файл. Её нужно вставить в параметр src у изображения нужной карточки. Сторонние хостинги для этого оформления не подходят. Необходимая строчка выглядит вот ТАК.

2. Заполните карточку
Скопируйте предоставленный код в сообщение дневника целиком. Каждая карточка находится между комментариями «BEGIN memberrow» и «END memberrow». Внутри неё меняются только:
• Ссылка - вставьте ссылку на тему эпизода.
• Статус - «Активен», «Завершен» или «Заморожен».
• Цвет в color: той же строки: активен - #009d3f (зелёный); завершен - #b43c37 (красный); заморожен - #44508c (синий).
• Ссылка на арт в параметре src у изображения - вставьте прямой адрес загруженного через форум .
• Игровая дата, название эпизода.
Заголовок всей подборки можно заменить: найдите «Хронология событий» наверху.

3. Добавьте ещё одну историю
Скопируйте одну готовую карточку целиком - от комментария «BEGIN memberrow» до ближайшего «END memberrow» - и вставьте рядом с остальными. Затем замените в копии ссылку, статус и его цвет, арт, дату и название. Верхнюю таблицу, блок стилей style и скрипт повторно копировать не нужно. Для удобства чтения располагайте карточки по игровой хронологии.

4. Уберите карточку
В том случае, если в шаблоне для вашего персонажа пока ещё недостаточно эпизодов (в шаблоне лежит код на 13 карточек), вы можете так же удалить готовые карточки, вплоть до одной единственной. Удалите шаблон кода карточки целиком - от комментария «BEGIN memberrow» до ближайшего «END memberrow».

5. Проверьте перед публикацией
В предпросмотре убедитесь, что арт не растянут, при наведении видны нужные дата и название, а нажатие на статус ведёт к нужному эпизоду. Ширина карточки 200 х 400.
Остальную разметку, классы, стили и служебные строки менять не требуется.

Код:

[html]
<div class="bgLMBER"><div class="tleLMBER">Хронология событий</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="{memberrow.ROW_CLASS}" align="center">

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

   <!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

   <!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

   <!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

   <!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>
<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->

<!-- BEGIN memberrow -->
<div id="LMBER"><div id="MBER">
<div class="triLMBER"></div>
<div class="triRMBER"></div>
<div id="nameLMBER"><div class="nameLMBER">
<a class="gen" href="... ССЫЛКА НА ЭПИЗОД ..." style="font-size: 23px; font-family: 'Clip Condensed'; color: #777777;">... СТАТУС ЭПИЗОДА ...</a>
</div>
<div class="triMBER"></div>
</div>
<div class="imgLMBER"><img src="https://upforme.ru/uploads/001b/84/6e/14/265708.jpg"><div>
<div class="boxLMBER">
<a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<br/>
<span style="width:100%; margin:5px auto; letter-spacing:2px;">... ДАТА ЭПИЗОДА ...</span>
<span style="font-size: 13px; display: flex; height: 50px; width: 100%; flex-wrap: wrap; justify-content: center; align-content: center;">... НАЗВАНИЕ ЭПИЗОДА ...</span>
</div></div></div>

<!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->
<script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.boxLMBER').css("background-color", color);});}); $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.boxLMBER').css("color", color);});});//]]></script>

   <!-- BEGIN switch_td_group --><span style="display:none;">{memberrow.GROUPS}</span><!-- END switch_td_group --></div></div>
<!-- END memberrow -->
   </td>

</tr>
</table>



</form>
</div></div>


<style>
/* FOND LISTE DES MEMBRES */
.bgLMBER {
    background-image: linear-gradient(358deg, rgba(115, 136, 150, 0.42), rgba(39, 51, 60, 0.14) 55%, transparent);
}
/* TITRE LISTE DES MEMBRES */
.tleLMBER {
box-sizing:border-box;
width:calc(100% - 40px); max-width:745px;
margin:0 auto 25px; padding:18px 16px;
font-family:'Zeferino Three' !important; font-size:64px; line-height:1.15; text-align:center;
background:#101415; color:#a8b99b;
border:2px solid #cba3a8; border-radius:999px;
text-shadow:1px 2px 2px #090e10;
}
 /* BLOC LISTE DES MEMBRES */
#LMBER {
margin:auto; width:660px; text-align:center;
}
/* BLOC MEMBRE */
#MBER {
float:left; margin:15px 10px 10px;
width:200px; height:405px; font-family:Arial;
}
/* BLOC PSEUDONYME */
#nameLMBER {
position:absolute; z-index:3; margin-top:-10px; margin-left:85px;
width:100px; height:auto;
}
/* OMBRES BLOC PSEUDONYME */
.triLMBER {
position:absolute; z-index:2; margin-top:-10px; margin-left:80px;
width:0; height:0; border-style:solid; border-width:0 0 15px 5px; border-color:transparent;
border-bottom-color:black; /* MODIFIABLE */
}
.triRMBER {
position:absolute; margin-top:-10px; margin-left:185px;
width:0; height:0; border-style:solid; border-width:15px 0 0 5px; border-color:transparent;
border-left-color:black; /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER {
width:80px; padding:10px 10px 0;
text-align:center; text-transform:uppercase;
background:#E7E7E7; /* MODIFIABLE */
}
/* IMAGES MP * WWW */
.btnLMBER {
margin-top:5px; text-align:center;
}
/* POINTE PSEUDONYME */
.triMBER {
width:0; height:0; border-style:solid; border-width:20px 50px 0 50px; border-color:transparent;
border-top-color:#E7E7E7; /* MODIFIABLE */
}
/* AVATAR */
.imgLMBER img {
position:absolute; z-index:2; margin-left:-100px;
width:200px; height:400px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
.imgLMBER {
    position: relative;
width:200px; height:400px; overflow:hidden;
}
.imgLMBER div {
position:relative;
width:200px; height:400px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div {
width:190px; height:145px; padding:5px; overflow:hidden;
font-size:11px; text-align:center;
background:#483d43 !important; color:#a8b99b !important; /* Панель даты и названия */
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.imgLMBER:hover div div {
transform:translateY(289px); -webkit-transform:translateY(289px);
}
.imgLMBER:hover img {
transform:translateY(-111px); -webkit-transform:translateY(-111px);
}
/* INFORMATIONS */
.imgLMBER div div span {
display:inline-block; vertical-align:top; height:17px; padding-top:3px;
text-align:center; text-transform:uppercase; font-size:10px;
background:#1d191b !important; color:#a8b99b !important; /* Плашки даты и названия */
}
/* NAVIGATION LISTE DES MEMBRES */
.pageLMBER {
margin:auto; width:640px;
color:black; /* MODIFIABLE */
text-align:left; text-transform:uppercase; font-size:10px; font-family:Arial;
}
.pageLMBER a {
color:black; /* MODIFIABLE */
font-family:Arial;
}
/* FORMULAIRE RECHERCHE LISTE DES MEMBRES */
.btmLMBER {
margin-top:15px; padding:15px 0;
background:#212121; /* MODIFIABLE */
text-align:center;
}
/* INTITULES FORMULAIRE RECHERCHE LISTE DES MEMBRES */
.formLMBER span {
display:inline-block; vertical-align:bottom; margin-top:1px;
height:17px; padding:2px 5px 0;
background:lightgrey; color:black; /* MODIFIABLE */
text-transform:uppercase; font-size:10px; text-align:center; font-family:Arial;
}
.formLMBER input, select {
border:none !important;
height:19px; padding:0;
text-transform:uppercase; font-size:10px; font-family:Arial;
}
/* BOUTON OK LISTE DES MEMBRES */
.formLMBER .liteoption {
padding:0 5px 0 2px;
background:lightgrey; color:black; /* MODIFIABLE */
text-transform:uppercase; font-weight:bold;
}

</style>
[/html]

Получается вот ТАК или вот ТАК.

Отредактировано Тирия Эдриль (2026-10-02 19:51:49)

Страница: 1

Platform

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

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

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

Полезное для оформления

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

Поделиться12023-11-13 19:25:21

Поделиться22023-11-13 19:40:12

Поделиться32025-10-20 20:48:24

Поделиться42026-05-17 01:25:48

Поделиться52026-05-17 01:54:28

Поделиться62026-07-21 22:39:57

Поделиться72026-10-02 19:29:42