# Свои стили сайта

Клиентская часть МаркетПро поставляется собранной, исходных Vue-компонентов на сервере нет — переопределить стиль правкой шаблона не получится. Для этого есть отдельный файл со своими стилями: он подключается к сайту последним и перекрывает стандартные правила.

Сначала посмотрите, нельзя ли добиться нужного вида штатными настройками: цвета задаются в блоке **Цветовая схема** ([Цветовая схема](/s/marketpro/doc/cvetovaya-shema-gqyIvrYMCT)), шрифт — там же. Свои стили нужны там, где настроек не хватает.

## Где править файл

Откройте **ASTDESIGN → МаркетПро → Настройки**, вкладка **Внешний вид**, блок **Цветовая схема и стили**, строка **Свои стили сайта** — нажмите **изменить**. Откроется редактор файла прямо в админке; после правок нажмите **Сохранить**.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS8zODMwZDQxNy1hYjc1LTQ3ZGUtYjNlYi00M2I1OTlmM2NjODgvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.cY5fnCPL7HMmK87qvOO1654XvVGj4BgNzoRaAdsdGG0 " =1328x730")

Тот же файл лежит на сервере по пути `/static/custom.css` — его можно править через файловый менеджер админки, WinSCP или любой привычный редактор.

## Как писать селекторы

Решение использует CSS Modules: к имени каждого класса добавляется хеш, и выглядит класс так:

```css
components-header-header-main-line-logo-vwqoh
```

**Хеш меняется при обновлениях решения.** Стиль, привязанный к полному имени класса, после очередного обновления перестанет работать. Поэтому вместо

```css
div.components-header-header-main-line-logo-vwqoh { /* стили */ }
```

пишите так:

```css
div[class*='components-header-header-main-line-logo-'] { /* стили */ }
```

Такой селектор переживёт смену хеша.

Имя класса удобно смотреть в браузере: нажмите `F12`, включите выбор элемента (`Ctrl + Shift + C`) и щёлкните по нужному месту страницы.


:::info
**Свои стили — это ваша ответственность.** Мы не проверяем их при выпуске обновлений: вёрстка блока может измениться, и правило перестанет попадать в цель. После каждого обновления решения бегло проверяйте страницы, которые вы правили.

:::

## Когда изменения появятся на сайте

Пересборка сайта здесь не нужна: файл отдаётся сервером и подключается к странице отдельной ссылкой уже после загрузки. Изменения видны сразу — достаточно обновить страницу, при необходимости с очисткой кеша браузера (`Ctrl + F5`).

Если стиль не применился, откройте `F12` и проверьте, дошло ли правило до страницы и не перекрывает ли его стандартное правило с большей специфичностью.

---

**Documents**

- [Установка решения](https://docs.astdesign.ru/s/marketpro/doc/ustanovka-resheniya-Z8Q6r79liU)
- [FAQ перед покупкой](https://docs.astdesign.ru/s/marketpro/doc/faq-pered-pokupkoj-HPgKP7mWDT)
- [Общая настройка](https://docs.astdesign.ru/s/marketpro/doc/obshaya-nastrojka-Io6HZQaGXf)
- [Шаблон](https://docs.astdesign.ru/s/marketpro/doc/shablon-ylLAFZV3o8)
- [Главная страница](https://docs.astdesign.ru/s/marketpro/doc/glavnaya-stranica-7PwYozaVVo)
- [Магазины (склады)](https://docs.astdesign.ru/s/marketpro/doc/magaziny-sklady-7rEEZJrA45)
- [Каталог](https://docs.astdesign.ru/s/marketpro/doc/katalog-FpnYzZr900)
- [Поиск](https://docs.astdesign.ru/s/marketpro/doc/poisk-xsDdFVh5h0)
- [Текстовые страницы](https://docs.astdesign.ru/s/marketpro/doc/tekstovye-stranicy-jVtNXZv3T5)
- [Реклама и маркетинг](https://docs.astdesign.ru/s/marketpro/doc/reklama-i-marketing-iZkaCoxr5b)
- [Региональность](https://docs.astdesign.ru/s/marketpro/doc/regionalnost-bCuM9AOBNO)
- [Корзина](https://docs.astdesign.ru/s/marketpro/doc/korzina-Mh27pZA7v9)
- [Оформление заказа](https://docs.astdesign.ru/s/marketpro/doc/oformlenie-zakaza-VyvQjOQxZo)
- [Авторизация](https://docs.astdesign.ru/s/marketpro/doc/avtorizaciya-5HwEb1oDJG)
- [SEO и аналитика](https://docs.astdesign.ru/s/marketpro/doc/seo-i-analitika-d1Hw6c4YAM)
- [Уведомления](https://docs.astdesign.ru/s/marketpro/doc/uvedomleniya-SKDyjYg14J)
- [Мобильное приложение](https://docs.astdesign.ru/s/marketpro/doc/mobilnoe-prilozhenie-F5E0hT7TnN)
- [Обновление решения](https://docs.astdesign.ru/s/marketpro/doc/obnovlenie-resheniya-RRRgtxV5uH)
- [Для разработчика](https://docs.astdesign.ru/s/marketpro/doc/dlya-razrabotchika-WJePeJCmpy)
- [Интеграции](https://docs.astdesign.ru/s/marketpro/doc/integracii-D3DqjYOZYm)
- [Что делать, если что-то не работает](https://docs.astdesign.ru/s/marketpro/doc/chto-delat-esli-chto-to-ne-rabotaet-Q8L8sTVJF8)