Если вы не хотите заморачиваться с настройкой трёх цветов в сборщике, то можете скопировать этот код:
/* Основной файл темы */
@import url("https://shiki-theme.web.app/stable/main.css");
/* Шрифт Roboto */
@import url("https://shiki-theme.web.app/stable/font-roboto.css");
/* Стили обложки профиля */
@import url("https://shiki-theme.web.app/stable/profile-cover.css");
/* Изменения профиля #1 */
@import url("https://shiki-theme.web.app/stable/profile-update_1.css");
/* Тема «Стандартная светлая» */
@import url("https://shiki-theme.web.app/palette/light.css");
/* Настройки переменных темы */
@media {:root {
/* Обложка профиля */
--user-cover: url("https://i.imgur.com/j6TzpO5.jpg"); /* Пример */
/* Фон сайта */
--user-background: none;
}}
/* Моя обложка в профиле */
.p-profiles .profile-head::before {
display: block;
background-position: center 50%;
}
Важно: если вы отключаете чужие стили, то .p-profiles .profile-head::before надо заменить на .p-profiles .profile-head[data-user-id=2727]::before, где 2727 — ваш ID.
Я также рекомендую поставить следующие импорты, для большего удобства:
Доп. настройки
/* Компактный вид новостей в две колонки на больших экранах */
@import url("https://css-club.web.app/css/compact_news--grid.css");
/* Модуль для постеров */
@import url("https://css-club.web.app/css/rate_module.min.css");
/* Фиксированный размер обложек */
@import url("https://css-club.web.app/css/fixed_cover.min.css");
/* Тёмное оформление кода в настройках внешнего вида сайта */
@import url("https://css-club.web.app/css/CodeMirror_dark.css");
/* Оформление для нового WYSIWYG редактора */
@import url("https://shiki-theme.web.app/test/b-shiki_editor-v2.css");
Неправильно работает открытие поиска: открывается со второго клика, после закрытия окна поиска нажатием на фон. Почти починили — спасибо Virous!
Подменю (открывается не по клику, а при наведении).
Когда доступен поиск по странице, поиск плохо себя ведёт.
Жаль нельзя сделать настраиваемое кол-во иконок и легко поменять сам набор ссылок.
Это часть моей темы, на других темах не работает! Можете открыть ссылку в новой вкладке и пошариться в читабельном коде, чтобы что-нибудь украсть себе.
Как сделать прыгающий график активности и летающую аватарку?
Таких анимаций в этой теме нет и не будет. Подгонять тему под шаблоны тоже не буду. В списке готовых тем есть другие темы, которые больше подходят для анимаций или уже имеют их под капотом — выберите одну из них.
Как изменить цвета списков?
Никогда не настраивайте акцентирующий цвет в сборщике как цвет полосы манги! Полоса манги всего лишь использует акцентирующий цвет и может быть легко переписана одним правилом:
Переписывать все акцентирующие элементы было бы куда сложнее. Последние два цвета — это тот же --color-accent, но с двумя цифрами в конце (14) и (29), отвечающими за прозрачность при наведении и нажатии на ссылку «Список манги».
Полоса аниме меняется также просто, только вместо accent там используется primary-цвет. Ну, и в селекторе нужно заменить manga на anime.
Я всё же советую не менять цвет полосы аниме. А для подбора цвета для полосы манги использовать www.colorhexa.com.
Как изменить картинки для достижений?
В селекторе указывается часть ссылки на страницу достижения. Если необходимо изменить только определённый уровень, перед селектором указывается класс с уровнем .level-7. При необходимости уровни и ссылки можно посмотреть на странице всех достижений.
/* Жанровые / Пример «Историческое» (все уровни) */
[href*="genre/historical"] {
--replacement-image: url("https://i.imgur.com/tPfPOud.gif");
}
/* Общие / Пример «400 просмотренных аниме» (только 7-ой уровень) */
.level-7 [href*="common/animelist"] {
--replacement-image: url("https://i.imgur.com/tPfPOud.gif");
}
/* Франшизы / Пример «Sword Art Online» */
[href*="franchise/sword_art_online"] {
--replacement-image: url("https://i.imgur.com/tPfPOud.gif");
}
/* Авторы / Пример «Хаяо Миядзаки» */
[href*="author/hayao_miyazaki"] {
--replacement-image: url("https://i.imgur.com/tPfPOud.gif");
}
Не используйте для селекторов тег data-hint и любые другие теги, содержащие русские буквы и названия — они могут меняться, а пользователи английской версии сайта и вовсе не увидят ваших изменений картинок. Используйте только ссылки!
Как изменить аватарку на GIF'ку?
Селектор элемента, предназначенный в теме для псевдо-аватарки — .p-profiles .profile-head .c-brief .avatar::before. Реальную аватарку при этом нужно скрыть любым методом, кроме display: none:
Как сделать рамку/шапку или другое украшение аватарки?
Селектор элемента, предназначенный в теме для украшений аватарки — .p-profiles .profile-head .c-brief .avatar::after. Можно использовать любые свойства и анимации.
Для простых (готовых) вариантов рамок из Steam или HoYoLab не нужно использовать отдельный селектор: все css-переменные из соответствующих примеров можно поместить в /* настройки темы */, находящиеся сразу после @import-правил. Единственное, что рамки из стима обычно квадратные, поэтому закругление аватарки нужно убрать:
Шрифты можно найти на Goolge Fonts или похожих сайтах, которые предоставляют ссылки для импорта файлов (не скачивания!). На странице шрифта выберите пункт «Get Font», а затем «Get embed code». На странице «Embed code» во вкладке «Web» выберите пункт import и скопируйте часть кода, вроде такой:
Чуть ниже из всех правил нужно скопировать только название шрифта и фолбек вроде serif или sans-serif. Эти значения необходимо указать для свойств --font-main и --font-alt, чтобы заменить соответствующие шрифты на сайте:
На других сайтах будет другая последовательность действий, но необходимые данные останутся прежними: импорт шрифта на сайт, содержащий рабочую ссылку на шрифт (иначе вы увидите красную плашку ошибки импорта шрифта на Шикимори), а также название шрифта и, желательно, соответствующий шрифту фолбек. Эту информацию, помимо прочего, можно узнать, перейдя по ссылке для импорта и отыскав значение свойства font-family.
В примере указан шрифт, который выглядит так: 979x434
Чтобы заменить «стандартную светлую» на «Firewatch Night» замените light в названии файла на firewatch_night. В дополнительных палитрах есть предустановленные фоны и обложки, которые будут отображаться только при отсутствии параметров --user-cover и --user-background в разделе /* Настройки переменных темы */ в настройках внешнего вида сайта.
Если вы используете нестандартную палитру
Если вы используете нестандартную палитру, настроенную в сборщике, то можно 1) пересобрать тему; 2) удалить в разделе /* Настройки переменных темы */ в настройках внешнего вида сайта все свойства, связанные с цветами, а затем добавить код нужной палитры:
Чтобы настроить тёмную схему (включается в зависимости от настроек операционной системы или браузера), нужно добавить простой медиа-запрос со своими тёмными цветами к себе в стиль. К примеру:
Ваша схема по умолчанию будет работать как светлая схема вне зависимости от выбранных цветов, а цвета добавленные в медиа-запрос перезапишут цвета светлой схемы при включенной функции «Темная схема (Dark Mode)» на устройстве или в браузере. Помимо цветов можно менять и обложку и вообще все стили, хотя я бы не рекомендовал перегружать правила. Сами цвета я просто скопировал из тёмной схемы, но копировать абсолютно все цвета не обязательно — главное заменить цвета текстов и фонов — остальное уже по желанию.
Ещё раз ссылка на сборщик, если вы заблудились во вкладках: grin3671.github.io
Текущие ошибки и недоработки:
Полные настройки схемы недоступны. (Запрос на это есть от двух человек из более чем 2к+.)
Превью цвета не является кнопкой и недоступно для навигации с помощью Tab.
Нельзя добавить свой sass/scss/css к стилю. (Надо сделать как-нибудь.)
Изображения в FAQ'е мешают загрузке страницы.
Иконка ? слишком маленькая.
У кнопки открытия меню нет соответствующего label для accessibility.
ВКЛАДКИЭти вкладки можно встраивать друг в друга. Всегда указывайте уникальные идентификаторы в параметре data-switcher для каждого набора вкладок. Классы, написанные заглавными буквами можно удалить (вместе со знаком равно).
Класс --ripple добавляет эффект наведения на вкладку.
Класс --centered располагает горизонтальные вкладки по центру.
Виды u-tabs:
Класс --vertical делает вкладки вертикальными при @media (min-width: 960px). (класс --right перемещает боковые вкладки вправо)
Класс --anorva делает вкладки как у @anorva. При этом иконка таких табов будет отображаться на отдельной строке по середине.
Класс --akikawa делает вкладки похожими на вкладки Aki Kawa. При этом вместо границ табов будет использоваться фон, а активная вкладка будет слегка увеличена.
# Иконка в обычной кнопке
[div=b-button data-icon=monetization_on]Поддержать[/div]
# Иконка в кнопке переключения вкладок
[div data-tab-switch data-icon=palette]О моей теме[/div]
КАРУСЕЛЬ V2Вторая версия карусели с эффектом бесконечной прокрутки и определением размеров по первому слайду. Ширина определяется контейнером — пользуйтесь колонками из расширенного BBCode. Дорабатывается — пользуйтесь старой версией.
Я не использую GitHub для хранения скомпилированных файлов, т.к. отследить изменения в сжатых файлах там всё равно невозможно. Кроме того, ссылки на файлы получаются слишком длинными:
Надеюсь, бесплатного трафика хватит на обновления темы.
NOTE кросс-браузерность и пр.
В псевдоэлементах нельзя использовать em для font-size (по крайней мере перезапись значений), т.к. в IE9-11 перезапись не работает и происходит перемножение:
Сделано с помощью шаблона «Стена постеров различных типов с произвольной надписью».
[div=rate_module cc-6]
[div=c-column][animes ids=2966 cover_notice=studio][b]93/100[/b][/div]
[div=c-column][mangas ids=108407][b]83/100[/b][/div]
[div=c-column][mangas ids=61147][b]80/100[/b][/div]
[div=c-column][mangas ids=36131][b]86/100[/b][/div]
[div=c-column][animes ids=31478 cover_notice=studio][b]85/100[/b][/div]
[div=c-column][mangas ids=90125][b]91/100[/b][/div]
[div=c-column][animes ids=36064][b]FGO CMs[/b][/div]
[div=c-column][mangas ids=103851][b]86/100[/b][/div]
[div=c-column][mangas ids=9115][b]100/100[/b][/div]
[div=c-column][people ids=11622][b]3D-вайфу ❤[/b][/div]
[div=c-column][people ids=79][b]Ками-сама[/b][/div]
[div=c-column][characters ids=157442][b]Богиня ❤[/b][/div]
[div=c-column]
[anime=356][img no-zoom]https://cdn1.lockerdome.com/uploads/fe5127ea93668df6eb549d4b7b4707f60dddc50278f97499beebef7a10db5fc4_large[/img][/anime]
[div=text user-defined]Японский визуальный роман, разработанный компанией Type-Moon и выпущенный 30 января 2004 года на PC. Японский визуальный роман, разработанный компанией Type-Moon и выпущенный 30 января 2004 года на PC. Японский визуальный роман, разработанный компанией Type-Moon и выпущенный 30 января 2004 года на PC.[/div]
[b]Пример[/b]
[/div]
[div=c-column]
[anime=40839][poster=1093957][/anime]
[div=text user-defined]Дата выхода: 28 ноября 2020[br][url=https://www.amazon.co.jp/dp/B089W74QY7/]www.amazon.co.jp[/url][/div]
[b]Blu-ray Vol.1[/b]
[/div]
[/div]
Список добавленных на сайт персонажей в порядке рассмотрения модераторами от самых ранних к последним.
По поводу правок манги: 1) Чтобы «закрыть» мангу нужны даты окончания с официальным подтверждением или ссылки на японские новостные сайты вроде oricon или natalie, также подойдут ссылки на японскую вики. Вы сильно поможете, если найдёте такую информацию, прежде чем вносить правку. 2) Мы не указываем информацию по отдельности, заполняя где-то только графу «тома», где-то только «главы», а где-то только статус «завершено». Поля «статус» и «дата окончания», а также «тома» и «главы» всегда идут вместе. Вы также сильно упростите жизнь модераторам, если ознакомитесь с правилами и посчитаете количество глав в томах.
Вопрос по части модерации: Считается ли последняя глава основного сюжета концом сериализации или же публикующиеся позже экстра главы сдвигают дату завершения?
03-й том Extra: Onedari ga sugiru Koyuzu-chan 番外編 おねだりがすぎるこゆずちゃん 10-й том Limit Extra: Yoru no Yuuna-san, Kogarashi-san 限界番外編 夜の幽奈さん、コガラシさん 15-й том Extra: Yuragi-sou no Manna-san 番外編 ゆらぎ荘の漫奈さん (ミウラタダヒロ ✖ 漫☆画太郎) 16-й том Extra: Yuragi-sou no Yuuna-san tachi to Saotome Shimai!? 番外編 ゆらぎ荘の幽奈さん達と早乙女姉妹！？ (ミウラタダヒロ ✖ 山本亮平)
Virous!
979x434
Aki Kawa.
youtube
youtube
youtube
youtube
youtube
youtube
youtube
youtube
youtube
