Гайд по кастомизации CSS для Charscrolls

admin 14 мая, 2026
Традиционно вам предлагается возможность изменения оформления страниц с помощью стандарта CSS — каскадных таблиц стилей. Используйте элементы в том виде, как они приведены здесь, и никаких проблем не возникнет. Все актуальные свойства CSS можно посмотреть и изучить на сайте Htmlbook. В этом гайде свойства будут рассмотрены только в качестве примеров. Базовый синтаксис CSS — элемент { свойство: значение; }. При нарушении синтаксиса темизация может не сработать, поэтому не забывайте лишний раз проверить его.

Содержание

  1. Элементы страницы персонажа
  2. Элементы страницы сюжета
  3. Элементы страницы рассказа
  4. Элементы страницы сеттинга
  5. Примеры оформления
  6. Изменение шрифтов
  7. Получение цвета

1. Элементы страницы персонажа

Основной контейнер и шапка

Селектор Описание
#char Основной контейнер всей страницы персонажа
#char .info Контейнер информации об авторе и дате
#char .info .author Имя автора и ссылка на профиль
#char .info .date Дата публикации персонажа
#char .info .edit-button Кнопка редактирования (видна только автору)
#char .info .btn-edit Стиль кнопки редактирования

Изображение и основная информация

Селектор Описание
#char .char-image Контейнер изображения персонажа
#char .char-image img Само изображение
#char .char-sett Контейнер для названия сеттинга
#char .char-sett a Ссылка на сеттинг
#char .char-sett .char-project Название проекта и ссылка на него
#char h1.char-name Имя персонажа
#char .char-nation Народность / раса персонажа

Таблица характеристик

Селектор Описание
#char .char-table Контейнер таблицы с характеристиками
#char .char-table .line Все строки таблицы
#char .char-table .line-title Название поля (левая часть)
#char .char-table .line-value Значение поля (правая часть)
#char .char-table .char-age Строка с возрастом
#char .char-table .char-sex Строка с полом
#char .char-table .char-status Строка со статусом
#char .char-table .line1 Первое дополнительное поле
#char .char-table .line2 Второе дополнительное поле
#char .char-table .line3 Третье дополнительное поле
#char .char-table .line% Дополнительное поле под номером %

Многострочные текстовые блоки

Селектор Описание
#char .longtext Все многострочные поля
#char .longtext h3.label Все заголовки многострочных полей
#char .char-look Блок «Внешний вид»
#char .char-behavior Блок «Характер»
#char .char-skills Блок «Способности и навыки»
#char .char-world Блок «Место в мире»
#char .char-family Блок «Семья и друзья»
#char .char-other Блок «Дополнительная информация»

Хронология событий

Селектор Описание
#char .char-events Контейнер хронологии
#char .char-events h3.label Заголовок хронологии
#char .char-events .line Все строки хронологии
#char .char-events .line-text Текст события
#char .char-events .line-date Дата события
#char .char-events .arrow Стрелка перед датой (←)
#char .char-events .line1 Первая строка хронологии
#char .char-events .line2 Вторая строка хронологии
#char .char-events .line% Строка под номером %

Ролевая игра

Селектор Описание
#char .char-roleplay Контейнер информации о ролевой игре
#char .char-roleplay .label Метки полей внутри контейнера
#char .char-roleplay .value Значения полей
#char .char-area Место отыгрыша
#char .char-url Ссылка на место отыгрыша
#char .char-url a Стиль ссылки
#char .char-type Тип отыгрыша
#char .char-type .value span Отдельный тип отыгрыша
#char .char-activity Активность
#char .char-search Блок «Поиск сюжетов»
#char .char-search .label Заголовок блока поиска
#char .char-roleplay h4.label Заголовки для списков
#char ul.char-plot Список сюжетов
#char ul.char-plot li Элемент списка сюжетов
#char ul.char-plot li.plot1 Первый сюжет в списке
#char ul.char-plot li.plot% Сюжет под номером %
#char ul.char-story Список рассказов
#char ul.char-story li Элемент списка рассказов
#char ul.char-story li.story1 Первый рассказ в списке
#char ul.char-story li.story% Рассказ под номером %

2. Элементы страницы сюжета

Основной контейнер

Селектор Описание
#plot Основной контейнер страницы сюжета
#plot .plot-page Обёртка контента

Шапка и мета-информация

Селектор Описание
#plot .plot-header Шапка сюжета
#plot .plot-cover Контейнер обложки
#plot .plot-cover img Изображение обложки
#plot .plot-title Заголовок сюжета
#plot .plot-meta Контейнер мета-информации
#plot .plot-status Статус сюжета
#plot .status-recruiting Статус «Набор участников»
#plot .status-in_progress Статус «В процессе»
#plot .status-completed Статус «Завершён»
#plot .status-frozen Статус «Заморожен»
#plot .plot-master Мастер сюжета
#plot .plot-author Автор сюжета
#plot .plot-date Дата создания
#plot .plot-edit Контейнер кнопки редактирования
#plot .btn-edit Кнопка редактирования
#plot .plot-setting Сеттинг сюжета
#plot .plot-content Контейнер описания
#plot .plot-content p Параграфы описания

Участники сюжета

Селектор Описание
#plot .plot-participants Контейнер списка участников
#plot .plot-participants h3 Заголовок списка участников
#plot .participants-grid Сетка участников
#plot .participant-card Карточка участника
#plot .participant-avatar Аватар участника
#plot .participant-avatar img Изображение аватара
#plot .participant-info Информация об участнике
#plot .participant-info h4 Имя участника
#plot .participant-info a Ссылка на персонажа
#plot .participant-nation Народность персонажа

3. Элементы страницы рассказа

Основной контейнер

Селектор Описание
#story Основной контейнер страницы рассказа
#story .story-page Обёртка контента

Шапка и мета-информация

Селектор Описание
#story .story-cover Контейнер обложки
#story .story-cover img Изображение обложки
#story .story-header Шапка рассказа
#story .story-type Тип творчества
#story .story-title Заголовок рассказа
#story .story-meta Контейнер мета-информации
#story .story-author Автор рассказа
#story .story-date Дата публикации
#story .story-edit Контейнер кнопки редактирования
#story .btn-edit Кнопка редактирования
#story .story-setting Сеттинг рассказа
#story .story-plot Связанный сюжет
#story .story-excerpt Краткое описание (анонс)
#story .story-content Полный текст рассказа
#story .story-content p Параграфы текста

Персонажи в рассказе

Селектор Описание
#story .story-characters Контейнер списка персонажей
#story .story-characters h3 Заголовок списка
#story .characters-grid Сетка персонажей
#story .character-card Карточка персонажа
#story .character-avatar Аватар персонажа
#story .character-avatar img Изображение аватара
#story .character-info Информация о персонаже
#story .character-info h4 Имя персонажа
#story .character-info a Ссылка на персонажа
#story .character-nation Народность персонажа

4. Элементы страницы сеттинга

Основной контейнер

Селектор Описание
.setting-page Основной контейнер страницы сеттинга
.setting-banner Баннер сеттинга
.setting-banner-content Контент баннера
.setting-title Название сеттинга
.setting-description Описание сеттинга

Статистика и вкладки

Селектор Описание
.setting-stats Контейнер статистики
.setting-stats .stat Отдельный показатель статистики
.setting-stats .stat-number Числовое значение
.setting-stats .stat-label Подпись показателя
.setting-tabs Контейнер вкладок
.tabs-nav Навигация по вкладкам
.tab-link Ссылка-вкладка
.tab-link.active Активная вкладка
.tab-content Контент вкладки

Контент вкладок

Селектор Описание
.materials-grid Сетка материалов
.material-card Карточка материала
.material-image Изображение материала
.material-info Информация о материале
.material-title Заголовок материала
.material-excerpt Краткое описание
.material-meta Мета-информация
.materials-list Список материалов (для сюжетов)
.material-list-item Элемент списка
.status-badge Бейдж статуса

5. Примеры оформления

Изменение имени персонажа

css 
#char h1.char-name {
    font-size: 32px;
    color: #ff5500;
    text-transform: uppercase;
    letter-spacing: 2px;
}

