Добавление CSS

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

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

• Войдите как администратор

• Нажмите Настройки (Settings) → Настройки приложения (Application Settings)

• Выберите вкладку "Custom HTML Head Content"

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

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

<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>

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

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

1. Настройки → Настройки приложения → Custom Styles

2. Вставьте CSS без тегов <style>:

.book-content h1 {
    font-family: 'Your Font', sans-serif;
    color: #333;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
}

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

• Используйте селектор .book-content для стилизации только содержимого страниц

• Для редактора используйте .editor-wrap .editor-content

• Изменения применяются ко всем страницам

• Проверяйте CSS на конкретных страницах после сохранения

• Для тестирования используйте инструменты разработчика браузера (F12)

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

<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>

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