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

КлубыCSS-club – настройка внешнего вида сайта
Готовые стили
Готовые стили

[Информация о тегах] Чтобы понимать что вы устанавливаете:
  •  Только профиль 
    — данный стиль затрагивает только профиль.
  •  Есть @media-запросы 
    — в данном стиле используются @media-запросы.
    Использование @media-запросов отменяет удаление пользовательского стиля на экранах меньше 1024px, следовательно все правила будут затрагивать и мобильную версию, что может негативно повлиять на использование стиля на мобильном устройстве. У темы адаптированной под мобильные устройства будет следующий тег:
     Поддержка мобильной версии 

  •  Поддержка мобильной версии 
    — данный стиль адаптирован под мобильные экраны.
  •  Разные цветовые схемы 
    — тема настраиваемая или есть различные наборы цветовых схем.
  •  Автообновление 
    — основной код стиля загружается через @import. Когда автор вносит в тему изменения/исправления, они будут отображаться и у вас.
  • Темы без тегов
     Есть @media-запросы 
    и
     Поддержка мобильной версии 
    — работают по всему сайту, но мобильная версия в них останется без изменений.
[Как добавить свою тему] Пожалуйста, прочтите эту
  • Подберите теги, которые подходят вашей теме: если в вашей теме есть @media-запросы, но тема не адаптирована для мобильных устройств обязательно это укажите.
  • Подготовьте 2-4 скриншота темы (обычно это профиль, главная и страница тайтла): если поддерживается мобильная версия, её скриншот — обязательно! Придумайте название и описание для вашей темы сами, а то мы вам такого напишем.. :evil:
  • Опубликуйте код темы на github.com (предпочтительнее), pastebin.com или другом похожем ресурсе, т.к. в коде этой страницы и так полный бардак.
  • Готовый стиль — это комплексное изменение внешнего вида, направленное на улучшение внешнего вида и/или удобства пользования. Простенькие перекраски с вырвиглазными цветами или нечитабельными текстами игнорируются. :star:
  • Всё подготовили? – Пишите мне в лс.


Preserved Roses
Автор: last goodbyelast goodbye

1440x900
Установка
1. Скопируйте код стиля в настройки внешнего вида сайта и нажмите на кнопку «Сохранить».




shiki-theme
Автор: grin3671grin3671

Поддержка мобильной версии
Разные цветовые схемы
Автообновление

Скриншоты темы | Изменения в версиях
Тема в стиле Material Design 2014: много whitespace, увеличенные элементы и привычная для Android мобильная версия. Обложка в профиле, цвета меню, кнопок и ссылок, Светлая / Темная тема и прочее настраиваются с помощью понятных настроек в сборщике.

Установка
1. Настройте тему с помощью сборщика.
2. Нажмите на желтую кнопку с галочкой и дождитесь окончания сборки.
3. Скопируйте полученный код из раздела "Мой стиль" в свои настройки.

Дополнительно
Чтобы узнать свой ID скачайте аватарку: цифры в названии файла – ваш ID. @или так.
Об ошибках пишите автору или на гитхаб, а не в тему ошибок сайта!
Важно! Мобильные браузеры Opera Mini и UC Browser не поддерживаются!




Мини Страничка Пользователя
Автор: kaurkaur

Только профиль
(не адаптивный стиль)
[image=441787][image=441789 h=150][image=441788]
Ссылка на код: MiniProfilePage.css
для тех кто не ведет статистику манги:
Вконце файла необходимо раскомментировать часть кода:
/*Раскомментировать если отключена статистика манги
.p-profiles .b-stats_bar:first-child {
	border: 0;
	padding:0;
	width:100%;
}
.p-profiles .b-stats_bar a {
	display: block;
}
.b-stats_bar .stat_names{
	width: 100%;
}
.b-stats_bar .stat_names .stat_name {
	margin-right: 5px;
}
*/
чтобы код принял следующий вид:
.p-profiles .b-stats_bar:first-child {
	border: 0;
	padding:0;
	width:100%;
}
.p-profiles .b-stats_bar a {
	display: block;
}
.b-stats_bar .stat_names{
	width: 100%;
}
.b-stats_bar .stat_names .stat_name {
	margin-right: 5px;
}