Изменение ссылки на сеттинг

css 
#char .char-sett a {
    color: #00b159;
    font-weight: bold;
    text-decoration: none;
}

#char .char-sett a:hover {
    color: #008c44;
    text-decoration: underline;
}

Добавление рамки и скругления углов

css 
#char {
    border: 3px solid #ff5577;
    border-radius: 15px;
    background-color: #fff;
    padding: 20px;
}

Изменение таблицы характеристик

css 
#char .char-table .line-title {
    font-weight: bold;
    color: #8e44ad;
    width: 120px;
}

#char .char-table .line-value {
    color: #333;
    font-style: italic;
}

Оформление заголовков блоков

css 
#char .longtext h3.label {
    font-size: 20px;
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

Добавление фонового изображения

css 
#char {
    background-image: url("https://example.com/background.png");
    background-repeat: repeat;
    background-position: top center;
}

Фоновое изображение без повторения

css 
#char {
    background-image: url("https://example.com/background.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Оформление дат в хронологии

css 
#char .char-events .line-date {
    color: #3498db;
    font-weight: bold;
    font-style: italic;
}

#char .char-events .arrow {
    color: #e74c3c;
    font-weight: bold;
}

Оформление списка сюжетов

css 
#char ul.char-plot {
    list-style: none;
    padding: 0;
}

#char ul.char-plot li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

#char ul.char-plot li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #00b159;
}

#char ul.char-plot a {
    color: #333;
    text-decoration: none;
}

#char ul.char-plot a:hover {
    color: #00b159;
}

Оформление кнопки редактирования

css 
#char .btn-edit {
    background: #3498db;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
}

#char .btn-edit:hover {
    background: #2980b9;
}

Оформление статуса сюжета

css 
#plot .status-recruiting {
    background: #d4edda;
    color: #155724;
    padding: 4px 12px;
    border-radius: 20px;
}

#plot .status-in_progress {
    background: #d1ecf1;
    color: #0c5460;
    padding: 4px 12px;
    border-radius: 20px;
}

Оформление карточек участников

css 
#plot .participant-card {
    background: #f8f9fa;
    border-radius: 10px;
    transition: transform 0.3s;
}

#plot .participant-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

6. Изменение шрифтов

Вы можете использовать любые шрифты с Google Fonts. Пример подключения и использования шрифта Roboto: css 
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

#char {
    font-family: 'Roboto', sans-serif;
}

#char h1.char-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

#char .longtext h3.label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

Доступные кириллические шрифты на сайте:

Название шрифта Подключение
Roboto Slab 'Roboto Slab', serif
Philosopher 'Philosopher', sans-serif
Neucha 'Neucha', cursive
Underdog 'Underdog', cursive
PT Sans 'PT Sans', sans-serif (основной)
В конструкторе тем эти шрифты уже подключены и доступны для использования.

7. Получение цвета

Для получения нужного цвета используйте следующие сервисы:
  • Html Color Codes — удобный выбор цвета
  • ColorHexa — подробная информация о цвете
  • Adobe Color — подбор цветовых схем

Формат указания цвета:

Формат Пример Описание
HEX #ff5500 Шестнадцатеричный код
RGB rgb(255, 85, 0) Красный, зелёный, синий
RGBA rgba(255, 85, 0, 0.5) RGB с прозрачностью
Название red, blue, green Стандартные названия цветов
Значение из шести символов после # — то, что вам нужно для большинства случаев.

Полезные советы

Приоритет стилей

  1. Тема оформления — применяется первой
  2. Индивидуальный CSS — применяется поверх темы и имеет приоритет

Проверка синтаксиса

Перед сохранением кода проверьте:
  • Закрыты ли все фигурные скобки {}
  • Есть ли точка с запятой ; после каждого свойства
  • Правильно ли написаны названия селекторов

Отладка

Если CSS не применяется:
  1. Откройте консоль браузера (F12)
  2. Проверьте, нет ли ошибок в синтаксисе
  3. Убедитесь, что селектор соответствует элементу на странице
Творите, экспериментируйте и делайте своих персонажей уникальными!