# BookStack

# Добавление CSS

Чтобы добавить пользовательский CSS для заголовков в BookStack, выполните следующие шаги:

## 1. **Перейдите в настройки системы**

- Войдите как администратор
- Нажмите **Настройки** (Settings) → **Настройки приложения** (Application Settings)
- Выберите вкладку **"Custom HTML Head Content"**

## 2. **Добавьте CSS стили**

Вставьте код в поле "Custom HTML Head Content":

```html
<style>
/* Стили для заголовков в пользовательском контенте */
.book-content h1 {
    color: #your-color;
    font-size: 2.5em;
    border-bottom: 2px solid #your-color;
    padding-bottom: 10px;
}

.book-content h2 {
    color: #your-color;
    font-size: 2em;
    margin-top: 30px;
}

.book-content h3 {
    color: #your-color;
    font-size: 1.5em;
}

/* Для редактора WYSIWYG */
.editor-wrap .editor-content h1,
.editor-wrap .editor-content h2,
.editor-wrap .editor-content h3 {
    /* стили для предпросмотра в редакторе */
}
</style>
```

<svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"></svg><svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"></svg>

## **Альтернативный метод: через Custom Styles**

Если в вашей версии BookStack есть раздел **"Custom Styles"**:

1. Настройки → Настройки приложения → Custom Styles
2. Вставьте CSS без тегов `<style>`:

<div class="md-code-block md-code-block-light" id="bkmrk--1"><div class="md-code-block-banner-wrap"><div class="md-code-block-banner md-code-block-banner-lite"><div class="_121d384"></div></div></div></div>```css
.book-content h1 {
    font-family: 'Your Font', sans-serif;
    color: #333;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
}
```

<svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"></svg><svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"></svg>

## **Важные замечания**

- Используйте селектор `.book-content` для стилизации только содержимого страниц
- Для редактора используйте `.editor-wrap .editor-content`
- Изменения применяются ко всем страницам
- Проверяйте CSS на конкретных страницах после сохранения
- Для тестирования используйте инструменты разработчика браузера (F12)

## **Пример расширенной стилизации**

```html
<style>
/* Иерархия заголовков */
.book-content h1 { 
    counter-reset: h2; 
}
.book-content h2 { 
    counter-reset: h3; 
}
.book-content h3 { 
    counter-reset: h4; 
}

/* Автоматическая нумерация */
.book-content h2:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}
.book-content h3:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". ";
}
</style>
```

<svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"></svg><svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"></svg>

После сохранения настроек обновите страницу, чтобы увидеть изменения. Рекомендуется очистить кэш браузера, если стили не применяются сразу.