Janitor
Главная
Ctrl K
ВойтиРегистрация

EPHEMERIS | CSS-ШАБЛОН [ЗАПРОС]

Переведено с английского·

EPHEMERIS | CSS TEMPLATE [REQUEST]

16

16

by:@Ru1nous

A CAN WE PRETEND THAT AIRPLANES IN THE NIGHT SKY ARE LIKE SHOOTING STARS

──────── ✦ ────────

EPHEMERIS
ШАБЛОН ПРОФИЛЯ JANITORAI В СТИЛЕ НОЧНОГО НЕБА | КОД БИО ОТ @MONIE_

✦ КАК ПОЛЬЗОВАТЬСЯ ЭТИМ РУКОВОДСТВОМ ✦

01 / ПЕРЕД ТЕМ КАК НАЧАТЬ

БЫСТРЫЙ СТАРТ

1 · Скопируйте ВСЁ | ЗОЛОТО | (GOOGLE DOCS)

2 · Отредактируйте с помощью поиска (Ctrl/Cmd + F). Ищите названия классов из этого руководства, например nx-title.

3 · Выделите всё, скопируйте и вставьте в поле «Обо мне» на JanitorAI. Сохраните, обновите страницу, проверьте на телефоне.

──────── ✦ ────────

02 / ЧТОБЫ НИЧЕГО НЕ СЛОМАЛОСЬ

5 ПРАВИЛ

✦ Никаких пустых строк. Для новой строки используйте <br>.

✦ Только прямые ссылки на изображения. Должны заканчиваться на .png / .jpg / .gif. Оставьте неиспользуемые картинки как src="" — они спрячутся сами.

✦ Меняйте только слова внутри "кавычек" или между > и <. Никогда не удаляйте кавычки, < >, { } или class=.

✦ Никаких комментариев и символов * ~ в части <style>. JanitorAI обрезает таблицу стилей на них.

✦ JanitorAI удаляет url(), @import, data: картинки, CSS-переменные, <input>, <label>, а также CSS-свойства scale: и rotate:.

· ─────── ✦ ─────── ·

03 / НАЙТИ → ЗАМЕНИТЬ

Я ХОЧУ ИЗМЕНИТЬ...

моё имя → nx-title

приветственную строку → nx-kicker

картинку моего персонажа → nx-sona

картинку луны → nx-moon-pic

текст бегущей строки (правьте обе копии) → nx-ticker-set

блоки «Обо мне» → nx-acc

картинки «Обо мне» (3) → nx-portrait

Правила / FAQ → nx-rf · nx-rule

мои ссылки → nx-fl

друзей → nx-friend

галерею (правьте обе группы) → nx-gi

сериалы → nx-cover

баннеры → nx-banner

музыкальный плеер → nx-mp-trk

гирлянду → nx-fairy · nx-fairyb

питомца страницы → nx-pet

кредиты → nx-credit

──────── ✦ ────────

04 / КАЖДАЯ ПАНЕЛЬ

РАЗДЕЛЫ

ОБО МНЕ

Три картинки в арочной рамке, по одной на блок. Каждый блок — это <details>: заголовок в <summary>, текст в <p>. Сохраняйте все три блока. Чтобы добавить один, скопируйте целый блок.

✦ ПРАВИЛА & FAQ — две карточки с картинками; при наведении выезжают, при нажатии открывается список. Правила — это nx-rule (заголовок в <b>, причина в <span>). Вопросы FAQ — это <details>.

✦ НАЙТИ МЕНЯ — по одной строке nx-fl на ссылку: символ в <i>, название в <b>, строка в <small>, ссылка в href.

✦ ДРУЗЬЯ — по одной строке nx-friend на каждого (имя, строка, картинка, ссылка). Влезает четверо; остальные прокручиваются.

✦ ГАЛЕРЕЯ — прокручиваемая вбок лента. В ней ДВЕ одинаковые группы (nx-gset): меняйте каждую картинку в ОБЕИХ.

