> For the complete documentation index, see [llms.txt](https://docs.johncms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.johncms.com/10.0/shablony/izmenenie-stilei-shablona.md).

# Изменение стилей шаблона

## Что понадобится

Скачайте и установите Node.js на ваш компьютер. После установки перезагрузите компьютер.\
Установите JohnCMS на своём компьютере, если ещё не установили.

## Где лежат стили и скрипты

Исходники стилей и скриптов темы лежат в папке **themes/имя\_темы/src**:

* **src/scss** — стили сайта, главный файл `app.scss` подключает остальные;
* **src/js** — скрипты сайта, главный файл `app.js`;
* **src/admin** — то же самое для админ-панели.

Собранные файлы попадают в **public/build**, потому что корнем сайта (document root) является папка **public**: браузер должен получать только собранные файлы, а исходники ему не нужны.

Шаблон не указывает путь к собранным файлам — он называет область сборки:

```twig
{{ vite('public') }}
```

Какой именно файл подставить, система берёт из манифеста темы. В файле **theme.php** есть раздел `entries`:

```php
'entries' => [
    'public' => 'themes/default/src/js/app.js',
    'admin'  => 'themes/default/src/admin/js/app.js',
],
```

Благодаря этому макет темы **default**, унаследованный вашей темой, загрузит именно вашу сборку. А тема, у которой своих исходников нет, просто не указывает `entries` и получает сборку родительской темы.

## Своя тема со своими стилями

1. Создаём папку **themes/my\_theme** и копируем в неё из темы **default** папку **src**.
2. Создаём в ней файл **theme.php**:

```php
<?php

declare(strict_types=1);

return [
    'name'    => 'My theme',
    'parent'  => 'default',
    'entries' => [
        'public' => 'themes/my_theme/src/js/app.js',
    ],
    'settings' => [],
];
```

Сборщик править не нужно: **vite.config.js** сам читает `entries` из манифестов всех тем, поэтому новая тема попадает в сборку сразу, как только у неё появился `theme.php`. Если указанного в `entries` файла не существует, сборка остановится с ошибкой и назовёт путь.

3. Устанавливаем зависимости и запускаем сборку. Откройте командную строку, перейдите в папку с установленным JohnCMS и выполните:

```bash
npm install
npm run build
```

`npm run build` собирает и минифицирует файлы — это то, что нужно выгружать на сайт.\
Во время работы над темой удобнее `npm run dev`: сборщик следит за изменениями и обновляет страницу сам.

4. Заходим в админку, в системные настройки, и выбираем нашу тему в списке.

## Меняем цвет бокового меню

Откроем файл **themes/my\_theme/src/scss/app.scss** — это главный файл стилей, в нём подключаются все остальные. Найдём строки:

```scss
// Левое меню
@import "sidebar";
```

Эта строка подключает файл **sidebar.scss** из той же папки. Откроем его — там почти привычный CSS, но с вложенностью селекторов и другими возможностями SCSS.

Цвет меню задан в начале файла:

```scss
background-color: #ffffff;
```

Меняем код цвета и сохраняем файл. Если запущен `npm run dev`, изменения появятся на сайте сразу; иначе выполните `npm run build`.