🎨 Кастомизация Obsidian через CSS-файлы

Что такое CSS-файл и зачем он нужен в Obsidian?

CSS

— это язык оформления интерфейса. И в Obsidian он открывает невероятную гибкость: ты можешь менять внешний вид любого элемента интерфейса — от ссылок до блоков callout, таблиц, даже редактора.

В отличие от плагинов, CSS не грузит систему, не требует обновлений и позволяет контролировать каждый пиксель твоей среды. Это как “скрытая настройка”, которую ты создаешь сам под себя.

📁 Где включаются CSS-файлы?

Зайди в Настройки → Оформление → Фрагменты CSS-кода
Нажми «Открыть папку с фрагментами»
Вставь туда .css файл (например, elton-style.css)
1. Чтобы создать такой файл, нужно в той папке создать обычный блокнот
2. Затем “Сохранить как” > добавить .css в конце названия файла
Перезапусти Obsidian или просто активируй его переключателем в списке,

🔥 Пример моего кастомного CSS-файла

.callout[data-callout="health"] {
    --callout-color: 255, 199, 234;
    --callout-icon: activity;
}

▶️ Что делает это правило:

health — это имя callout-блока. В Obsidian ты пишешь: >[!health], и этот блок получит особый стиль.
--callout-color — устанавливает нежно-розовый фон (цвет взят отсюда)
--callout-icon: activity; — добавляет иконку “пульс” (взято с Lucide Icons)

.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, как в этом сниппете:
```
.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 для разной величины шрифта на ПК и мобильном:
```
@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-сниппете указывают:
```
.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. Аналогично, при поиске вы можете настроить цвет найденного текста: один из примеров делает фон прозрачным и меняет цвет найденных фрагментов на цвет акцента темы:
```
.workspace-leaf-content[data-type="search"] .search-result-file-matched-text {
  background: none;
  color: var(--text-accent);
}
```
Такое правило убирает жёлтую подсветку и задаёт найденным словам основной цвет текста.
Стилизация списков. Можно задать разные маркеры для разных уровней вложенности списка. Например, сниппет из GitHub меняет форму кружков в маркер-листах: первый уровень — закрашенный круг, второй — пустой круг, третий — квадрат, четвёртый — треугольник и т.д. Пример упрощённо:
```
/* Уровень 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:
```
.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. Так, один из примеров делает размытый фон (картинка на весь фон графа) и затемняет его:
```
.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, чтобы граф остался на переднем плане:
```
.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]).
Интерактивность изображений и видео. Для удобства чтения можно добавить «умное» масштабирование вложенных медиа. В одном сниппете для изображений при наведении меняется курсор, а при нажатии картинка разворачивается на весь экран:
```
.view-content img { max-width:100%; cursor:zoom-in; }
.view-content img:active { cursor:zoom-out; }
/* и правила для .image-embed:active для фиксации и центрирования */
```
Для видео можно назначать алиасы и соответственно ужимать плеер. Из переписки в телеграм-чатe: при добавлении к видео-объекту alias vid-20 применяется правило
```
[alt~="vid-20"] video { width: 20%; }
```
и видео сразу сжимается до 20% ширины экрана. То есть, поместив в заметку ![[video.mp4|vid-20]], мы получим уменьшенное видео. Этот приём улучшает UX при работе с большими медиафайлами (пример взят из чата пользователя).
Адаптация под мобильные устройства. С помощью медиазапросов можно подстраивать интерфейс для мобильных экранов. Помимо примера с размером шрифта выше, часто настраивают ширину панелей или другие размеры. Например, можно изменить размер папок и пунктов в боковом дереве:
```
@media (max-width: 480px) {
  .tree-item-children, .nav-folder-title {
    font-size: 17px;
  }
}
```
(фрагмент взят из того же обсуждения, где настраивают шрифты и элементы панели навигации для мобильных). Такая адаптация делает приложение удобным на маленьких экранах.

Идем дальше?

🧠 Callout manager — создаем callout без CSS и сложных моментов

⬅️ Назад на главную

Elton Labs

🎨 Кастомизация Obsidian через CSS-файлы

Что такое CSS-файл и зачем он нужен в Obsidian?

📁 Где включаются CSS-файлы?

🔥 Пример моего кастомного CSS-файла

✨ Что ещё можно делать с CSS-файлами?

Кейсы: