Стили и оформление

У каждого сайта на платформе с самого начала есть готовое оформление стартовых фреймов: шрифты, цвета и размеры заголовков. Менять его можно двумя способами. Первый — поменять CSS-переменные или дописать собственный CSS сайта: так меняется оформление всех страниц сразу. Второй — изменить сам фрейм вместе с его стилями, если нужно переделать конкретный блок.

Во всех примерах API — https://onpress.pro/api/v2, SITE — id сайта (SITE_ID), OP_TOKEN — токен op_XXXX. Полный перечень эндпоинтов — в справочнике API.

CSS-переменные

Каждая переменная отвечает за одну вещь, поэтому чтобы, например, перекрасить сайт в фирменный цвет, достаточно поменять одно значение. Самые частые:

Переменная	Что меняет	Пример значения
`color.primary`	фирменный цвет кнопок и акцентов	`"#0055ff"`
`color.background`, `color.text`	цвет фона и текста	`"#ffffff"`, `"#111111"`
`color.link`	цвет ссылок	`"#0055ff"`
`h1.size` … `h6.size`	размер заголовков, в пикселях	`40`
`h1.font` … `h6.font`, `paragraph.font`	шрифт заголовков и текста	`"Inter"`
`paragraph.size`	размер основного текста	`16`
`radius.default`	скругление углов	`"8px"`

Прочитать переменные

GET /data/css.variables отдаёт полный список переменных с текущим значением, значением темы по умолчанию и именем в CSS. Например:

curl -s "$API/site/$SITE/data/css.variables" -H "Authorization: Bearer $OP_TOKEN"

Изменить переменные

PATCH /data/css.variables меняет только переданные переменные, и новые значения сразу появляются на всех страницах сайта. Например, фирменный цвет, размер H2 и ширина контейнера:

curl -s -X PATCH "$API/site/$SITE/data/css.variables" \
  -H "Authorization: Bearer $OP_TOKEN" -H 'Content-Type: application/json' \
  -d '{"variables": {"color.primary": "#0055ff", "h2.size": 40, "layout.container_width": "1200px"}}'

Сбросить переменные

DELETE /data/css.variables возвращает к значениям темы перечисленные переменные, а без тела — все сразу. Например, вернуть фирменный цвет и размер H2:

curl -s -X DELETE "$API/site/$SITE/data/css.variables" \
  -H "Authorization: Bearer $OP_TOKEN" -H 'Content-Type: application/json' \
  -d '{"variables": ["color.primary", "h2.size"]}'

Собственный CSS

Собственный CSS подключается после стилей темы и перебивает их без !important. GET /data/css отдаёт весь лист, а PUT /data/css заменяет его целиком, поэтому прочитайте лист, поправьте и отправьте полностью. Например, лист из одного правила для шапки:

curl -s -X PUT "$API/site/$SITE/data/css" \
  -H "Authorization: Bearer $OP_TOKEN" -H 'Content-Type: application/json' \
  -d '{"css": ".site-header{background:#0055ff}"}'

Посмотреть текущий лист можно и в консоли, в разделе «CSS» (/dashboard/css). Чтобы вернуть сайт к стилям темы, удалите лист через DELETE /data/css.

Вопросы и ответы

Что менять: переменные или собственный CSS?

Цвета, шрифты и ширины, которыми пользуется тема, меняйте переменными: так они обновятся везде сразу. Разметку своих фреймов оформляйте собственным CSS — её классы знаете только вы.

Почему изменения не видны на сайте?

После записи переменных или CSS страницы пересобираются сами. Если страница всё равно старая, обновите её без кэша браузера: Cmd+Shift+R.

Где коды ошибок?

В справочнике API. Ответ с ошибкой сам называет причину.