Работа с шаблоном Joomla: разбор на живом примере

Страница статьи в Joomla 5.x выглядит как стандартный материал Cassiopeia, а вам нужно превратить её в аккуратную посадочную страницу: ограничить ширину текста, выделить заголовок и добавить заметный блок действия. Быстрее всего это сделать через user.css, но для разметки одного CSS мало. На живом примере разберём три уровня изменения и выберем тот, который переживёт обновление Joomla.

Задача: изменить страницу статьи в Cassiopeia

Представим сайт небольшой студии. На нём есть статья «Аудит интернет-магазина», открытая отдельным пунктом меню. Требования такие:

• текст статьи должен занимать не всю ширину экрана;
• заголовок нужно сделать крупнее и добавить под ним акцентную линию;
• внутри статьи нужен блок с призывом оставить заявку;
• изменения нельзя вносить в файлы ядра Joomla или оригинального шаблона.

Работаем с Joomla 5.x и штатным шаблоном Cassiopeia. Названия вкладок могут немного отличаться в минорных версиях и в русской локализации, но логика остаётся той же.

Главное правило Joomla-шаблонов: CSS меняет внешний вид, override меняет HTML, а дочерний шаблон помогает собрать собственную оболочку без правки оригинальных файлов.

Сноска. Override — переопределение layout-файла компонента. Joomla берёт копию разметки из шаблона вместо файла, который поставляется вместе с компонентом.

Три способа изменить Cassiopeia

У задачи есть три решения. Они не равноценны: чем глубже изменение, тем больше контроля и тем выше цена сопровождения.

Для нашего примера разумный порядок такой: сначала добавить класс странице через пункт меню, затем оформить её в user.css. Override понадобится только для блока заявки, если его нельзя собрать средствами редактора Joomla.

Шаг 1. Дайте странице собственный класс

Откройте в административной панели пункт меню, который ведёт на нужную статью. На вкладке с дополнительными параметрами найдите поле Page Class или «Класс страницы» и укажите:

case-study

Сохраните пункт меню и откройте страницу в браузере. В инструментах разработчика проверьте элемент body: Joomla должна добавить класс case-study. Это важная проверка. Без неё CSS начнёт влиять на все статьи сайта.

Шаг 2. Добавьте стили в user.css

В Cassiopeia пользовательские стили хранятся в файле user.css внутри каталога шаблона. В Joomla 5.x его можно создать или открыть через редактор шаблонов в административной панели. Если работаете по FTP или через Git, ориентируйтесь на путь:

media/templates/site/cassiopeia/css/user.css

Добавьте фрагмент ниже. Он меняет только страницу с классом case-study, а не весь сайт.

.case-study .com-content-article {
  max-width: 860px;
  margin-inline: auto;
}

.case-study .com-content-article__title {
  max-width: 760px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 4px solid #2f6fed;
}

.case-study .com-content-article__body {
  font-size: 1.08rem;
  line-height: 1.75;
}

.case-study .article-cta {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: #eef4ff;
}

@media (max-width: 700px) {
  .case-study .com-content-article {
    padding-inline: 1rem;
  }

  .case-study .com-content-article__title {
    font-size: 2rem;
  }
}

После сохранения очистите кеш Joomla и кеш браузера, затем откройте страницу в приватном окне. Заголовок должен получить синюю нижнюю границу, а текст — стать уже. Если изменился весь сайт, класс case-study стоит не на том элементе или селектор написан без него.

Шаг 3. Добавьте блок заявки без override

Если блок можно разместить в самом тексте статьи, начните с этого варианта. В редакторе Joomla переключитесь в режим исходного HTML и добавьте:

<aside class="article-cta">
  <strong>Нужен такой же аудит?</strong>
  <p>Оставьте заявку через форму на странице контактов.</p>
  <p><a href="/contacts">Перейти к форме</a></p>
</aside>

После публикации проверьте две вещи: блок отображается внутри статьи, а ссылка действительно ведёт на существующий пункт меню. Если редактор удаляет атрибуты или сам тег aside, это ограничение редактора или фильтрация HTML. Тогда переносите блок в override либо используйте модуль Joomla.

Когда нужен override шаблона

Override оправдан, если блок должен появляться автоматически, а редакторы не должны вставлять HTML вручную. Например, для всех материалов категории «Кейсы» можно добавить единый призыв после текста статьи.

Как создать копию layout

1. В административной панели откройте системные шаблоны и выберите Cassiopeia.
2. Создайте override для компонента материалов Joomla — com_content — и вида статьи.
3. Откройте созданную копию файла default.php. Joomla разместит её в каталоге шаблона, а не в ядре компонента.
4. Найдите место сразу после вывода основного текста статьи и добавьте блок с классом article-cta.

В существующем layout заголовок и текст уже выводятся кодом Joomla. Не переписывайте весь файл ради одного блока: скопируйте штатный layout и измените минимальный участок.

<aside class="article-cta">
  <strong>Нужен аудит магазина?</strong>
  <p>Опишите задачу, и мы ответим в течение рабочего дня.</p>
  <a class="btn btn-primary" href="/contacts">Оставить заявку</a>
</aside>

Проверка результата: откройте две статьи — одну из нужной категории и одну обычную. Если блок появляется в обеих, условие добавлено не в тот layout или не ограничено типом меню, категорией либо параметром материала.

Что ломается чаще всего

• Стили не применяются. Проверьте, что файл называется именно user.css, сохранён в шаблоне сайта, а кеш Joomla и браузера очищен.
• Класс страницы не найден. Убедитесь, что статья открывается через тот пункт меню, где задан case-study. При прямом переходе по URL настройки пункта меню могут не использоваться.
• Изменения исчезли после обновления. Если правили файл в каталоге компонента или оригинального шаблона, это был неправильный уровень. Перенесите правку в user.css, override или дочерний шаблон.
• Override работает, но страница выглядит сломанной. Сравните копию layout со свежей версией Cassiopeia после обновления Joomla. Структура переменных и разметки могла измениться.
• На мобильном экране появляется горизонтальная прокрутка. Ищите фиксированную ширину, длинные URL и изображения без ограничения по ширине. Проверяйте страницу в инструментах разработчика на ширине около 360–390 пикселей.

Когда переходить на дочерний шаблон

Дочерний шаблон нужен не для каждой цветной кнопки. Он оправдан, когда вы регулярно меняете файлы Cassiopeia, хотите хранить шаблон в Git или собираете отдельную визуальную систему для проекта. В дочернем шаблоне собственные файлы и overrides отделены от оригинального шаблона, поэтому обновлять основу безопаснее.

Для одной страницы из примера дочерний шаблон будет избыточен. Достаточно user.css и, при необходимости, override статьи. Если же таких страниц десятки, а правила становятся общими для сайта, переносите стили и layout в производный шаблон.

Что делать дальше

После публикации проверьте не только внешний вид, но и поведение страницы: мобильную ширину, контраст текста, работу ссылки, кеш и HTML в исходном коде. В продакшене следите за тем, не появились ли дублирующие классы и не начал ли override влиять на материалы другого типа. Следующим шагом стоит вынести повторяющийся призыв в модуль Joomla, если его нужно редактировать без доступа к layout-файлам.