Ренкомод
Автор: RenkoRenko

Кирпичи, выплывашки, розочки
1920x9831920x983
github.com/Vi0letcat/shiki
Последний коммит: 15.05.17
Лениво дописываемая тема, со значительно меньшим чем у Грина количеством изменений.
Основной идеей является разбиение сайта на блоки/карточки. Процесс этот пока не завершён, так что просьба присылать багрепорты в ЛС автору.
Верхнее меню зафиксировано и не улетает при прокрутке. Списки аниме и манги выезжают при наведении курсором на шапку профиля. Картинка слева масштабируется под размеры экрана.
Инструкция по установке, замене цветов и прочем там же на гитхабе. Вопросы тут же на шики в ЛС.




Edesign
Автор: EngiNierEngiNier

Поддержка мобильной версии
Разные цветовые схемы
Автообновление
Основа стилей - темные тона. Акцент сделан на закругление элементов и уход от острых углов.
Создавался стиль для сёрфинга по сайту в темных и ночных условиях. Причина создания - стандартная тема шики, лично для меня, слишком режит глаз. Есть несколько расцветок. Рабочая мобильная версия.
P.S. Всеми своим добытым знаниям благодарю данный "CSS-club". Особенная благодарность /Dark_zarich и /grin3671

Установка
Последнюю версию вы можете собрать в сборщике.
Сборщик, в целом, является копией сборщика от grin3671, за что ему отдельная благодарность.

Дополнительно
Помощь по стилю, FAQ, баг-трекер, а также адаптированные шаблоны: E-club




by Dolose
Автор: DoloseDolose

Есть @media-запросы

Чтобы иметь более полное представление о теме, загляните в профиль автора.
Писал тему сам, но некоторые функции взял у @Dark_zarich и @Jskoo, за что им отдельное спасибо!
Большая часть анимирована и некоторые элементы меняются при наведении.
Вот ссылка drive.google.com/open?id=0B25TKcruyABibFhTNDlmZ0ZRNWs




Круглая Страничка Пользователя
Автор: kaurkaur

Только профиль
(не адаптивный стиль)
1366x768
Ссылка на код: CircleProfilePage.css
Стиль из "недоделок", отдается на растерзание пользователей) Для настройки анимации статистики сообщений отзывов и т.п. необходимы определенные познания в анимации.




SHIKI.SYS
Автор: VIadVIad

Поддержка мобильной версии
1366x1205 1366x768 1366x768
Эта тема отправит шики прямиком в эру DOS. Синий фон, пиксельные шрифты, вырвиглазные цвета уже включены в поставку) На удивление после таких кардинальных (на самом деле нет, просто смена цветов и шрифтов) изменений, сайтом можно продолжать пользоваться. Почувствуй себя крутым хацкером, который в перерыве между взломом пентагона и DDOS атакой на банк решил посетить шики для получения ежедневной дозы аниме контента).

Установка
Скопировать содержимое shiki.sys.css в стили сайта и нажмите сохранить.
Все, отправляйтесь смотреть/оценивать/комментировать аниме/мангу/ранобэ.

Feedback
Предупреждаю сразу: писалось just for fun, на качество стиль не претендует. Об ошибках, недоработках пишите в ЛС на шики, а лучше сразу открывайте issue на ГХ.




Miku theme
Автор: KleіnKleіn

Поддержка мобильной версии
Разные цветовые схемы
Есть @media-запросы
Возможность сохранять настройки

Тема писалась лично и будет дальше улучшаться, по мере нахождения ошибок. Использован шрифт Roboto, иконки Font Awesome. Есть поддержка мобильных устройств. Возможны настройки.

Установка
1. Перейти на (ссылка сайт) для настройки темы.
  • Примечание: сайт может открываться с задержкой первый раз, это лимиты на использование бесплатных ресурсов.
2. Настроить необходимые свойства.
3. Нажать на кнопку сгенерировать, после чего полученный код, скопировать полностью и вставить в настройках профиля.



Night Lilac
Автор: AreysAreys

Тема предназначена для комфортного использования в темное время суток.
Тема в данном варианте не поддерживает мобильные устройства.

Установка
Код стиля: raw.githubusercontent.com




shi.Modern
Автор: Keeper YuKeeper Yu

Есть @media-запросы
Разные цветовые схемы
1280x1024 1280x1024 1280x1024 1920x939 1920x937 1920x937
Тема для ПК версии Shikimori, в основе которой лежит отображение блоками, а также свободно изменяемая цветовая схема: один основной цвет, по умолчанию зелёный, и два дополнительных, чаще всего играющих роль цвета на наведённую и нажатую ссылку. В профиле вас ждёт большая и качественная псевдоаватарка.

Установка
1. Скопируйте из репозитория темы код интересующей версии: обычной или тёмной (_dark).
2. Установите максимальную ширину сайта в 1000 пикселей.
3. Наслаждайтесь.

Дополнительно
Все настройки темы в самом вверху кода.
Если нашли ошибки, хотите оставить предложение по теме или просто интересуют подробности по настройке, то обращайтесь в клуб темы.




shiki-exo
Автор: SergejVolkovSergejVolkov

Разные цветовые схемы
Поддержка мобильной версии
Автообновление

В основе дизайна лежит разбиение страницы на плитки. Тема имеет полноценную удобную мобильную версию и автообновляется через GitHub, а это значит, что найденные баги будут автоматически исправляться у всех пользователей. Тема содержит много готовых цветовых схем, но вы можете создавать свои собственные уникальные схемы (инструкция). Особую благодарность хочется выразить @Keeper Yu за концепцию блочного дизайна.

Установка
Ссылка на скачивание темы. Скопируйте содержимое файла (он содержит подробные инструкции) к себе на сайт в раздел «Настройки» → «Внешний вид сайта».

Дополнительно
Обсудить тему и найти детальные инструкции вы можете в клубе темы.




Shiki Light
Автор: Soul-penetrating 汚れSoul-penetrating 汚れ

Поддержка мобильной версии
Автообновление
1657x907 1659x913 1659x923 372x656
Редизайн стандартной темы Шикимори.

Установка
Скопируйте строчку кода в редактор стиля в настройках внешнего вида сайта и нажмите кнопку «Сохранить».
@import url("https://raw.githubusercontent.com/Kotiaa/shiki-light/master/shiki-light-theme.css");
Дополнительно
По поводу ошибок отображения стиля пишите в лс.




Shikimori-GMK2
Автор: IO.MisanthropeIO.Misanthrope

Есть @media-запросы
Автообновление
1918x979 1918x979 1918x979
Описание
В этом стиле устранено большинство недочётов, которые присутствуют в оригинальном оформлении Шикимори. Сайт становится более «отзывчивым» и приятным для глаз.

Установка
1. Скопировать код
@import url("https://raw.githubusercontent.com/GeliosMK2/Shikimori-GMK2/master/css/main.css");
2. Вставить в настройках профиля и нажать «Сохранить».

Дополнительно
О багах, неудобных элементах стиля или о своих идеях писать мне в ЛС.



Тёмная тема by DedonychDedonych

Поддержка мобильной версии
Автообновление
Адаптация цветовой схемы (праздники)

Установка
@import url("https://raw.githubusercontent.com/Dedonych/Shikimori-Dark-Theme/master/shikimori_dark.css");
Дополнительно
Обратите внимание, что по умолчанию цветовая схема может автоматически измениться в праздничные дни: к примеру, в новый год она становится более красной. Чтобы отключить такое поведение (и настроить другие параметры), прочитайте про переменные для настройки темы на гитхабе (Dedonych/Shikimori-Dark-Theme) или на странице настроек внешнего вида сайта (Настройки → Внешний вид сайта) после установки темы.



shiki-moonlight
Автор: VanTyanVanTyan

Поддержка мобильной версии
Автообновление

Описание:
Светлая тема, кардинально не меняющая стандартный стиль.
Есть возможность менять надписи к оценкам (можно подключить и к другим темам).
Некоторые идеи позаимствовал у grin3671 и EngiNier.
Буду рад отзывам.

Установка:
@import url("https://raw.githubusercontent.com/vankad24/shiki-moonlight/master/styles/style.css");
Более подробная инструкция на github: github.com/vankad24/shiki-moonlight



♡
Автор: щ а с у к у ш ущ а с у к у ш у

Поддержка мобильной версии
Автообновление
1359x633 1359x637 720x1376

Установка:
Установка стиля: Настройки > Внешний вид сайта > Вставить эту строчку
@import url("https://raw.githubusercontent.com/iloveyuuko/ilove/main/iloveyuuko.css");

Дополнительно:
Для изменения названия «Избранного» на любое другое, вставьте это:
@media all { :root {
  --profile-favorites-title: "Избранное"; /* внутри кавычек пишите свое название */
}}



Profile RE:Classiс
Автор: TeaseekTeaseek

Только профиль
Поддержка мобильной версии
Есть @media-запросы
Автообновление
1920x1080 1920x1080 513x1079

Установка:
Вставьте этот код в поле для пользовательских стилей профиля:
@import url("https://raw.githubusercontent.com/Teaseek/website-theme/main/style/css/style.min.css");

Дополнительно:
Если вы хотите установить обложку в профиле, то необходимо добавить этот стиль тоже.
@media {
  .p-profiles .profile-head[data-user-id="227956"] .c-brief .head::after {
    background-image: url('https://shikimori.one/assets/achievements/anime/animelist_6.jpg');
    background-position-x: 0%;
    background-position-y: 10%;
  }
}
Цифры 227956 вам необходимо заменить на свой ID. Свой ID можно узнать через скачивание своей аватарки (цифры в названии скаченного файла).

Исходный код: github.com/Teaseek/website-theme
Обратная связь:
TeaseekTeaseek
Если у вас есть вопросы, отзывы или вы нашли ошибку — пишите мне в личные сообщения, всегда рад обратной связи!



АРХИВ
Темы, которые давно не обновлялись и содержат значительное количество ошибок.

Тёплая тема (Asobu)
Поддержка мобильной версии
1903x1007 720x1232
Ссылка на код стиля в профиле автора в блоке «Обо мне» + «холодная» версия темы выполненная в синих тонах.

Автор: AsobuAsobu

Steam ver (grin3671)
Только профиль
Страничка профиля в стиле cообществa Steam

Скопируйте код отсюда: grin3671/steam-theme (Настройки в конце файла).
Последние обновление: 2018-04-20
Чтобы поставить стандартный фон (первый скриншот), просто удалите правило с настройкой фона в конце стиля, ну, или замените ссылку на свою картинку. Друзья/клубы заполняются вручную для тех кому не лень (не забудьте указать свой ID).

Автор: grin3671grin3671

Заброшенное:
/comments/8905831
/comments/10850468
Комментарии
628
Скрыть 625 комментариев
Показать 625 комментариев
Загрузить ещё 10 из 625 комментариев
Kondrateandr
Kondrateandr#
@ukwn, это не тот код с прогресс-баром для франшиз и зелёной обводкой по краям?
@ukwn
ukwn
ukwn#
@Kondrateandr, Собрал в конструкторе, там в статье есть. Только цвета нужные выбрал и все
Jigen~
Jigen~#
большое спасибо автору @grin3671 за shiki-theme! без труда собрал себе темную тему и не пришлось тратить время на написание стиля вручную
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode