4 месяца и 2 недели
Время за аниме и мангой
1 неделя
1 месяц
3 месяца
6 месяцев
1 год
Активность на сайте
Общие
Жанровые
Франшизы
6 / 230
Обо мне
О моей теме
Коллекция тем
Ночная тема
Cборщик
Вкладки (табы)
Иконки
Карусель
Заметки
Сборщик с упрощённым подбором цветов: grin3671.github.io

Если вы не хотите заморачиваться с настройкой трёх цветов, то можете скопировать этот код:
Код темы
/* Основной файл темы */
@import url(https://shiki-theme.web.app/import/main.css);
/* Шрифт Roboto */
@import url(https://shiki-theme.web.app/import/font-roboto.css);
/* Стили обложки профиля */
@import url(https://shiki-theme.web.app/import/profile-cover.css);
/* Материальные поля ввода */
@import url(https://shiki-theme.web.app/import/md-textfields.css);
/* Изменения профиля v1.0 */
@import url(https://shiki-theme.web.app/import/profile-update.1.css);
/* Изменения профиля v1.1 (дополнение к v1.0) */
@import url(https://shiki-theme.web.app/import/profile-update.1.1.css);
/* Светлая тема */
@import url(https://shiki-theme.web.app/import/theme-light.css);

/* Настройки переменных темы */
@media {:root {
  /* Обложка профиля */
  --user-cover: url(https://i.imgur.com/A9fsHnT.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);
Подробнее о них написано тут: /CSS-Клуб/Импортируемые-шаблоны



Частые вопросы

Как вернуть английскую надпись «Шикимори» в меню?
/* Замена логотипа в меню */
.l-top_menu-v2 .logo-container::after {
  content: 'Shikimori';
}
Или совсем вернуть стандартный логотип (не советую, т.к. это страшно):
/* Замена логотипа в меню */
.l-top_menu-v2 .logo-container .logo {
  display: block;
}
.l-top_menu-v2 .logo-container::after {
  display: none;
}
Как вернуть старые полоски аниме и манги?
Настройте размер по вкусу:
/* Размеры полосок аниме/манги */
.p-profiles-show .b-stats_bar .bar {
  border-radius: 2px; /* Закругление углов (Сейчас: 4px) */
  font-size: 14px; /* Размер цифр (Сейчас: 0) */
  line-height: 20px; /* Высота полосок (Сейчас: 8px) */
}
Какие картинки лучше всего использовать для обложки?
С соотношением сторон 16:9 — в любом другом случае у вас будет немного обрезаться картинка по краям на мобильном экране.
Как сделать такое же боковое меню?
Ставьте на свой страх и риск:
/* Боковое меню */
@import url(https://shiki-theme.web.app/import/test/l-side_menu.css);
Что не так:
  • Неправильно работает открытие поиска: открывается со второго клика, после закрытия окна поиска нажатием на фон. Почти починили — спасибо VirousVirous!
  • Подменю (открывается не по клику, а при наведении).
  • Когда доступен поиск по странице, поиск плохо себя ведёт.
  • Жаль нельзя сделать настраиваемое кол-во иконок и легко поменять сам набор ссылок. :very sad2:
Это часть моей темы, на других темах не работает! Можете открыть ссылку в новой вкладке и пошариться в читабельном коде, чтобы что-нибудь украсть себе.
Как сделать прыгающий график активности и летающую аватарку?
Таких анимаций в этой теме нет и не будет. Подгонять тему под шаблоны тоже не буду. В списке готовых тем есть другие темы, которые больше подходят для анимаций или уже имеют их под капотом — выберите одну из них.
Как изменить цвета списков?
Никогда не настраивайте акцентирующий цвет в сборщике как цвет полосы манги! Полоса манги всего лишь использует акцентирующий цвет и может быть легко переписана одним правилом:
.b-stats_bar.manga {
  --color-accent: #80a3bf;
  --color-accent-reduced: #4b6377;
  --color-overlay-accent-hovered: #80a3bf14;
  --color-overlay-accent-pressed: #80a3bf29;
}
Переписывать все акцентирующие элементы было бы куда сложнее. Последние два цвета — это тот же --color-accent, но с двумя цифрами в конце (14) и (29), отвечающими за прозрачность при наведении и нажатии на ссылку «Список манги».

Полоса аниме меняется также просто, только вместо accent там используется primary-цвет. Ну, и в селекторе нужно заменить manga на anime.

Я всё же советую не менять цвет полосы аниме. А для подбора цвета для полосы манги использовать www.colorhexa.com.

Хотите спросить еще что-то — пишите в личку!



Для заинтересованных:
  • Обновления темы: /commits
  • Ветки разработки: /branches
  • Известные ошибки и планируемые улучшения: /issues
  • Яндекс.Деньги: 41001258665103





Обо мне
Модуль для постеров
Персонажи
Модерация
Постеры
Список добавленных на сайт персонажей в порядке рассмотрения модераторами от самых ранних к последним.

Манга


Скрыть 795 комментариев
Показать 795 комментариев
Загрузить ещё 10 из 795 комментариев
despair.all.the.time
despair.all.the.time#
Спасибо что ты есть <3
Baptista
Baptista#
Благодарочка этому человеку:star:
overflowereed
overflowereed#
блин а можешь скинуть код твоей темы шики? очень нравится..
grin3671
grin3671#
@overflowereed,
спойлер
/* Основной файл */
@import url(https://shiki-theme.web.app/import/main.css);
/* Стили обложки профиля */
@import url(https://shiki-theme.web.app/import/profile-cover.css);
/* Шрифт Roboto */
@import url(https://shiki-theme.web.app/import/font-roboto.css);
/* Материальные поля ввода */
@import url(https://shiki-theme.web.app/import/md-textfields.css);
/* Изменения профиля v1.0 */
@import url(https://shiki-theme.web.app/import/profile-update.1.css);
/* Светлая тема */
@import url(https://shiki-theme.web.app/import/theme-light.css);

/* Настройки переменных темы */
@media (prefers-color-scheme: dark) {:root {
  /* Цвета текстов */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #b3b3b3;
  --color-text-hint: #929292;
  --color-text-disabled: #6c6c6c;
  --color-overlay-text-hovered: rgba(224, 224, 224, 0.04);
  --color-overlay-text-selected: rgba(224, 224, 224, 0.08);
  --color-overlay-text-pressed: rgba(224, 224, 224, 0.12);
  /* Цвет ссылок */
  --color-link: #3ea6ff;
  --color-link-hover: #50a2e9;
  --color-link-active: #3f86c4;
  /* Основной цвет */
  --color-primary: #f2f2f2;
  --color-text-on-primary: #1f1f1f;
  --color-primary-reduced: #b3b3b3;
  --color-primary-hovered: #f3f3f3;
  --color-primary-pressed: #e8e8e8;
  --color-overlay-primary-hovered: rgba(242, 242, 242, 0.08);
  --color-overlay-primary-selected: rgba(242, 242, 242, 0.12);
  --color-overlay-primary-pressed: rgba(242, 242, 242, 0.16);
  /* Акцентирующий цвет */
  --color-accent: #3ea6ff;
  --color-text-on-accent: #081621;
  --color-accent-reduced: #327dbd;
  --color-accent-fade: #275984;
  --color-overlay-accent-hovered: rgba(62, 166, 255, 0.08);
  --color-overlay-accent-selected: rgba(62, 166, 255, 0.12);
  --color-overlay-accent-pressed: rgba(62, 166, 255, 0.16);
  /* Фоновые цвета */
  --color-background: #121212;
  --color-background-translucent: rgba(18, 18, 18, 0.9);
  --color-background-dialog: #1f1f1f;
  --color-surface: #1c1c1c;
  --color-surface-hover: #2e2e2e;
  --color-surface-active: #373737;
  --color-border: #2e2e2e;
  /* Цвета верхнего меню */
  --color-menu-background: #242424;
  --color-menu-background-fade: rgba(36, 36, 36, 0.48);
  --color-menu-text-primary: #e3e3e3;
  --color-menu-text-disabled: #777777;
  --color-menu-icon: #cacaca;
  --color-menu-search: #3e3e3e;
  --color-menu-search-fade: rgba(227, 227, 227, 0.12);
  --color-menu-background-hover: #363636;
  --color-menu-background-active: #3e3e3e;
  /* Цвета кнопок списков */
  --color-planned: #32515e;
  --color-onhold: #3f3f3f;
  --color-watching: #2a414b;
  --color-rewatching: #2a414b;
  --color-completed: #3d462c;
  --color-dropped: #472221;
  
  --user-cover: url(https://i.imgur.com/o0XChqG.png);
}

.b-stats_bar.manga {
  --color-accent: #f2f2f2;
  --color-accent-reduced: #b3b3b3;
  --color-overlay-accent-hovered: rgba(242, 242, 242, 0.08);
  --color-overlay-accent-pressed: rgba(242, 242, 242, 0.16);
}}

/* Моя обложка в профиле */
.p-profiles .profile-head::before {
  display: block; /* Отображение обложки */
  background-image: var(--user-cover); /* Моя обложка */
  background-position: center 10%;
}



/* Всякие импорты */
@import url(https://css-club.web.app/css/td_spoiler.min.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/compact_news--grid.css);



/* Тесты */
@import url(https://shiki-theme.web.app/import/test/b-shiki_editor-smileys.css);
@import url(https://shiki-theme.web.app/import/test/l-side_menu.css);
@media (min-width: 1264px) {
  body::-webkit-scrollbar-thumb {
    --color-menu-background: #9e9e9e;
  }
  .l-top_menu-v2 .logo-container::before {
    display: none;
  }
  .l-top_menu-v2 .logo-container .glyph {
    display: block;
    width: 64px;
    height: 56px;
    margin: 0;
    background-position: center;
    background-size: 32px;
  }
}
overflowereed
overflowereed#
@grin3671, much love :love2:
Amadeus
Amadeus#
Спасибо за создание отличной темы :з
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть