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

КлубыCSS-club – настройка внешнего вида сайтаТопики
Murasaki Renko
Murasaki RenkoвCSS-club – настройка внешнего вида сайта
34
Вопрос: Что здесь происходит?
Ответ
На Шикимори доступна возможность изменять внешний вид сайта посредством CSS.

CSS (Cascading Style Sheets, или Каскадные Таблицы Стилей) – это способ показать браузеру как именно он должен отображать вебстраницу. Цвета, размеры, положение элементов, а так же многое другое что касается визуальной части можно задать с их помощью. Самый простой пример, ранее уже бывший доступным на шики – фоновая картинка для сайта.

Если вкратце, мы с помощью "селектора" указываем на нужный нам элемент страницы и создаём для него "правило", которое исполняется браузером, перестраивая страницу так как нам надо.

С их помощью можно превратить свою страницу во что-нибудь уютненькое.
1905x775

Или, наоборот, устроить какую-то вакханалию
1769x923
Всё в ваших руках :star:

Вопрос: Как этим пользоваться? Куда и как вставлять представленные примеры?
Ответ
Зайдите в настройки -> внешний вид сайта.
Там вы увидите поле для ввода текста:
1012x1008
На скриншоте видно то что у меня было там на момент написания этого поста, как пример того как может это выглядеть.

Готовые правила можно найти на страницах готовых решений и часто задаваемых вопросов.

Вопрос: Как вернуть старый внешний вид профиля?
Ответ
Заходи в «Настройки» ⇒ «Внешний вид сайта». Там ты увидишь поле для ввода CSS:
1012x1008
Удали всё содержимое и нажми кнопку «Сохранить».
💡 Быстро выделить всё содержимое можно с помощью комбинации клавиш Ctrl + A, предварительно установив курсор на поле ввода.

Вопрос: Как отключить всю эту вакханалию?
Ответ
В тех же настройках внешнего вида сайта (Профиль -> Настройки -> Внешний вид сайта) нужно снять галочку перед пунктом "Применять пользовательские стили". Или воспользоваться вот таким скриптом:
spoiler
```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);
```
Его можно подключить к сайту например с помощью вот такого расширения для хрома.

Вопрос: Как вообще строится CSS?
Ответ
CSS-код состоит из набора правил, применяемых к тем или иным элементам вебсайта.
Если вкратце, то правила формируются следующим образом:
селектор {
  свойство1: значениесвойства1;
  свойство2: значениесвойства2;
}
Если к одному свойству применимо несколько значений (составные свойства), последние можно писать друг за другом через пробел.
Селектор - указание на элемент, к которому нужно это правило применить. Свойства, как можно догадаться из названия, это некие параметры, которые можно задать для того или иного селектора. В значениях, как не трудно догадаться, указываются значения этих параметров.
Важно! Не забывайте ставить ; после перечисления значений свойств каждого отдельного селектора. Вот прям как на примере выше.

Вопрос: Как найти селектор?
Ответ
Возможно необходимый селектор есть в Списке селекторов. Если нет, то следуйте инструкции:

1) Наводим мышкой на элемент, который хотим изменить. Нажимаем правую кнопку мышки и выбираем "Просмотреть код".
Другой вариант: Нажимаем Ctrl+Shift+C и щелкаем левой кнопкой мышки на нужном элементе.

2) В открывшейся панели 2 области: левая - HTML, правая - CSS. В левой мы видим все элементы страницы, а в правой - свойства, которые отвечают за их внешний вид.

3) Находим необходимое свойство в правой части панели и меняем его прямо там (так можно убедиться, что ваши изменения будут видны там где это нужно). Цвета можно изменить с помощью специального окошка, открывающегося по нажатию на цветной квадратик.
Что делать если нужного свойства нет?
Скорее всего свойство применяется не к этому элементу, а к его родителю или еще более старшему предку. Чтобы найти тот самый элемент необходимо открыть вкладку "Computed" в левой части и найти нужное на свойство в списке. Наведите на него и щелкните на стрелочку перед значение свойства. Вас перекинет к тому самому свойству у необходимого селектора. Смело переходите к пункту 4.
Что делать если нужного свойства все равно нет?
Некоторые свойства, такие как background-color, не наследуются по умолчанию, поэтому если у выделенного вами элемента (п. 1) нет свойства, которое вы ищите, взгляните на область HTML, и двигайтесь по дереву элементов вверх, чтобы найти нужный. Если вы ищите фон, поглядывайте на сайт - там подсвечивается выделенный элемент: подсветка должна совпадать с закрашенным элементом.

4) После изменения свойства, двигайтесь вверх по списку свойств, пока не наткнетесь на открывающуюся фигурную скобку {. Перед ней находится "селектор", та самая штука, которая определяет к какому именно элементу страницы будет применяться ваши правила.

На примере Microsoft EDGE (в картинках)
1920x964 1920x964 1920x964

Вопрос: Как задавать <цвет> в CSS?
Ответ
  • Вам нужен цвет без прозрачности? – Используйте HEX или RGB.
  • Вам нужен цвет с прозрачностью? – Используйте RGBA.
  • Вам нужна полная прозрачность? – Укажите transparent в значении свойства.
HEX? RGB? RGBA? Что это?
Нет времени объяснять! Используйте онлайн выбор цвета запомнив лишь, что HEX без прозрачности, а RGBA с прозрачностью.

Ссылки на выбор цвета онлайн:
Что делать с полученными значениями?
Подставьте вместо <цвет> в значении свойства, отвечающего за цвет. К примеру:
/* Шаблон использования */
selector {
  background-color: <цвет>;
}

/* Реальные примеры использования */
body {
  background-color: #3f3f3f;
}

.l-page {
  background-color: rgba(255, 255, 255, 0.85);
}

Подробнее про цвет в CSS можно прочесть на сайте webref.ru

Вопрос: Как улучшить свои знания по CSS?
Ответ
Улучшить свои навыки можно с помощью интерактивных курсов и справочников:Начинать рекомендуется с изучения HTML. На всё про всё у вас уйдет порядка 3-6 часов, но это будет отличной стартовой площадкой на будущее.

Вопрос: Какие особенности CSS на Шики?
Читайте на отдельной странице

Примеры свойств и их значений можно увидеть в FAQ или на сайтах-справочниках, например htmlbook.ru/css/ или webref.ru/css
Комментарии
Скрыть 14 комментариев
Показать 14 комментариев
Загрузить ещё 14 комментариев
howcute
howcute#
@daryanimeshnik, ну если в жизни то с этим ничего не поделаешь.Если в CSS то невелика проблема.Захочешь-сможешь обучиться.
Z0D1A
Z0D1A#
482x144 какие еще есть размеры фонового изображения?
@grin3671
grin3671
grin3671#
@Z0D1A, webref.ru
se_la_vie
se_la_vie#
Ребят, хэлп!
Что делать? Я не могу голосовать в турнирах на шики за персонажей, которым я изменила аватарки самостоятельно через код у себя в профиле..меня перебрасывает сразу же на страницу персонажа при нажатии на него в целях выбора в голосовании..помогите, пожалуйста
917x544
@еноеноено56
еноеноено56
еноеноено56#
@Хотару Томоэ, сними настройки, проголосуй и верни
@se_la_vie
se_la_vie
se_la_vie#
@Cletus Findlay, :depressed: гемор какой-то..
vova4yma
vova4yma#
Я совсем тупой и не понимаю как вставить картинку, главное раньше я как-то вставлял. потом сбросил что-ли, в менюшку фоновое изображение ссылку вставляю и это бесполезно, а тут лажу и нигде даже об этом слова не написано, только через СSS разве меняется?
@(松阪)
(松阪)
(松阪)#
@vova4yma, дааа я тоже тупая :(
Леонид Марков
Леонид Марков#
был же вроде сайт где можно было настроить профиль шикимори?
Сейчас как не смотрю не могу найти ссылку на него.
кто нибудь подскажите что и куда делось?:oh::-o
@grin3671
Леонид Марков
Леонид Марков#
@grin3671, Спс! 1 сайт искал не мог найти )):bye::gamer:
GeorgЪ.
GeorgЪ.#
@grin3671, как выглядела бы стандартная тема шики, если бы она была выполнена в поле ввода пользовательского CSS кода?
@grin3671
grin3671
grin3671#
@GeorgЪ., как-то так? :oh:
(типа пустое поле ввода..)
@GeorgЪ.


Стандартная тема Шикимори содержит в себе больше 50 тысяч строк кода, я без понятия зачем их надо писать в стили профиля..
GeorgЪ.
GeorgЪ.#
@grin3671, Ок, спс. Другой вопрос: как сделать тёмную тему, используя только мобильник? Т.е. все чёрные, в том числе и печатаемые, буквы сделать отображаемыми белыми, цвета тёмных кнопок с белым текстом заменить на тёмно-золотой с тёмно-красным текстом, синие ссылочные тексто-кнопки(ими отображены названия тайтлов в ленте, имена персонажей, и пр.)а поля, и бэкграунд за кнопками всего интерфейса чёрными, как фон за лого-кнопкой «ШИКИМОРИ» ведущей на главную страницу?
@grin3671
grin3671
grin3671#
@GeorgЪ., одним мобильником не обойтись — еще пара извилин в голове должна быть.. Самый простой способ сделать тёмную тему, чтобы не писать много и использовать именно CSS — инвертировать цвета: 
.l-page {
  filter: invert(1)
}

.l-page img {
  filter: invert(1)
}
@GeorgЪ.
GeorgЪ.
GeorgЪ.#
@grin3671, будет ли это влиять на постеры? И нужно ли оставлять в поле то, что уже там написано по стоку?
@grin3671
grin3671
grin3671#
@GeorgЪ., на постеры не влияет, другой код можно оставить, хотя по умолчанию там вообще ничего не должно быть.
@GeorgЪ.
GeorgЪ.
GeorgЪ.#
@grin3671, Спс)
Akito Hīragi
Akito Hīragi#
Тренажер тема :)
WOY 2.0
WOY 2.0#
Теории больше, чем дали в своё время на учёбе. Спасибо
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode