Переход на Joomla 4 с 3.10 в конце 2021 года дело не на 100% благодарное, но полезное, ибо жениться на четверке придется всё равно, почему бы это не сделать по молодости. Лично для меня основной косяк получился с сожжением шаблона Protostar и появления Cassiopeia, для чего пришлось отчасти переписывать стили в угоду своих мещанских интересов.
Сегодня будем в муках рождать ширину сайта или основных контейнеров Cassiopeia, чтобы сайт не растягивался во весь экран на компьюетере, как проститутка в рабочий вечер.
Стили контейнера Cassiopeia
Я сжимал центральный контейнер сайта до 80%, отчего он обрел приятный взгляду вид, не потеряв практичности. Для этого пришлось:
- Включить стационарный стиль шаблона (не резиновый).
- Выставить ширину 80% классам .container-header, .site-grid и .footer.
- Чуть поколдовать над мобильной версией, чтобы со смартфона не было отступов по краям.
Настройки шаблона Кассиопея
По старту включим стационарные стили, для чего пройдем путь:
Система – Стили сайта – Кассиопея – Дополнительные параметры.
Там дел на затяжку – надо включить:
- Тип контейнера Статический.
- Липкая шапка Нет.
- Иконка Наверх Да.
За папку можно поспорить, но недосуг в столь поздний час.
Правим 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 пиксейлей контейнеры:
- .container-header .navbar-brand img.
- .container-header .container-nav.
Иначе наша шапка будет горько плакать, ибо состоит из нескольких блоков. Для них прописываем стили width: 80% в пределах @media (min-width: 970px) с соответствующими основному контейнеру размерами margin.
При таком раскладе у нас получается:
- Основной контейнер 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. Отмечу, что сделать меню горизонтальным для широких дисплеев можно средствами самого движка, без нагрузки посторонних компонентов.