@import
. Основная идея – упростить установку шаблона, избавиться от повторяющегося кода в настройках пользователей и необходимости обновлять его вручную. Авторам стилей все равно придётся их обновлять!для разработчиков
Подробно про правило можно прочитать тут: webref.ru/css/import
Работа
Теги для шаблонов:
Работа
@import
на Шикимори имеет свои особенности: подробнее. Из-за этих особенностей все шаблоны с @media
рекомендуется делать с помощью @import
!Теги для шаблонов:
BBCode
— помимо CSS требуется BBCode.
Устарело
— неподдерживаемый шаблон.
Фиксированные размеры постеров
спойлер
Автор: grin3671
Фиксирует размеры всех постеров на сайте. Наконец-то ровное «Избранное» в профиле!
Установка:
Фиксирует размеры всех постеров на сайте. Наконец-то ровное «Избранное» в профиле!
Установка:
/* Фиксированные размеры постеров */
@import url("https://css-club.web.app/css/fixed_cover.min.css");
Отображение истории в мобильной версии
спойлер
Автор: grin3671
Блок истории в мобильной версии с прокруткой записей.
Установка:
Блок истории в мобильной версии с прокруткой записей.
Установка:
/* Отображение истории в мобильной версии */
@import url("https://gist.githubusercontent.com/grin3671/d994b47c010aabfd06cba7b9b1edcf03/raw/mobileHistory.css");
BBCode
Простая таблица
спойлер
Автор: grin3671
Установка:
BBCode для клубов и раздела «Обо мне» в профиле:
Установка:
@import url("https://css-club.web.app/css/bs_table.min.css");
Использование:BBCode для клубов и раздела «Обо мне» в профиле:
[div=table --bordered --hover]
[div=header][div]
Header Cell 1
[/div][div]
Header Cell 2
[/div][div]
Header Cell 3
[/div][/div]
[div][div]
Table Cell 1
[/div][div]
Table Cell 2
[/div][div]
Table Cell 3
[/div][/div]
[/div]
Для контейнера таблицы можно использовать следующие вспомогательные классы:--striped
– делает таблицу-зебру, окрашивая чётные строки в более тёмный цвет.--bordered
– обрамляет каждую ячейку таблицы границей в 1px.--hover
– затемняет строки при наведении.--condensed
– уменьшает внутренние отступы ячеек в таблице.
xwrap
: [div=xwrap]
[div=table --bordered --hover]
# Внутренний код таблицы
[/div]
[/div]
BBCode
Стена постеров различных типов с произвольной надписью
спойлер
Автор: grin3671
Установка:
Чтобы добавить новый постер, необходимо внутрь контейнера
Также можно добавить блок текста, почти как в коллекциях:
Установка:
/* Стена постеров различных типов */
@import url("https://css-club.web.app/css/rate_module.min.css");
Использование:[div=rate_module cc-6]
[div=c-column][animes ids=2966 cover_notice=studio][b]93/100[/b][/div]
[div=c-column][mangas ids=36131][b]86/100[/b][/div]
[div=c-column][mangas ids=90125][b]91/100[/b][/div]
[div=c-column][mangas ids=9115][b]100/100[/b][/div]
[div=c-column][people ids=79][b]Ками-сама[/b][/div]
[div=c-column][characters ids=7373][b]Богиня ❤[/b][/div]
[/div]
Количество колонок указывается в контейнере rate_module
. Поддерживаются колонки от 6 (cc-6
) до 9 (cc-9
).Чтобы добавить новый постер, необходимо внутрь контейнера
rate_module
добавить новую строчку с кодом:[div=c-column][mangas ids=9115][b]100/100[/b][/div]
где[div=c-column][/div]
– обязательный контейнер, в котором расположены постер и надпись.[mangas ids=9115]
– код конкретного постера. Указывать можно только один id![b]100/100[/b]
– произвольная надпись.
Также можно добавить блок текста, почти как в коллекциях:
[div=c-column][mangas ids=9115][div=text]Произвольный текст[/div][b]100/100[/b][/div]
Если название у постера в две строчки, то добавляется еще один класс: [div=c-column][mangas ids=9115][div=text twolined]Произвольный текст[/div][b]100/100[/b][/div]
А класс user-defined
зафиксирует при клике текст в развернутом виде:[div=c-column]
[anime=40839][poster=1093957][/anime]
[div=text user-defined]Дата выхода: 28 ноября 2020[/div]
[b]Blu-ray Vol.1[/b]
[/div]
где[poster=1093957]
– любая картинка.[div=text user-defined][/div]
– произвольный текст, фиксирующийся при клике.[b]Blu-ray Vol.1[/b]
– произвольная надпись.
Прогрессбар и сортировка ачивок в профиле (обновлено 13.02.2024)
спойлер
Автор: kaur
Изменение вида ачивок в профиле + отображение прогресса по ним + сортировка. Стиль для тех кто любит красоваться ачивками))
UPD. Добавлены скругления прогрессбара и переменная отвечающая за их включение и выключение.
1183x1316
Изменение вида ачивок в профиле + отображение прогресса по ним + сортировка. Стиль для тех кто любит красоваться ачивками))
UPD. Добавлены скругления прогрессбара и переменная отвечающая за их включение и выключение.
1183x1316
/* Прогрессбар и сортировка ачивок в профиле */
@import url("https://raw.githubusercontent.com/kaurkaur/Shikimori/master/CSS/AchivmentStatusbarAndSort.css");
/* Настройки шаблона */
:root {
/*Переименовываем "достижения"*/
--achivment-rename: 'Ачивки';
/*отступ прогрессбара снизу*/
--achivment-progressbar-position-b: 6px;
/*отступ прогрессбара сбоку*/
--achivment-progressbar-position-lr: 8px;
/*высота прогрессбара*/
--achivment-progressbar-height: 3px;
/*толщина обводки прогрессбара*/
--achivment-progressbar-border: 1px;
/*отступ между достижениями*/
--achivment-margin: 1%;
/*сортировка ачивок: -1 - от больших к меньшим, 1 - от меньших к большим, 0 - без сортировки*/
--achivment-sort: -1;
/*цвет подложки прогрессбара*/
--achivment-progressbar-bg-color: #fff;
/*Скругления 1-вкл 0-выкл*/
--radius_switcher:1;
}
Изменение курсора
спойлер
Для создателей тем и шаблонов:
Чтобы ваша тема или шаблон были совместимы с этим шаблоном, указывайте в стилях при изменении курсора переменную со значением по умолчанию:
/* Изменение курсора */
@import url("https://css-club.web.app/css/custom_cursor.css");
:root {
/* Курсор по умолчанию */
--cursor-default: url("https://i.imgur.com/AN9K3mv.png");
/* Курсор при наведении */
--cursor-pointer: url("https://i.imgur.com/OI0Xs5l.png");
}
Для создателей тем и шаблонов:
Чтобы ваша тема или шаблон были совместимы с этим шаблоном, указывайте в стилях при изменении курсора переменную со значением по умолчанию:
.selector {
- cursor: default;
+ cursor: var(--cursor-default, default);
}
.selector:hover {
- cursor: pointer;
+ cursor: var(--cursor-pointer, pointer);
}
Изменение блока «Администрация» в клубах
спойлер
Скопируйте код в настройки внешнего вида клуба:
/* Изменение блока «Администрация» */
@import url("https://css-club.web.app/css/b-club-admins.min.css");
Настройки (необязательно): /* Изменение цветов */
:root {
--color-club-admin: #384654;
--color-club-admin-name: inherit;
--color-club-admin-hint: #7a7f85;
}
/* Добавление подписей */
.b-clubs-menu .admin .b-user[id="1"] .name::after {
content: "Admin";
}
Замена стандартных постеров
спойлер
Автор: grin3671
Замена стандартных постеров в списках и всплывающем окне.
Замена стандартных постеров в списках и всплывающем окне.
/* Замена стандартных постеров */
@import url("https://css-club.web.app/css/custom_posters.min.css");
/* Персонаж 1 — Illyasviel von Einzbern */
[href*="characters/503-"] {
--show-default: 0;
--custom-image: url("https://i.imgur.com/VECzLDom.jpg");
}
/* Персонаж 2 — Nino Nakano */
[href*="characters/161472-"] {
--show-default: 0;
--custom-image: url("https://i.imgur.com/Xx6UyQU.jpg");
}
Как это работает
Чтобы заменить постер персонажу нужно найти его ID в ссылке:
Свойство
В свойстве
Существует возможность изменить стандартные настройки отображения постера с помощью свойства
@import
-правило указывается один раз!Чтобы заменить постер персонажу нужно найти его ID в ссылке:
https://shikimori.one/characters/161472-nino-nakano
ID необходимо указать в селекторе. После него обязательно нужно оставить дефис, чтобы не заменить постер кому-то с похожим ID. Для аниме и манги нужно поменять слово characters на соответствующие им animes и mangas из ссылки.Свойство
--show-default
скрывает стандартный постер.В свойстве
--custom-image
указывается ссылка на новый постер.Существует возможность изменить стандартные настройки отображения постера с помощью свойства
--custom-settings
: /* Значение по умолчанию */
--custom-settings: center top / cover;
Настройка колонок в избранном
спойлер
Модуль позволяет настраивать количество колонок в избранном.
Установка:
Установка:
/* Модуль для настройки колонок в избранном */
@import url("https://css-club.web.app/css/favorites_grid.min.css");
Настройки:.p-profiles-show {
/* Отступы между колонками */
--favorites-gutters: 8px;
/* При разрешении <= 480px */
--favorites-columns-xs: 4;
/* При разрешении >= 481px */
--favorites-columns-sm: 6;
/* При разрешении >= 768px */
--favorites-columns-md: 8;
/* При разрешении >= 961px */
--favorites-columns-lg: 10;
/* При разрешении >= 1200px */
--favorites-columns-xl: 12;
}
Неиспользуемые/ненужные настройки можно убрать.Тёмное оформление кода в настройках
спойлер779x796 Меняет жёлтое поле с кодом стиля в настройках внешнего вида сайта на тёмно-синее. Более ярко выделяет ошибки в коде.
Установка:
Установка:
/* Тёмное оформление кода в настройках внешнего вида сайта */
@import url("https://css-club.web.app/css/CodeMirror_dark.css");
1287x352
А без него он выглядел так:
1263x325
Был бы благодарен за помощь! Заранее спасибо!
@borr@Dilragon, Потому один скрипт отметил стили другого скрипта, поэтому испорчено.@Dilragon@borr, И как это исправить?@borr@Dilragon, либо убери код с прогресс баром, либо расположение ачивок )@Dilragon@borr, Ах, спасибо. Сам не догадывался Теперь все работает)@grin3671@Aлeкcaндрoвич, закрывать правила надо:@Aлeкcaндрoвич@grin3671, 720x1650720x1650всё равно не работает. Что не так делаю?@grin3671@Aлeкcaндрoвич, зачем ты ещё одно правило.p-profiles-show .b-feedback:after
добавил, так и не закрыв первое?@Aлeкcaндрoвич@grin3671, всё, разобрался, получилось. Оказалось, что все просто, даже как-то стыдно за себя. Спасибо большое за помощь.И у меня возникла проблема с ачивками авторов. Пишет, что у меня 100 процентов по Миядзаки, но ачивка серая. И я так поняла, это связано с этим скриптом. Это можно как-то исправить?
@grin3671@lolokoshka,@lolokoshka@grin3671, большое спасибо569x488442x103742x396
Код должен выглядеть примерно так:
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/Update-posters.css);
Для аниме в селекторе ещё указываем
[data-href*="animes/20/"], [srcset*="animes/20/"]
ID БЕЗ тире и букв.Для манги в селекторе ещё указываем
[data-href*="mangas/44347/"], [srcset*="mangas/44347/"]
. ID Также без тире и букв.Персонажам в селекторе можно указать только
[srcset*="characters/417/"]
. Но зато им добавляются ещё 2 свойства:Первое отвечает за отображение стандартного постера на странице персонажа, а второе за отображение --custom-image. Не трогаем.
ВАЖНО! После каждого правила нужно прописать
!important
, иначе стандартное значение перекроет ваше! Это, скорей всего, мой косяк, но я не знаю как его починить--custom-settings
Поддерживаются, вроде.@animeshnik_ALT,@animeshnik_ALT,@animeshnik_ALT,@animeshnik_ALT@animeshnik_ALT, Для людей делаем то же, что и для персонажей, только меняемcharacters
наpeople
@animeshnik_ALT@animeshnik_ALT,Стало: 858x387
Для этого вставляем это:
И всё. Если вы уже до этого сделали всё как надо, то код сработает.
*Создаём пустоту слева куда будем запихивать наш постер.* *Код работает только на странице профиля и избранного.*
@animeshnik_ALT@animeshnik_ALT,!important
указывать не нужно.Для аниме и манги в селекторе вместо
srcset
указываемsrc
.Селекторы персонажей, как и людей, остались неизменны.
Также content'ом добавил постеры ещё в парочку мест.
Если что-то забыл, пишите .
P.S. морр недолюбливает читателей ранобэ, поэтому в ссылке
href
он указываетranobe
, а в остальных ужеmangas
. Не будем высокомерными и подчинимся его правилам.Правильный код должен выглядеть так:
@animeshnik_ALT,@Reverend@animeshnik_ALT, не знаешь как можно улучшить качество постеров в избранном, например вот тут йор и сатоми выглядят хорошо, а китагава пиксельно399x235
@animeshnik_ALT@Reverend, Единственный способ который я знаю это округление углов, но если это не помогает то видимо уже ничего не поделать(Хотя ладно, в мелком масштабе смотрится не оч.