## 🎨 Кастомизация Obsidian через CSS-файлы #### Что такое CSS-файл и зачем он нужен в Obsidian? >[!info] CSS >— это язык оформления интерфейса. И в Obsidian он открывает невероятную гибкость: ты можешь **менять внешний вид любого элемента интерфейса** — от ссылок до блоков callout, таблиц, даже редактора. В отличие от плагинов, CSS не грузит систему, не требует обновлений и **позволяет контролировать каждый пиксель твоей среды**. Это как "скрытая настройка", которую ты создаешь сам под себя. --- #### 📁 Где включаются CSS-файлы? 1. Зайди в **Настройки → Оформление → Фрагменты CSS-кода** 2. Нажми **«Открыть папку с фрагментами»** 3. Вставь туда `.css` файл (например, `elton-style.css`) 1. Чтобы создать такой файл, нужно в той папке создать обычный блокнот 2. Затем "Сохранить как" > добавить .css в конце названия файла 3. ![[Pasted image 20250503172833.png]] 4. Перезапусти Obsidian или просто активируй его переключателем в списке, --- ## 🔥 Пример моего кастомного CSS-файла >[!quote] ![[Pasted image 20250503173147.png]] ``` .callout[data-callout="health"] { --callout-color: 255, 199, 234; --callout-icon: activity; } ```` ▶️ **Что делает это правило:** - `health` — это имя callout-блока. В Obsidian ты пишешь: `>[!health]`, и этот блок получит особый стиль. - `--callout-color` — устанавливает нежно-розовый фон (цвет взят [отсюда](https://www.w3schools.com/colors/colors_picker.asp?colorhex=FAEBD7)) - `--callout-icon: activity;` — добавляет иконку **"пульс"** (взято с [Lucide Icons](https://lucide.dev/icons/)) --- >[!quote] ![[Pasted image 20250503173209.png]] ``` .cm-s-obsidian .cm-link:hover { color: #ffd700; text-shadow: 0 0 5px #ffd700; transition: all 0.3s ease; } ``` ▶️ **Что делает это правило:** - Меняет цвет ссылок при наведении на **золотой** `#ffd700` - Добавляет мягкое свечение (**text-shadow**) для акцента - `transition` — делает эффект плавным --- ``` .callout[data-callout="мотивация"] { --callout-color: 255, 183, 0; --callout-icon: "zap"; border-radius: 10px; font-style: italic; } ``` ▶️ **Что делает это правило:** - `мотивация` — русское имя callout'а. Можно писать `>[!мотивация]` — и будет выделяться. - Цвет — ярко-желтый, как маркер - Иконка ⚡ `zap` добавляет энергию - `border-radius: 10px` — закругляет углы - `font-style: italic` — делает стиль "вдохновляющим", как рукописный --- #### ✨ Что ещё можно делать с CSS-файлами? Вот ещё несколько крутых идей: - **Сделать разные стили для разных тегов** — например, `#🧠` подсвечивать синим, а `#🔥` — красным - **Оформить все таблицы с границами, тенями или зеброй** - **Изменить стили подсветки синтаксиса** — например, свой цвет для `Dataview` кода - **Добавить фоновые изображения в определённые callout-блоки** - **Изменить оформление конкретных элементов в редакторе — например, скрыть номера строк или подсветить текущую строку** --- ### Кейсы: - **Фон приложения или панелей.** С помощью CSS можно установить произвольное фоновой изображение или цвет. Например, чтобы задать фоновую картинку в основном окне, можно использовать селектор `.horizontal-main-container`, как в этом сниппете: ```css .horizontal-main-container { /* Фоновое изображение на весь рабочий экран */ background: url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?…); background-size: cover; } ``` Здесь `background-size: cover` растягивает картинку по всей области. Кроме того, рекомендуется сделать фон заметок прозрачным, например через `--background-primary: transparent;`, чтобы было видно фон под ним. Такая настройка позволяет красиво оформить задний план - **Размер и тип шрифтов.** Шрифты задаются через CSS-переменные темы или напрямую через `font-size`. Общее изменение базового размера шрифта удобно делать через переменные (например, `--font-size-base`), либо используя медиа-запросы для разных устройств. Пример из форума Obsidian для разной величины шрифта на ПК и мобильном: ```css @media (min-width: 768px) { .cm-line { font-size: 14px; } /* Desktop */ } @media (max-width: 480px) { .cm-line { font-size: 16px; } /* Mobile */ } @media (min-width: 480px) and (max-width: 768px) { .cm-line { font-size: 17px; } /* Tablet */ } ``` Этот сниппет меняет размер текста в редакторе для разных ширин экрана. - **Цвета ссылок и выделений.** Цвет внутренних ссылок можно менять, переопределяя переменные или селекторы. Например, чтобы изменить цвет «мёртвых» (неразрешённых) ссылок, в CSS-сниппете указывают: ```css .markdown-rendered .internal-link.is-unresolved { /* Цвет неразрешённой ссылки */ --link-unresolved-color: #6272a4; font-size: var(--font-ui-small); } ``` Это пример из обсуждения на форуме [27], который задаёт другой оттенок неразрешённой ссылки. Для общих цветовых настроек (фонового и декоративного цвета ссылки) можно использовать CSS-переменные темы, например `--link-unresolved-color`, `--link-unresolved-decoration-color`. Аналогично, при поиске вы можете настроить цвет найденного текста: один из примеров делает фон прозрачным и меняет цвет найденных фрагментов на цвет акцента темы: ```css .workspace-leaf-content[data-type="search"] .search-result-file-matched-text { background: none; color: var(--text-accent); } ``` Такое правило убирает жёлтую подсветку и задаёт найденным словам основной цвет текста. - **Стилизация списков.** Можно задать разные маркеры для разных уровней вложенности списка. Например, сниппет из GitHub меняет форму кружков в маркер-листах: первый уровень — закрашенный круг, второй — пустой круг, третий — квадрат, четвёртый — треугольник и т.д. Пример упрощённо: ```css /* Уровень 1: закрашенный круг */ .markdown-reading-view .markdown-preview-section ul li > .list-bullet:after { height: 7px; width: 7px; border-radius: 50%; } /* Уровень 3: квадрат */ .markdown-reading-view .markdown-preview-section ul li ul li ul li > .list-bullet:after { height: 7px; width: 7px; border-radius: 0%; } /* Уровень 4: треугольник */ /* (с помощью border-стилей создаётся треугольник) */ ``` Полный код и подробности — в сниппете [25] (GitHub), который обеспечивает разную форму маркеров на 5 уровнях списка. - **Панели и иконки.** Через CSS можно прятать или менять элементы интерфейса. Например, чтобы скрыть иконки ненужных плагинов на боковой панели (ribbon), можно обращаться к элементам по `aria-label` и давать `display: none`: ```css .clickable-icon[aria-label='Templater'], .clickable-icon[aria-label='Toggle custom sorting'] { display: none; } ``` Этот код убирает из риббон-меню кнопки плагинов Templater и Custom Sort. Подобным образом можно скрывать другие иконки или изменить порядок кнопок. Также можно настроить автоматическое скрытие ленты: пример решения с `body:has(.is-sidedock-collapsed)` прячет ленту, когда свернут левый сайдбар (см. обсуждение [32]). - **Graph View (граф связей).** Область графа представляет собой `<canvas>`, который можно стилизовать подложенными градиентами или картинками. Например, дизайнеры предлагают сделать фон графа звёздным: задавать CSS для `canvas`, накладывая градиент и SVG со звёздами. Также из обсуждений известно, что можно наложить картинку фона на `.workspace-leaf-content[data-type="graph"] .view-content` или его псевдоэлемент `::after`. Так, один из примеров делает размытый фон (картинка на весь фон графа) и затемняет его: ```css .workspace-leaf-content[data-type="graph"] .view-content { z-index: 0; position: absolute; background-image: url(https://picsum.photos/200); background-size: cover; filter: blur(4px) brightness(50%) saturate(50%); left:0; top:0; right:0; bottom:0; } ``` Это накладывает на граф фон с фильтрами размытости и затемнения. Есть и улучшенный вариант с `::after`, чтобы граф остался на переднем плане: ```css .workspace-leaf-content[data-type="graph"] .view-content::after { z-index: -1; content:""; position:absolute; background-image: url(https://picsum.photos/200); filter: blur(4px) brightness(50%) saturate(50%); left:0; top:0; right:0; bottom:0; } ``` Такие стили заметно меняют оформление Graph View, делая фон более атмосферным (фрагменты кода взяты из обсуждения [40]). - **Интерактивность изображений и видео.** Для удобства чтения можно добавить «умное» масштабирование вложенных медиа. В одном сниппете для изображений при наведении меняется курсор, а при нажатии картинка разворачивается на весь экран: ```css .view-content img { max-width:100%; cursor:zoom-in; } .view-content img:active { cursor:zoom-out; } /* и правила для .image-embed:active для фиксации и центрирования */ ``` Для видео можно назначать алиасы и соответственно ужимать плеер. Из переписки в телеграм-чатe: при добавлении к видео-объекту alias `vid-20` применяется правило ```css [alt~="vid-20"] video { width: 20%; } ``` и видео сразу сжимается до 20% ширины экрана. То есть, поместив в заметку `![[video.mp4|vid-20]]`, мы получим уменьшенное видео. Этот приём улучшает UX при работе с большими медиафайлами (пример взят из чата пользователя). - **Адаптация под мобильные устройства.** С помощью медиазапросов можно подстраивать интерфейс для мобильных экранов. Помимо примера с размером шрифта выше, часто настраивают ширину панелей или другие размеры. Например, можно изменить размер папок и пунктов в боковом дереве: ```css @media (max-width: 480px) { .tree-item-children, .nav-folder-title { font-size: 17px; } } ``` (фрагмент взят из того же обсуждения, где настраивают шрифты и элементы панели навигации для мобильных). Такая адаптация делает приложение удобным на маленьких экранах. --- > [!abstract] Идем дальше? > - 🧠 [[callout-manager|Callout manager — создаем callout без CSS и сложных моментов]] > - [[Главная страница|⬅️ Назад на главную]]