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

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

[Информация о тегах] Чтобы понимать что вы устанавливаете:
  •  Только профиль 
    — данный стиль затрагивает только профиль.
  •  Есть @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: "Избранное"; /* внутри кавычек пишите свое название */
}}



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

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

Автор: AsobuAsobu

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

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

Автор: grin3671grin3671

Заброшенное:
/comments/8905831
/comments/10850468
Комментарии
Скрыть 564 комментария
Показать 564 комментария
Загрузить ещё 20 из 564 комментариев
Dedonych
Dedonych#
Хотя я и не адаптировал только под профиль, но.... смотрится прикольно ( хотя и чуствуется что сайт уже не тот )
1439x900
grin3671
grin3671#
@Dedonych, да, действительно интересно выглядит. Хотя не сразу понятно, что там что-то еще есть, может что-то с маргинами можно сделать, чтобы края соседней карточки были видны, хотя и так тоже всё отлично рабоатет.

Мои идеи закончились на таком виде карточек, многие элементы не трогал вовсе:
1184x839
Думаю, надо каждую блок/карточку сделать отдельным импортом, чтобы можно было менять вид, сменив соответствующий импорт в настройках.
@Dedonych
Dedonych
Dedonych#
@grin3671, скорее всего padding добавить просто к карточкам. Но выглядит интересно
N1kk
N1kk#
Нашел одну готовую тему, но хотелось бы сделать в ней стандартный шрифт? Можно как-то?
@grin3671
grin3671
grin3671#
@N1kk, зависит от темы, но обычно достаточно переназначить переменные:
body {
  --font-main: Helvetica Neue, Arial, Verdana, sans-serif;
  --font-alt: Open Sans, Helvetica Neue, Arial, Verdana, sans-serif;
}
Irisel
Irisel#
Подскажите, пожалуйста, как сделать округлые рамки?
@grin3671, @Dedonych
Dedonych
Dedonych#
@Irisel, рамки чего? border-radius: 12px (12px - насколько хочешь закруглить.)
Если квадратный размер и хочешь в круг - 50%
@Irisel, @Асфиксия
Irisel
Irisel#
@Dedonych, спасибо
Асфиксия
Асфиксия#
@Dedonych, Привет, если не трудно можешь подсказать? 1223x946 как изменить тут цвет?
@Dedonych
Dedonych
Dedonych#
@Асфиксия, тут?)) Если белый фон - .l-page { background: /* цвет фона */ }
@Асфиксия
Асфиксия
Асфиксия#
@Dedonych, спксибо, только не белый а розовый нужнен, ну розовый я найду, вот еще вопрос цвет фота вводить через # например #f03f11 или же через rgb и т.д заранее спасибо
@Dedonych
Dedonych
Dedonych#
@Асфиксия, как хочешь. hex, rgb, хоть цвета радуги через градиент)
@Асфиксия
Асфиксия
Асфиксия#
@Dedonych, окей, спасибо :love2:
Mask_RF
Mask_RF#
а как можно украсть тему с чужого профиля? /wheremyfiji такую хочу
@nikola2222, @Ладащка, @Exidnn
nikola2222
nikola2222#
@Mask_RF, воровать это плохо
fujiyamasacai
fujiyamasacai#
как сделать такое же избранное?
/Emlona
Ладащка
Ладащка#
@Mask_RF, я думаю только если попросить владельца поделиться
Ладащка
Ладащка#
помогите, пожалуйста
я вязала тему у IO.Misanthrope и в ней скрыта история
можно ли как-то заменить картинку, которая цензурит или в целом её убрать?
@grin3671
Exidnn
Exidnn#
@Mask_RF, А как у тебя украсть?
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode