VarCloud VarCloud
Настройка сайта

Написание своего CSS

Настройка оформления сайта без редактирования файлов темы.

Любой сайт может добавить свой CSS без изменения файлов темы.

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

  2. Найдите поле Свой CSS ближе к низу страницы.

  3. Пишите обычный CSS — теги <style> не нужны, только сами правила:

    css
    header {
        background: #111;
    }
    
    h1 {
        font-family: Georgia, serif;
    }
    
  4. Нажмите Сохранить настройки.

Поле Custom CSS в настройках сайта
Поле Custom CSS

Ваш CSS подключается на каждой странице сайта после стилей самой темы — поэтому он может переопределять цвета, шрифты, отступы и другие детали оформления темы по умолчанию. Так как он загружается последним, !important обычно не требуется, хотя доступен, если какое-то более специфичное правило темы всё же побеждает.

Советы

  • Откройте сайт в браузере, кликните правой кнопкой по элементу и выберите Просмотреть код, чтобы найти нужный класс или элемент — каждая тема использует обычные HTML-теги и понятные Tailwind-классы (например, header, .bg-white, .text-gray-900), запоминать особые имена классов не нужно.
  • Изменения применяются сразу же при следующей загрузке страницы — кеш сбрасывать не нужно, сборка не требуется.
  • Это обычный CSS, а не полноценное переопределение темы — если нужно изменить саму HTML-структуру, а не только оформление, потребуется новый файл темы, что пока недоступно в самостоятельном режиме.