Как красиво оформить профиль на shikimori
Перейти к содержимому

Как красиво оформить профиль на shikimori

  • автор:

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

Текст почти полностью взят из аналогичного поста от уважаемого @ Narso , с небольшими изменениями.

Как вы уже могли заметить, возможность редактировать css личной страницы сайта, не всегда лучшим образом отражается на странице некоторых пользователей. Это не личный взгляд автора статьи, скорее нарушение простых правил оформления и дизайна большинством пользователей, которые сразу же побежали менять цвета и шрифты как душе угодно. Не каждому человеку, что может зайти к Вам на страницу, может прийтись по вкусу чрезмерно броский дизайн, а посему я хотел бы дать несколько советов, которые могут помочь вам этого избежать. Всё описанное ниже — всего лишь рекомендации, ничего более, но они могут помочь вам не ударить в грязь лицом при оформлении вашего профиля.

1. Диссонанс в дизайне сайта и вашей страницы.
Старайтесь избегать слишком сильных различий вашего дизайна с дизайном сайта.
Используйте картинки с белым, а ещё лучше прозрачным фоном, не уходите слишком далеко от стандартных цветов сайта, не меняйте цвет каждого элемента страницы просто «для красоты». Это может стать очень серьёзным отталкивающим фактором для посетителей страницы. Базовый фон сайта — белый. Центральная область либо белая, либо серая. Всё остальное пользователи сайта используют гораздо реже. Верхняя панель — чёрная. Если при переходе на вашу страницу, кто-то увидит жёлтый фон и синюю панель, то с большей вероятностью, это кто-то просто убежит подальше и никогда не вернётся. Не слишком сильное изменение цветов вполне допустимо и даже может оказаться приятно глазу, но не перестарайтесь с этим.

2. Фоновые картинки.
Не делайте центральную область прозрачной. Если очень хотите засветить свою фоновую картинку, то ставьте прозрачность как можно меньше. Центральная область и сделана для того чтобы фоновая картинка не мешала чтению. Если на вашей странице яркая картинка на фоне и центральная область прозрачная, то текст станет просто нечитабельным, даже если прозрачность минимальная. Более того, фоновая картинка может очень плохо сочетаться с постерами и изображениями из «избранного» в вашем профиле, поэтому лучше воздержитесь от использования прозрачности центральной области.
Красными линиями выделен текст, который невозможно разобрать из-за слишком высокой прозрачности фоновой картинки.
1301×533

3. Шрифты.
Не стоит использовать необычные шрифты для оформления своей страницы, их слишком тяжело воспринимать после основного шрифта сайта. Они созданы для оформления всяческих шапок/постеров/аватарок, но никак не для основного текста. Не стоит прибегать к курсивным/жирным/рукописным шрифтам. Привычные шрифты, по типу Arial, Times New Roman и всё, что на них похоже намного проще воспринимается пользователем.
Пример рукописного шрифта, который тяжело воспринимать, если этот шрифт используется как основной.
1334×284

4. Масштабируемость.
Это касается и объектов, и картинок. Не забывайте, что не все могут видеть ваш профиль так же, как и вы всё из-за разницы в разрешениях.
Будьте осторожны. Из-за подобного сдвига весь профиль может выглядеть совсем не так, как вы задумывали.
1299×386

5. Размер текста и объектов.
Увеличение всего, что есть на вашей странице, в том числе и шрифта, создаст ад для глаз пользователей с низким разрешением экрана, в том числе и пользователей большинства ноутбуков. Если знать меру в увеличении объектов, то ни к чему плохому это не приведёт, но вот разница в размерах текста слишком сильно ощущается при просмотре страницы.

6. Цвет текста.
В большинстве случаев, грамотное использование цветов приятно скажется на восприятии, но не перестарайтесь. Если использовать слишком много разных цветов, особенно ярких, то текст на вашей странице станет совершенно нечитабельным. К тому же эти цвета далеко не всегда будут сочетаться с вашим фоном.
1292×624

7. Курсор.
Если у вас прямо-таки жгучее желание поменять курсор со скучного и стандартного на более оригинальный, то пожалуйста, будьте сдержаннее.
Слишком большие и чрезмерно отличающиеся от стандартной «стрелочки» курсоры удивят лишь на секунду, а затем начнётся негодование из-за неудобства пользованием.
Красиво, но размер слишком велик. Более того, таким курсором немного тяжелее управлять с непривычки.
1260×400

8. Gif-анимации.
Будьте осторожны с их использованием, чрезмерно активная «гифка» может здорово помешать восприятию вашего профиля, а так же может подлагивать на слабых компьютерах и съедать трафик у тех, для кого он ограничен.

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

Использование @media-запросов отменяет удаление пользовательского стиля на экранах меньше 1024px, следовательно все правила будут затрагивать и мобильную версию, что может негативно повлиять на использование стиля на мобильном устройстве. У темы адаптированной под мобильные устройства будет следующий тег:

Поддержка мобильной версии
Поддержка мобильной версии
Разные цветовые схемы
Автообновление
Есть @media-запросы
Поддержка мобильной версии
[Как добавить свою тему] Пожалуйста, прочтите эту
инструкцию!

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

Preserved Roses

last goodbye

Автор: last goodbye

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

shiki-theme

grin3671

Автор: grin3671

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


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

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

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

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

kaur

Автор: kaur

Только профиль

(не адаптивный стиль)
[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

Ренкомод

Renko

Автор: Renko

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

Edesign

EngiNier

Автор: EngiNier

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

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

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

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

by Dolose

Dolose

Автор: Dolose

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


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

Steam ver.

grin3671

Автор: grin3671

Только профиль

Страничка профиля в стиле cообществa Steam

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

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

kaur

Автор: kaur

Только профиль

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

Тёплая тема

Asobu

Автор: Asobu

Поддержка мобильной версии
которая согревает вас холодными ночами
[spoiler=][image = 645148] [image = 645149] [image = 645150][/spoiler]

1903×1007 720×1232 Ссылка на код стиля в профиле автора в блоке «Обо мне»

Стиль на Шикимори

Захотел себе сделать стиль на сайте Шикимори что бы не так ущербно выглядело, хочу так сказать выделится, но нет красивых стилей, а сам я совсем не шарю в CCS. Скиньте мне какой нибудь стиль для Шикимори, буду благодарен.

Лучший ответ
На https://userstyles.org/ ничего подходящего не нашёл?
Остальные ответы
На Шики уже есть готовые стили от пользователей. Можно ими пользоваться.

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

Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Рекомендации по настройке внешнего вида профиля

Доброго времени суток.
Как вы уже могли заметить, недавнее нововведение, позволяющее редактировать css личной страницы сайта, не всегда лучшим образом отражается на странице некоторых пользователей. Это не мой личный взгляд, скорее нарушение простых правил оформления и дизайна большинством пользователей, которые сразу же побежали менять цвета и шрифты как душе угодно. Не каждому человеку, что может зайти к Вам на страницу, может прийтись по вкусу чрезмерно броский дизайн, а посему я хотел бы дать несколько советов, которые могут помочь вам этого избежать. Всё описанное ниже — всего лишь рекомендации, ничего более, но они могут помочь вам не ударить в грязь лицом при оформлении вашего профиля.
1. Диссонанс в дизайне сайта и вашей страницы.
Старайтесь избегать слишком сильных различий вашего дизайна с дизайном сайта.

Используйте картинки с белым, а ещё лучше прозрачным фоном, не уходите слишком далеко от стандартных цветов сайта, не меняйте цвет каждого элемента страницы просто «для красоты». Это может стать очень серьёзным отталкивающим фактором для посетителей страницы. Базовый фон сайта — белый. Центральная область либо белая, либо серая. Всё остальное пользователи сайта используют гораздо реже. Верхняя панель — чёрная. Если при переходе на вашу страницу, кто-то увидит жёлтый фон и синюю панель, то с большей вероятностью, это кто-то просто убежит подальше и никогда не вернётся. Не слишком сильное изменение цветов вполне допустимо и даже может оказаться приятно глазу, но не перестарайтесь с этим.

2. Фоновые картинки. Не делайте центральную область прозрачной. Если очень хотите засветить свою фоновую картинку, то ставьте прозрачность как можно меньше.

Центральная область и сделана для того чтобы фоновая картинка не мешала чтению. Если на вашей странице яркая картинка на фоне и центральная область прозрачная, то текст станет просто нечитабельным, даже если прозрачность минимальная. Более того, фоновая картинка может очень плохо сочетаться с постерами и изображениями из «избранного» в вашем профиле, поэтому лучше воздержитесь от использования прозрачности центральной области.
Красными линиями выделен текст, который невозможно разобрать из-за слишком высокой прозрачности фоновой картинки.
1301×533

3. Шрифты. Не стоит использовать необычные шрифты для оформления своей страницы, их слишком тяжело воспринимать после основного шрифта сайта.

Они созданы для оформления всяческих шапок/постеров/аватарок, но никак не для основного текста. Не стоит прибегать к курсивным/жирным/рукописным шрифтам. Привычные шрифты, по типу Arial, Times New Roman и всё, что на них похоже намного проще воспринимается пользователем.
Пример рукописного шрифта, который тяжело воспринимать, если этот шрифт используется как основной.
1334×284

4. Масштабируемость. Это касается и объектов, и картинок. Не забывайте, что не все могут видеть ваш профиль так же, как и вы всё из-за разницы в разрешениях.

Будьте осторожны. Из-за подобного сдвига весь профиль может выглядеть совсем не так, как вы задумывали.
1299×386

5. Размер текста и объектов. Увеличение всего, что есть на вашей странице, в том числе и шрифта, создаст ад для глаз пользователей с низким разрешением экрана, в том числе и пользователей большинства ноутбуков. Если знать меру в увеличении объектов, то ни к чему плохому это не приведёт, но вот разница в размерах текста слишком сильно ощущается при просмотре страницы.
6. Цвет текста. В большинстве случаев, грамотное использование цветов приятно скажется на восприятий, но не перестарайтесь.

Если использовать слишком много разных цветов, особенно ярких, то текст на вашей странице станет совершенно нечитабельным. К тому же эти цвета далеко не всегда будут сочетаться с вашим фоном.
1292×624

7. Курсор. Если у вас прямо-таки жгучее желание поменять курсор со скучного и стандартного на более оригинальный, то пожалуйста, будьте сдержаннее.

Слишком большие и чрезмерно отличающиеся от стандартной «стрелочки» курсоры удивят лишь на секунду, а затем начнётся негодование из-за неудобства пользованием.
Красиво, но размер слишком велик. Более того, таким курсором немного тяжелее управлять с непривычки.
1260×400

8. Gif-анимации. Будьте осторожны с их использованием, чрезмерно активная «гифка» может здорово помешать восприятию вашего профиля, а так же может подлагивать на слабых компьютерах и съедать трафик у тех, для кого он ограничен.

Убедительная просьба: если у кого-нибудь из прочитавших всё это есть какие-нибудь свои рекомендации по этой теме, то пожалуйста напишите об этом в комментарии или хотя бы мне в личку. Возможно, эту инструкцию стоит довести до ума и отправить в местный css-клуб или что-то в этом роде.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *