CSS Cookbook/uk

Це керівництво є набором корисних 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 фіксує ширину панелі інструментів Візуального редактора, щоб зробити її ширину такою самою, як ширина області редагування.

Показати кількість символів, що залишилися в чаті
Цей уривок CSS від користувача JustLeafy зберігає символи, що залишилися невведеними незалежно від того, скільки символів було введено.

Визначення шаблону імені користувача
Цей уривок CSS від користувача TheGoldenPatrik1 встановлює бордер навколо шаблону , аби запобігти обдурюванню користувачів:

Приховати категорії головної сторінки
Цей уривок CSS для особистого використання від користувача JustLeafy запобігає відображенню нижньої панелі категорій на головній сторінці:

Приховати сповіщення
Цей уривок CSS для особистого використання від користувача KnazO ховає всі повідомлення в правому нижньому куті, які не є повідомленнями на сторінці обговорення:

Сховати модулі праворуч
Цей уривок CSS для особистого використання від користувача Monochromatic Bunny приховує певні модулі у правій частині сторінки:

Примітка: додайте наступний код, щоб збільшити ширину статті, аби не залишати порожній простір у правій частині сторінки.

Статичний модуль трендових статей
Цей уривок CSS для особистого використання від користувача JustLeafy робить модуль трендових статей статичним під час прокручування:

Налаштування виділеного тексту
Цей уривок CSS від користувача JustLeafy робить фоновий відтінок напівпрозорим.

Потворні модулі
Цей уривок CSS для особистого використання від користувача KurwaAntics виправляє потворні поля нового модуля правої частини сторінки.

Незрозумілі оголошення
Цей уривок CSS для особистого використання від користувача Dorumin приховує рекламу, що означає, що всі модулі реклами будуть напівпрозорі.

Тінь біля кнопки слайдера
Цей уривок CSS від користувача Anonminati робить тінь біля кнопки "Читати докладніше"> на слайдері.

Попередний дизайн WDS-кнопок
Цей невеликий CSS-плагін від користувача JustLeafy робить вигляд кнопок як і в попередньому стилі WDS: вони не мали закруглені кути і більший розмір шрифту.

Прибрати фокус у візуальному редакторі
Цей невеликий CSS-плагін від користувача iynque прибирає фокус у візуальному редакторі.