✦ СЕРИАЛЫ — каждый сериал — это ОДИН блок <details class="nx-cover"> ... </details>. Чтобы добавить один, скопируйте целый блок; никогда не вставляйте внутрь блока.

✦ ОБО МНЕ · ПРАВИЛА · ССЫЛКИ · ДРУЗЬЯ · ГАЛЕРЕЯ · СЕРИАЛЫ ✦

· · · ✦ · · ·

05 / МАЛЕНЬКИЕ ДОПОЛНЕНИЯ

МУЗЫКАЛЬНЫЙ ПЛЕЕР

Панель из матового стекла вдоль низа шапки. Перемотка назад и вперёд переключает между 3 треками (картинка диска, название, исполнитель и ссылка меняются). Play открывает ссылку этого трека.

Найдите nx-mp-trk → три блока. Меняйте nx-mp-song, nx-mp-artist, <img src=""> и href у nx-mp-btn.

Ссылка на автовоспроизведение YouTube: https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID&autoplay=1
Spotify открывает плейлист, но принудительно запустить автовоспроизведение нельзя.

05B / ЗВЁЗДНЫЕ ГИРЛЯНДЫ

ГИРЛЯНДА

Две многослойные гирлянды из мерцающих звёзд свисают снизу верхней панели сайта, с качающимися подвесными звёздами. Они остаются на месте при прокрутке и никогда не блокируют клики. Первая — nx-fairy (7 ровных провисов), более плотная сверху — nx-fairyb (11 неровных провисов).

Сдвинуть их вверх или вниз → измените top:56px в обоих правилах (одинаковое число). На телефонах используется top:44px в строке @media (max-width:720px) ближе к концу CSS.

Убрать одну → удалите её блок <div class="nx-fairy..."> в самом начале кода. Удаляйте соответствующий CSS только если хотите прибраться в коде.

06 / ЛУНА

ЛУНА

Поместите прозрачный PNG в nx-moon-pic. Он циклится за 60 секунд: тень съезжает, картинка переворачивается, тень возвращается. Измените 60s в четырёх правилах луны (держите их равными); -12s — точка старта. Если она стоит не по центру, измените inset:-19% в .nx-moon-pic.

07 / ПАЛИТРА

ЦВЕТА & ШРИФТЫ

Цвета прописаны в каждом правиле, поэтому «Найти & Заменить» перекрашивает всё.

#d9dce6 серебро #b9a6d6 фиолетовый акцент #5b5b66 серые границы #ececf0 основной текст

Золотая версия: используйте Золотой шаблон или замените #d9dce6 → #efddba и #b9a6d6 → #dfc277

Шрифты: работают только встроенные шрифты сайта (нельзя @import). Меняйте название через «Найти & Заменить», список допустимых шрифтов можно найти ЗДЕСЬ.

──────── ✦ ────────

08 / КОГДА ЧТО-ТО ВЫГЛЯДИТ НЕ ТАК

УСТРАНЕНИЕ НЕПОЛАДОК

♡ Страница без стилей — в <style> попали * ~ или /* */, либо удалена }

♡ Картинка пропала — ссылка не прямая, или src="" пустой

♡ Бегущая строка / галерея дёргается — две копии не совпадают

♡ Кнопки плеера не работают — отсутствует name="nxmp", или у двух треков открыт

♡ Аккордеон не переключается — у <details> потерян name= или </details>

09 / БУДЬТЕ ДОБРЫ

ПРАВИЛА КРЕДИТОВ

✔ Бесплатно использовать и редактировать в своём профиле. Вы можете удалить строку с кредитами.

✦ ✦ ✦

EPHEMERIS · ВОПРОСЫ? НАПИШИТЕ МНЕ!



Создано 24 окт.

Обновлено 25 окт.

Опубликован 24 окт.

  • Безлимитный
  • #css
  • #profilecss
  • #freecss
  • #ru1noustemplates
прокси разрешены

Опубликованные чаты