Ширина шаблона Cassiopeia

Переход на Joomla 4 с 3.10 в конце 2021 года дело не на 100% благодарное, но полезное, ибо жениться на четверке придется всё равно, почему бы это не сделать по молодости. Лично для меня основной косяк получился с сожжением шаблона Protostar и появления Cassiopeia, для чего пришлось отчасти переписывать стили в угоду своих мещанских интересов.

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

Стили контейнера Cassiopeia

Я сжимал центральный контейнер сайта до 80%, отчего он обрел приятный взгляду вид, не потеряв практичности. Для этого пришлось:

  1. Включить стационарный стиль шаблона (не резиновый).
  2. Выставить ширину 80% классам .container-header, .site-grid и .footer.
  3. Чуть поколдовать над мобильной версией, чтобы со смартфона не было отступов по краям.

Настройки шаблона Кассиопея

По старту включим стационарные стили, для чего пройдем путь:

Система – Стили сайта – Кассиопея – Дополнительные параметры.

Там дел на затяжку – надо включить:

  1. Тип контейнера Статический.
  2. Липкая шапка Нет.
  3. Иконка Наверх Да.

За папку можно поспорить, но недосуг в столь поздний час.

Шаблон Joomla 4 стили

Правим templates.css

Теперь основное, правив стили templates.css с учетом наших 80%-ых желаний а-ля Лукашенко на выборах.

За шапку отвечает класс .container-header, в который и дописываем:

  width: 80%;
 margin: 8%;
  margin-top: 1%;
  margin-bottom: 1%;.

Если ограничиться только width, то контейнер уедет влево, посему выравниваем его с помощью margin.

Подобные манипуляции проводит с контейнером .footer, для которого дублируем ширину и отступы, а вот для .site-grid сразу идем с учетом отображения на мобильных:

@media (min-width: 970px) {
.site-grid {
width: 80%;
border: 2px double gray;
margin: 8%;
>margin-top:1%;
margin-bottom:1%; }

Параллельно сужаем до 80% при расширении более 970 пиксейлей контейнеры:

  1. .container-header .navbar-brand img.
  2. .container-header .container-nav.

Иначе наша шапка будет горько плакать, ибо состоит из нескольких блоков. Для них прописываем стили width: 80% в пределах @media (min-width: 970px) с соответствующими основному контейнеру размерами margin.

Расширение 971 пиксель

При таком раскладе у нас получается:

  • Основной контейнер site-grid и его сородичи по шапке container-header navbar-brand img и container-header .container-nav будут иметь 80% ширины для устройств больше 970 px,
  • container-header и .footer везде будут 80%.

При желании можно с этими стилями также поиграть для полноформатного отображения в версиях на мобильных, но это не критично. Например, допишите width: 100%; в контейнер

@media (max-width: 991.98px) {
.container-header {
position: relative !important;
width: 100%;
}

Если счастье нужно полное и вы хотите, чтобы футер был 100% в мобильной версии, то пропишите в самом низу файла templates.css:

@media (max-width: 991.98px) {
.footer {
width: 100%;}
}

Теперь для десктопа весь сайт с футером и шапкой будет иметь ширину 80%, а в мобильной шаблон растенется на 100%.

Также рекомендую по старту на Joomla 4 привести в порядок меню, вытянув его по горизонтали для десктопной версии сайта на шаблоне Cassiopeia. Отмечу, что сделать меню горизонтальным для широких дисплеев можно средствами самого движка, без нагрузки посторонних компонентов.