CSS Cookbook/ru

Это руководство (поваренная книга, англ. Cookbook) представляет собой набор полезных кусков кода CSS, которые вы сможете использовать на своё усмотрение.

Фоновые изображения
Если вы хотите изменить фоновое изображение вашей вики с помощью CSS, можете не смотреть этот пункт. Как правило, это можно сделать с помощью: Иногда может потребоваться некоторая тонкая настройка, но это основы.

CSS для конкретных целей
На ФЭНДОМЕ имеется несколько встроенных классов.
 * Класс конкретного пространства имён
 * На этой странице находится класс  — класс основного пространства статей
 * На этой странице находится класс  — класс основного пространства статей
 * Класс автоматически добавляется на вики с тёмной темой
 * Класс автоматически добавляется на вики с тёмной темой
 * Класс для конкретной страницы вики
 * Класс этой страницы —
 * Класс этой страницы —
 * Класс для конкретных участников
 * Для зарегистрированных участников ; для анонимных участников
 * Для зарегистрированных участников ; для анонимных участников
 * Класс для конкретной вики
 * Например, класс для этой вики, для Викии Вики —  , а для Вики Сообществ —
 * Например, класс для этой вики, для Викии Вики —  , а для Вики Сообществ —

Настройка курсора
Если вы хотите изменить значок, отображаемый в качестве курсора, вы можете использовать: Упростить настройку курсора вы сможете с помощью генератора кода (поставьте галочку в опции «Курсор»).

Фон для пустой страницы
Этот CSS для использования на всей вики от участника Master Ceadeus 27 добавляет фоновое изображение к сообщению о пустой странице:

Фон профайла
Если вы хотите вставить фоновое изображение в правый нижний угол профайлов участников, вы можете использовать:

Примечание: Добавьте в код строчку, если фоновое изображение имеет тёмный фон.

Круглые углы div-блоков
CSS от участника PhilippL закругляет углы тега.

Настройка полосы прокрутки
Если вы хотите настроить полосу прокрутки вики, вы можете использовать эти селекторы CSS, чтобы применить к ней различные свойства оформления: Примечание: настройки полосы прокрутки поддерживаются только в некоторых браузерах, таких как Chrome, Opera и Safari.

Меняем заголовок редактора исходного кода
Этот CSS от участника JustLeafy добавляет незначительные улучшения в заголовок классического редактора, включая другой цвет, удаление тени и немного непрозрачности.

Подсветка имени участника
Этот CSS выделяет ссылки на страницу участника, его стену обсуждения, страницу вклада, журналы и список блогов: Измените «Ник_участника» на нужный; в примере выше  означает цвет, которым будет выделен ник, а   — название шрифта. Вы можете удалить ненужные свойства, если они вам не нужны. Упростить настройку ников вы сможете с помощью генератора кода (поставьте галочку в опции «Цветные ники»).

Настройка затемнения
Чтобы настроить затемнение, которое появляется при просмотре изображения в лайтбоксе, используйте следующий CSS: Вы можете изменить параметр  на нужный цвет и тип наложения   на необходимый соответственно.

Размытый фон
CSS от участника Dorumin добавляет размытие фона.

Примечание: поддержка браузера Internet Explorer/Edge не гарантируется, но в любом случае вы понимаете, что на сегодняшний день далеко не все сайты включают поддержку IE. В этом браузере CSS просто покажет нечёткое, неразмытое изображение. Эффект размытия обычно находится в пределах 2-5 пикселей. В случае, если  уже имеет определённый фон, вы всегда можете удалить его с помощью:

Показать в лайтбоксе кнопку «Добавить в статью»
Этот CSS от участника JustLeafy отображает кнопку добавления изображения в статью из лайтбокса. Эта опция используется, чтобы добавить изображение, которое участник в настоящее время просматривает в лайтбоксе в статье, введя имя статьи в поле ввода, которое появится после нажатия кнопки «Добавить в статью».

Исправление ширины панели инструментов в визуальном редакторе
Этот CSS от участника JustLeafy фиксирует ширину панели инструментов в визуальном редакторе, чтобы сделать её такой же широкой, как в области редактирования.

Показывать количество символов, оставшихся для сообщения в чате
This CSS plugin by JustLeafy keeps the characters remaining feature unhidden no matter how many characters were typed. Этот плагин CSS от JustLeafy сохраняет символы, оставшиеся функции, независимо от того, сколько символов было введено. Этот CSS-плагин от участника JustLeafy сохраняет символы, оставшиеся невидимыми, независимо от того, сколько символов было напечатано.

Определение шаблона имени участника
Этот CSS от участника TheGoldenPatrik1 помещает границу вокруг шаблона, чтобы участники не были обмануты им:

Скрыть категории на заглавной странице
Этот CSS для личного использования от участника JustLeafy запрещает отображение нижней панели категорий на заглавной странице:

Скрыть уведомления
Этот CSS для личного использования от участника KnazO запрещает отображение всех уведомлений в правом нижнем углу, которые не являются уведомлениями страницы обсуждения:

Скрыть модули в правой части страницы
Этот CSS для личного использования от участника Monochromatic Bunny скрывает определённые модули в правой части страницы:

Примечание: Добавьте следующий код, чтобы увеличить ширину статьи и не оставлять пустое место справа.

Модуль трендовых статей
Этот CSS для личного использования от участника JustLeafy делает модуль трендовых статей ФЭНДОМА неподвижным при прокрутке:

Настройка выделенного текста
Этот CSS от участника JustLeafy делает цвет фона выделенного курсором текста полупрозрачным.

Уродливые модули
Этот CSS для личного использования от участника KurwaAntics исправляет уродливые края новых модулей ФЭНДОМА.

Непонятная реклама
Этот CSS для личного использования от участника Dorumin скрывает рекламу, делая все объявления полупрозрачными.

Тень кнопки на слайдере
Этот CSS от участника Anonminati создаёт тень около кнопки «Читать подробнее» в слайдере.

Предыдущий дизайн WDS-кнопок
Этот небольшой CSS-плагин от участника JustLeafy делает кнопки похожими на те, что были ранее, то есть без закруглённых углов и с бо́льшим размером шрифта.

Убийца фокуса визуального редактора
Этот небольшой CSS-плагин от участника iynque «убивает» фокус (затенение) вокруг окна нового Визуального редактора.