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

КлубыCSS-club – настройка внешнего вида сайтаШаблоны, примеры и всякие фичи
Шаблоны с @import
Шаблоны, код которых импортируется с помощью правила @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. Я не знаю, кто автор оригинального шаблона, но раз до сих пор его сюда не предложили выкладываю оригинальную интерпретацию без указания авторства.
Комментарии
28
Скрыть 25 комментариев
Показать 25 комментариев
Загрузить ещё 10 из 25 комментариев
animeshnik_ALT
animeshnik_ALT#
@Reverend, Единственный способ который я знаю это округление углов, но если это не помогает то видимо уже ничего не поделать(
Apc
Apc#
А чаво бенгальский огонь на курсор не навешивается? Слишком крупная гифка?
Хотя ладно, в мелком масштабе смотрится не оч.
ryoumu
ryoumu#
кто-то может подсказать как вернуть постеры персонажей, которые я заменил? они все слетели, когда я ничего не изменял и сейчас стоят обычные постеры... раньше все ок было, потом постеры исчезли вообще, сейчас постарался чето сделать, но вернулись не те, которые я делал :(
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode