Как сделать красивый профиль шикимори
CSS-club – настройка внешнего вида сайта
На Шикимори доступна возможность изменять внешний вид сайта посредством CSS.
CSS (Cascading Style Sheets, или Каскадные Таблицы Стилей) – это способ показать браузеру как именно он должен отображать вебстраницу. Цвета, размеры, положение элементов, а так же многое другое что касается визуальной части можно задать с их помощью. Самый простой пример, ранее уже бывший доступным на шики – фоновая картинка для сайта.
Если вкратце, мы с помощью «селектора» указываем на нужный нам элемент страницы и создаём для него «правило», которое исполняется браузером, перестраивая страницу так как нам надо.
С их помощью можно превратить свою страницу во что-нибудь уютненькое.
1905×775
Или, наоборот, устроить какую-то вакханалию
1769×923
Всё в ваших руках 
Готовые правила можно найти на страницах готовых решений и часто задаваемых вопросов.
«`js
// ==UserScript==
// @name Shiki User Style Remove
// @namespace shikimori.org/
// @version 1.0
// @description Disabled Shiki User Styles
// @author kaur
// @match /*
// @match /*
// @grant none
// ==/UserScript==
var func = function() <
$(‘#custom_css’).remove();
>;
$(document).ready(func);
$(document).on(‘page:load’, func);
$(document).on(‘turbolinks:load’, func);
«`
Возможно необходимый селектор есть в Списке селекторов. Если нет, то следуйте инструкции:
1) Наводим мышкой на элемент, который хотим изменить. Нажимаем правую кнопку мышки и выбираем «Просмотреть код».
Другой вариант: Нажимаем Ctrl+Shift+C и щелкаем левой кнопкой мышки на нужном элементе.
3) Находим необходимое свойство в правой части панели и меняем его прямо там (так можно убедиться, что ваши изменения будут видны там где это нужно). Цвета можно изменить с помощью специального окошка, открывающегося по нажатию на цветной квадратик.
Подробнее про цвет в CSS можно прочесть на сайте webref.ru
Вопрос: Какие особенности CSS на Шики?
Читайте на отдельной странице
CSS-club – настройка внешнего вида сайта
На Шикимори доступна возможность изменять внешний вид сайта посредством CSS.
CSS (Cascading Style Sheets, или Каскадные Таблицы Стилей) – это способ показать браузеру как именно он должен отображать вебстраницу. Цвета, размеры, положение элементов, а так же многое другое что касается визуальной части можно задать с их помощью. Самый простой пример, ранее уже бывший доступным на шики – фоновая картинка для сайта.
Если вкратце, мы с помощью «селектора» указываем на нужный нам элемент страницы и создаём для него «правило», которое исполняется браузером, перестраивая страницу так как нам надо.
С их помощью можно превратить свою страницу во что-нибудь уютненькое.
1905×775
Или, наоборот, устроить какую-то вакханалию
1769×923
Всё в ваших руках
Готовые правила можно найти на страницах готовых решений и часто задаваемых вопросов.
«`js
// ==UserScript==
// @name Shiki User Style Remove
// @namespace shikimori.org/
// @version 1.0
// @description Disabled Shiki User Styles
// @author kaur
// @match /*
// @match /*
// @grant none
// ==/UserScript==
var func = function() <
$(‘#custom_css’).remove();
>;
$(document).ready(func);
$(document).on(‘page:load’, func);
$(document).on(‘turbolinks:load’, func);
«`
Возможно необходимый селектор есть в Списке селекторов. Если нет, то следуйте инструкции:
1) Наводим мышкой на элемент, который хотим изменить. Нажимаем правую кнопку мышки и выбираем «Просмотреть код».
Другой вариант: Нажимаем Ctrl+Shift+C и щелкаем левой кнопкой мышки на нужном элементе.
3) Находим необходимое свойство в правой части панели и меняем его прямо там (так можно убедиться, что ваши изменения будут видны там где это нужно). Цвета можно изменить с помощью специального окошка, открывающегося по нажатию на цветной квадратик.
Подробнее про цвет в CSS можно прочесть на сайте webref.ru
Вопрос: Какие особенности CSS на Шики?
Читайте на отдельной странице
CSS-club – настройка внешнего вида сайта
Не забудьте заглянуть на страницу бб-кодов сайта, где можно найти самые базовые шаблоны, а также в F.A.Q. и его примеры, где разобраны самые востребованные css правила.
Как скрыть лишние элементы логотипа?
Статья в FAQ’е «Как скрыть элемент?». На примере иконки: Другие селекторы указаны выше.
Как заменить иконку или название на свои?
Всё просто, указываем для необходимого элемента (список выше) ссылку на свою картинку:Если вам нужны более детальные настройки:
Давайте разберём случай, когда вам хочется поместить какого-нибудь персонажа в правый нижний угол и чтобы он перемещался вместе с прокруткой страницы. Код с комментариями ниже:
Если есть желание переместить в другое место, допустим, с левого края, то убираем right: 0px и пишем left: 0px, т.е. отступ 0 пикселей от левой границы, довольно простая логика: левый нулевой и нижний нулевой, вот и получаем левый нижний угол. Всего таких свойств четыре: left, right, bottom и top, поняв эту простую логику можно переместить в любое место.
Если же нужно сделать так, чтобы изображение оставалось на своём месте и при прокрутке страницы, то position: fixed меняется на position: absolute и его позиционирование проводится через вышеупомянутые четыре свойства.
Если нужно добавить более одного персонажа, допустим, два, то можно дублировать правило и во втором заменить :after на :before в селекторе. Однако, если вам нужно больше двух персонажей, то придётся менять уже весь селектор, искать еще один элемент в структуре, от которого можно создать :before и :after, стоит сказать, что таких элементов очень много и у некоторых из них они уже созданы, но под свои нужды.
Стоит сказать сразу, что она будет видна другим только в вашем профиле:
Например:
Конечно, ссылки не рекомендуется брать из вк, потому что они могут быть видны только у вас, всем остальным вк не даст увидеть документ по вашей ссылке. Так же, стоит отменить, что если вы пишите // в начале ссылки, как в примере, то убедитесь, что сайту доступен https протокол (написал в начале ссылки https:// ссылка и посмотрите, что выдаст), иначе вы не увидите то, что хотите.
Если https протокол не доступен, то ссылку нужно начинать с http://.
Если даже с http не отображается гиф, то, вероятно, фильтр шикимори не пропустил вашу ссылку, посчитав её небезопасной, в таком случае ищите другую гиф или перезагрузите её куда-нибудь в другое место.
Преобразует обычные спойлеры в блоке «обо мне» в что-то похожее на пункты вертикального меню, увеличивая область срабатывания, изменяя внешний вид, как это выглядит можно увидеть на скриншоте:
Только для профилей со стандартной автоматической адаптацией, без использования @media запросов.
Предупреждаю, чтобы понять всё тут потребуются хотя бы минимальные понятия CSS и знание какого-нибудь набора свойств.
Прогресс-карточки это, наверное, одна из тех неплохих вещей, что можно делать, когда понимаешь, что делаешь и как делаешь. Подобное не является гибким элементом и требует обновления через код, поскольку на текущий момент у нас нет возможности вставлять динамические значения.
вот чем-то таким становится ссылка в профиле в блоке «обо мне» после её вставки:
сохранив изменения мы можем «издеваться» над ней:
стало (криво, но ничего, основную суть доносит):
код без особых каких-то объяснений и носит скорее ознакомительный характер, предлагается для самостоятельной работы с ним, а его подробное объяснение слишком сильно выйдет в теорию CSS. Собственно, все свойства гуглятся:
Нужны ли вам такие карточки решать вам, но ручное обновление данных это всё, чем мы сейчас располагаем.
Пример готового модуля под мои нужды, внимательно обратите внимание на структуру кода, тут добавлено 18 аниме и, соответственно, 18 оценок:
Современный метод на grid:Чуть менее современный метод на flex:Старый код (не адаптивный):
Пример:
[image=441804]
Ссылка на стиль: HistoryDates.css
Обновлённая версия с поддержкой прозрачности: HistoryDates.css
Обновлённая версия после введения ведра: HistoryDates.css
Как показано на скриншотах, данный код включает отображение специальной кнопки (которая отображается обычно только в мобильной версии), которая позволяет по нажатию на неё затемнить фоны и увеличить область видеоплеера, удобно, если вы предпочитаете смотреть не в фуллскрине
Накладывает на левую и правую часть профиля анимацию снега (можно заменить на любую другую, важно, чтобы был прозрачный фон у gif, например, вот лепестки сакуры, правда pixel art s-media-cache-ak0.pinimg.com)
Если анимация не слишком агрессивная, как, например, та, что выше, и вы уверены, что анимация на всей странице не будет вам мешать, то следующий код сделает так, чтобы анимация была не только слева и справа, а везде:
Вот селекторы основанные на разных временных участках: Менять при необходимости только цифры!
С помощью этого эффекта «случайности» можно попеременно менять не только обложку, но и другие элементы в любой части сайта. Это может быть и просто обложка профиля и смена приветствия в профиле в зависимости от времени суток или даже смена светлой / тёмной темы. Всё в ваших руках!
Для начала нам нужен этот код, он просто оптимизирует отображение информации о персонажах, чтобы избавиться от избыточности обложек, он нужен только в одном экземпляре, так что не нужно его копировать для каждого персонажа отдельно. Данный код подходит только для блока «обо мне»:
Если нужно для блока избранное, то код выше не подходит, нужно использовать этот:
А теперь перейдём к самому шаблону для каждого персонажа, т.е. он будет копироваться столько раз, у скольких персонажей нужно заменить обложку, меняться будут только некоторые места вроде alt и ссылки.
Для того, чтобы сменить обложку конкретного персонажа в профиле нам нужен следующий шаблон, который мы разберём далее:
1) «имя персонажа в alt» можно получить посмотрев его в инспекторе после его открытия по правому клику мыши на персонаже (подробнее про инспектор и поиск можно получить в клубе отдельно, после уже не будет вопросов, что тут, собственно, требуется)
2) «часть ссылки на информацию о персонаже»
3) «ссылка на новую обложку», собственно, ссылка на новую обложку
Пример правильного применения:
Желательно подбирать подходящие по соотношению сторон новые обложки, но, если, допустим, арт горизонтальный, а нужное в его центре, то в этом и не только в этом случае может спасти свойство
background-position (htmlbook.ru/css/background-position)
некоторые его типовые значения, что могут помочь:
Для смены фото для человека или постера манги\аниме принципиально ничего не меняются, делаются абсолютно те же шаги.
Для того, чтобы изменения отразились на весь профиль (т.е. и на избранное, и на комментарии в том числе, а не только на блок «обо мне») оба селектора меняются на два следующих: