CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайтаТопики
grin3671
grin3671вCSS-club – настройка внешнего вида сайта
28
Шаблоны, код которых импортируется с помощью правила @import. Основная идея – упростить установку шаблона, избавиться от повторяющегося кода в настройках пользователей и необходимости обновлять его вручную. Авторам стилей все равно придётся их обновлять!

для разработчиков
Подробно про правило можно прочитать тут: webref.ru/css/import
Работа @import на Шикимори имеет свои особенности: подробнее. Из-за этих особенностей все шаблоны с @media рекомендуется делать с помощью @import!

Теги для шаблонов:
BBCode
— помимо CSS требуется BBCode.
Устарело
— неподдерживаемый шаблон.


Фиксированные размеры постеров
спойлер
Автор: grin3671grin3671
Фиксирует размеры всех постеров на сайте. Наконец-то ровное «Избранное» в профиле!


Установка:
/* Фиксированные размеры постеров */
@import url("https://css-club.web.app/css/fixed_cover.min.css");

Отображение истории в мобильной версии
спойлер
Автор: grin3671grin3671
Блок истории в мобильной версии с прокруткой записей.


Установка:
/* Отображение истории в мобильной версии */
@import url("https://gist.githubusercontent.com/grin3671/d994b47c010aabfd06cba7b9b1edcf03/raw/mobileHistory.css");

BBCode
Простая таблица
спойлер
Автор: grin3671grin3671


Установка:
@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
Стена постеров различных типов с произвольной надписью
спойлер
Автор: grin3671grin3671


Установка:
/* Стена постеров различных типов */
@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)
спойлер
Автор: kaurkaur

Изменение вида ачивок в профиле + отображение прогресса по ним + сортировка. Стиль для тех кто любит красоваться ачивками))
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);
}

Изменение блока «Администрация» в клубах
спойлер
267x199
Скопируйте код в настройки внешнего вида клуба:
/* Изменение блока «Администрация» */
@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";
}

Замена стандартных постеров
спойлер
Автор: grin3671grin3671

Замена стандартных постеров в списках и всплывающем окне.
/* Замена стандартных постеров */
@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");
}

Как это работает
@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");

BBCode
Плавающий блок ссылок в профиле
спойлер
269x397
Установка:
В настройки внешнего вида добавьте:
/* Блок внешних ссылок в профиле */
@import url("https://css-club.web.app/css/profile-external-links.css");
В описание профиля добавьте блок с классом mylinks и впишите ссылки как в следующем примере:
[div=mylinks]
[url=https://vk.com/shikimori]ВКонтакте[/url]
[url=https://t.me/s/shikimori]Telegram[/url]
[url=https://www.youtube.com/@shikimori_one]YouTube[/url]
[url=https://discord.gg/gYQNpUKPdH]Discord[/url]
[url=https://github.com/shikimori/shikimori]GitHub[/url]
[/div]
По умолчанию блок расположен справа, т.к. слева есть кнопки «сообщить об ошибке» и «наверх», которые могут перекрывать блок ссылок. Если вы всё же хотите расположить блок слева, то добавьте класс left к блоку ссылок, чтобы получилось [div=mylinks left].

Настройки:
/* Настройки */
:root {
  /* Расстояние от верхнего края страницы */
  --mylinks-top: 100px;
  /* Иконка по умолчанию для неподдерживаемых сайтов */
  --mylinks-icon: url("https://i.imgur.com/GIvsmxM.jpeg");
  /* Цвет фона */
  --mylinks-color-background: #f8f8f8;
  /* Цвет фона при наведении и границы */
  --mylinks-color-border: var(--headline-background-color);
  /* Цвет текста */
  --mylinks-color-text: #123;
}
Вы можете объединять эти настройки с настройками темы, а также убирать лишние строки, если дополнительных настроек не требуется. Указанные выше цвета подойдут для темы по умолчанию или любой другой светлой темы.

Дополнительно:
Если вы хотите добавить иконку к неподдерживаемому по умолчанию сайту, то можете написать grin3671grin3671. Если вы хотите сделать это только для себя или изменить существующие иконки, то используйте этот шаблон:
.mylinks > a[href*="ССЫЛКА_НА_САЙТ"] {
  --mylinks-icon: url("ССЫЛКА_НА_ИКОНКУ");
}

Если вы хотите изменить оформление, но стандартные настройки не позволяют этого сделать, то добавляйте правила в конец стиля. Вот некоторые примеры:
/* Блок ссылок всегда посередине экрана */
.mylinks {
  top: 50%;
  transform: translateY(-50%);
}
/* Затемнение иконок для тёмной темы */
.mylinks > a:not(:hover)::before {
  filter: grayscale(.8) brightness(.8);
}

P.S. Я не знаю, кто автор оригинального шаблона, но раз до сих пор его сюда не предложили выкладываю оригинальную интерпретацию без указания авторства.
Комментарии
Скрыть 8 комментариев
Показать 8 комментариев
Загрузить ещё 8 комментариев
borr
borr#
@Dilragon, Потому один скрипт отметил стили другого скрипта, поэтому испорчено.
@Dilragon
Dilragon
Dilragon#
@borr, И как это исправить?
@borr
borr
borr#
@Dilragon, либо убери код с прогресс баром, либо расположение ачивок )
@Dilragon
Dilragon
Dilragon#
@borr, Ах, спасибо. Сам не догадывался :hot: Теперь все работает)
Aлeкcaндрoвич
Aлeкcaндрoвич#
Замена стандартных постеров не работает. Я даже с примера скопировал коды и добавил в избранное Айрисвиль, но ничего не поменялось. Как так?
@grin3671
grin3671
grin3671#
@Aлeкcaндрoвич, закрывать правила надо:
.p-profiles-show .b-feedback:after {
  display: inline-block;
  position: fixed;
  width: 300px;
  height: 300px;
  right: 0px;
  bottom: 0px;
} /* Добавить эту скобку */

[href*="characters/503-"] {
  --show-default: 0;
  --custom-image: url(…);
}
@Aлeкcaндрoвич
Aлeкcaндрoвич
Aлeкcaндрoвич#
@grin3671, 720x1650720x1650всё равно не работает. Что не так делаю?
@grin3671
grin3671
grin3671#
@Aлeкcaндрoвич, зачем ты ещё одно правило .p-profiles-show .b-feedback:after добавил, так и не закрыв первое?
@Aлeкcaндрoвич
Aлeкcaндрoвич
Aлeкcaндрoвич#
@grin3671, всё, разобрался, получилось. Оказалось, что все просто, даже как-то стыдно за себя. Спасибо большое за помощь.
lolokoshka
lolokoshka#
Нужна помощь с ачивками. Я использую альтернативный вид достижений 
@import url(https://raw.githubusercontent.com/anorva/Shikimori/master/Import-files/Trophies.css);
И у меня возникла проблема с ачивками авторов. Пишет, что у меня 100 процентов по Миядзаки, но ачивка серая. И я так поняла, это связано с этим скриптом. Это можно как-то исправить?
@grin3671
grin3671
grin3671#
@lolokoshka,
#profiles_show .b-achievement[data-progress="100"]::before {
  opacity: 0;
}

Стили для «Нет достижений»
.p-profiles .profile-content .achievements .cc-2 {
  align-items: start;
}

.p-profiles .profile-content .achievements .cc-2 .c-column .b-nothing_here {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #424242;
  text-indent: 16px;
  grid-area: 1 / 1;
  background-color: rgba(0 0 0 / 8%);
  border-radius: 3px;
  transition: 160ms ease-in-out;
  cursor: var(--cursor-default, default);
}
.p-profiles .profile-content .achievements .cc-2 .c-column .b-nothing_here:hover {
  background-color: rgba(0 0 0 / 12%);
}

.p-profiles .profile-content .achievements .cc-2 .c-column .b-nothing_here::after {
  content: "";
  grid-area: 1 / 1;
  display: block;
  width: calc(100% - 1px);
  padding-top: 50%;
  background-color: rgba(17 17 17 / 60%);
  border-radius: 3px 0 0 3px;
}

.p-profiles .profile-content .achievements .header:has(+.b-nothing_here) {
  display: flex;
  position: relative;
  grid-area: 1 / 1;
  width: 50%;
  align-items: center;
  justify-content: center;
}

.p-profiles .profile-content .achievements .header:has(+.b-nothing_here) .title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(255 255 255 / 72%);
}
@lolokoshka
lolokoshka
lolokoshka#
@grin3671, большое спасибо:)
animeshnik_ALT
animeshnik_ALT#
Дополнение для «Замена стандартных постеров»
Замена стандартных постеров везде
Замена стандартных постеров на странице тайтла/персонажа, на мелких постерах и на странице редактирования.
569x488442x103742x396
Код должен выглядеть примерно так:
/* Замена стандартных постеров от grin3671*/
@import url(https://css-club.web.app/css/custom_posters.min.css);
/*Дополнение*/
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/Update-posters.css);
/*Аниме Наруто*/
[href*="animes/z20-"], [data-href*="animes/20/"], [srcset*="animes/20/"] {
  --show-default: 0 !important;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=5d695e7e6b50b9feb8c346fe7045bb6e_l-8221351-images-thumbs&n=13) !important;
}
/*Манга Ванпанчмен*/
[href*="mangas/z44347-"], [data-href*="mangas/44347/"], [srcset*="mangas/44347/"] {
  --show-default: 0 !important;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=82183d8defd70e14696a8805ebe52a86_l-4297369-images-thumbs&n=13) !important;
}
/*Персонаж Лелуш Ламперуж*/
[href*="characters/417-"], [srcset*="characters/417/"] {
  --show-default: 0 !important;
  --display-default-character: none !important;
  --display-character-image: flex !important;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=4656b4c21ce4042d1ca7d77d88605ae9_l-5208099-images-thumbs&ref=rim&n=13&w=2012&h=3000) !important;
}

Объяснение кода
Для этого, в дополнение к коду от /grin3671 импортируем данный файл 1 раз:
@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 свойства:
--display-default-character: none !important;  
--display-character-image: flex !important;
Первое отвечает за отображение стандартного постера на странице персонажа, а второе за отображение --custom-image. Не трогаем.
ВАЖНО! После каждого правила нужно прописать !important, иначе стандартное значение перекроет ваше! Это, скорей всего, мой косяк, но я не знаю как его починить:(
--custom-settings Поддерживаются, вроде.
@animeshnik_ALT, @animeshnik_ALT, @animeshnik_ALT, @animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@animeshnik_ALT, Для людей делаем то же, что и для персонажей, только меняем characters на people
@animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@animeshnik_ALT,
Добавляем постер в подсказку
Было: 666x392

Стало: 858x387

Для этого вставляем это:
/* Добавляем постер в подсказку */
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/add-poster-to-tooltip.css);
И всё. Если вы уже до этого сделали всё как надо, то код сработает.
*Создаём пустоту слева куда будем запихивать наш постер.* *Код работает только на странице профиля и избранного.*
@animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@animeshnik_ALT,
Улучшение кода
Поправил код. Теперь !important указывать не нужно.
Для аниме и манги в селекторе вместо srcset указываем src.
Селекторы персонажей, как и людей, остались неизменны.
Также content'ом добавил постеры ещё в парочку мест.
Если что-то забыл, пишите :).
P.S. морр недолюбливает читателей ранобэ, поэтому в ссылке href он указывает ranobe, а в остальных уже mangas. Не будем высокомерными и подчинимся его правилам.

Правильный код должен выглядеть так:
/* Замена стандартных постеров от grin3671 */
@import url(https://css-club.web.app/css/custom_posters.min.css);
/* Дополнение */
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/Update-posters.css);
/* Добавляем постер в подсказку */
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/add-poster-to-tooltip.css);
/* Аниме Наруто */
[href*="animes/z20-"], [data-href*="animes/20/"], [src*="animes/20/"] {
  --show-default: 0;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=5d695e7e6b50b9feb8c346fe7045bb6e_l-8221351-images-thumbs&n=13);
}
/* Манга Ванпанчмен */
[href*="mangas/z44347-"], [data-href*="mangas/44347/"], [src*="mangas/44347/"] {
  --show-default: 0;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=82183d8defd70e14696a8805ebe52a86_l-4297369-images-thumbs&n=13);
}
/* Персонаж Лелуш Ламперуж */
[href*="characters/417-"], [srcset*="characters/417/"] {
  --show-default: 0;
  --display-default-character: none;
  --display-character-image: flex;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=4656b4c21ce4042d1ca7d77d88605ae9_l-5208099-images-thumbs&ref=rim&n=13&w=2012&h=3000);
}
/* Человек Людвиг ван Бетховен */
[href*="people/9160-"], [srcset*="people/9160/"] {
  --show-default: 0;
  --display-default-character: none;
  --display-character-image: flex;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=103a6ef0fd0e6650720b6e47e5f45df0_l-5652956-images-thumbs&n=13);
}
/* Ранобэ Волчица и пряности */
[href*="ranobe/9115-"], [data-href*="mangas/9115/"], [src*="mangas/9115/"] {
  --show-default: 0;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=5d695e7e6b50b9feb8c346fe7045bb6e_l-8221351-images-thumbs&n=13);
}
@animeshnik_ALT, @Reverend
Reverend
Reverend#
@animeshnik_ALT, не знаешь как можно улучшить качество постеров в избранном, например вот тут йор и сатоми выглядят хорошо, а китагава пиксельно
399x235
@animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@Reverend, Единственный способ который я знаю это округление углов, но если это не помогает то видимо уже ничего не поделать(
Apc
Apc#
А чаво бенгальский огонь на курсор не навешивается? Слишком крупная гифка?
Хотя ладно, в мелком масштабе смотрится не оч.
ryoumu
ryoumu#
кто-то может подсказать как вернуть постеры персонажей, которые я заменил? они все слетели, когда я ничего не изменял и сейчас стоят обычные постеры... раньше все ок было, потом постеры исчезли вообще, сейчас постарался чето сделать, но вернулись не те, которые я делал :(
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode