Современная, быстрая и удобная система управления сайтом

Делаем шаблон на всю ширину браузера

Архив записейКомментарии: 18Просмотров: 18965

Текущий Default-шаблон MaxSite CMS имеет фиксированную ширину и общий контейнер для основного контента, шапки и подвала. Это достаточно типовой вариант современного блога. Существует еще один похожий вариант, где нет общего контейнера, а шапка и подвал растягиваются на всю ширину браузера.

Из-за того, что в default-шаблоне общий контейнер, сделать второй вариант, изменив только компоненты шапки и подвала, уже не получится. Здесь нужно исключить контейнер и позиционировать все блоки модульной сетки индивидуально. Покажу как это сделать.

В предыдущей статье Методика создания шаблона я обрисовал основные этапы, на них и будем основываться.

Сделаем копию default-шаблона

Нам нужен какой-то начальный каркас, пусть это будет default-шаблон. Назовём его default2 и переключимся на него. После этого в Настройки шаблона увидим, что часть опций выделена красным цветом.

Неопределенные опции отмечаются красным цветом

Это означает, что опции ещё не определены. Оптимальным было бы сразу выставить какие-то базовые, например для шапки указать компонент top1. На начальном этапе это не принципиально.

Модульная сетка

Первая задача — отработка модульной сетки. Это файл main/main.php. Остальные main-файлы нас пока не интересуют.

Открыв файл мы увидим, что общий контейнер это

<div class="my-all-container layout-center-wrap">
	<div class="wrap shadow bg-white"> 
...

Поскольку у нас UniCSS, то мы знаем, что layout-center-wrap — это и есть центрирующий блок модульной сетки. Этот блок требует наличия wrap-блока и мы видим, что для этого блока задана тень (класс shadow) и белый фон (bg-white).

Поскольку у нас общего контейнера быть не должно, то мы его просто удаляем (не забываем про закрывающие /div).

Обновляем страницу и видим, что сайт стал растягиваться на всю ширину браузера.

Общая структура получилась такая:

  • div.header — это компоненты шапки
  • div.main — это контент (div.content) и сайдбар (div.sidebar)
  • div.footer — это компоненты подвала

Теперь определим поведение каждого блока.

Блок контента обычно центрируют, чтобы он не «расползался». Для этого к div.main добавляем еще один класс layout-center. Блоки div.content и div.sidebar уже определены, так что там ничего и менять ну нужно.

C шапкой и подвалом поступим немного по-другому. Здесь есть очень простой вариант — вынести верстку на уровень компонента. То есть в модульной сетке вообще ничего не делаем чтобы никак не влиять на вложенные блоки компонентов.

Блок div.header уже готов, а в div.footer нужно удалить все оформительские классы, чтобы осталось только

<div class="footer"> ...

Фон браузера

Серый фон остался от исходного default-шаблона. Он прописан в my-template.less для BODY. Можно его там убрать, а можно кинуть в Настройках шаблона — CSS стили

body { background: white; }

Без разницы, как это будет сделано.

Компоненты

Как правило компоненты — это законченные модули для конкретного шаблона. Тот же top1 в общем-то расчитан только на default-шаблон. Если мы захотим его применить к нашему новому шаблону, то потребуется изменить верстку самого компонента.

Но, у нас не так давно появились универсальные компоненты: Any1 (и дубль Any2), File1 (и дубль File2) и Footer_any1, которые не создают своей html-разметки. Компоненты Any1, Any2 и Footer_any1 определяются своими опциями. То есть html-разметку нужно задавать прямо в админ-панели.

Компоненты File1 и File2 просто подключают указанный файл. Если это базовый элемент шапки, то удобно использовать именно эти компоненты. Тогда при обновлении шаблона достаточно заменить файл (или отредактировать через админ-панель в Файлах).

Компоненты any удобно использовать для дополнительных блоков с небольшим кодом.

Формально — это просто вопрос удобства. Пусть File1 будет в шапке, а File2 в подвале. В настройках, соответственно укажем custom/top.php и custom/bottom.php. Эти файлы, конечно же нужно предварительно создать.

Шапка

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

Шапка сайта

На что следует обратить внимание. В первую очередь — это модульная сетка шапки. Здесь два блока: родительский растягивается на всю ширину браузера и заливается синим цветом, а вложенный — центрируется. Поскольку у нас UniCSS, то это всё тот же layout-center-wrap.

<div class="layout-center-wrap clearfix bg-blue700">
	<div class="layout-wrap pad20-rl">
		...
	</div>
</div>

Здесь я указал pad20-rl для того, чтобы сделать отступ от краёв браузера. Точно такой же отступ задан и в main.php для сайдбара и контента.

Класс clearfix используется на случай, если внутри будет использован какой-то float-блок. Если такого нет, то класс можно убрать.

Фон задан через bg-blue700. В UniCSS масса предопределенных цветов, можно указать другой, а вообще их настройка осуществляется в less-файлах шаблона.

Внтури у нас будет два блока: название/слоган и меню. Для их размещения будем использовать flex-сетку. Что касается ширины ячеек, то можно задать их явно в процентах или пикселах, а можно упростить задачу и указать только «жадность» (grow). Тогда ширина будет подстроена под содержимое. Ещё можно было бы выровнять блоки по вертикали и задать отступы снизу и сверху.

Сразу же определяем адаптивность. Здесь достаточно лишь задать для блока меню для планшетов и телефонов 100% ширину.

Вот такой код будет на этом этапе:

<div class="layout-center-wrap clearfix bg-blue700">
	<div class="layout-wrap pad20-rl">
		<div class="flex flex-vcenter pad20-tb flex-wrap-tablet">
			<div class="flex-grow1">
				Название / слоган
			</div>
	
			<div class="flex-grow1 w100-phone">
				МЕНЮ
			</div>
		</div>
	</div>
</div>

Я рекомендую хорошо разобраться с этим кодом, посколько это фактически «типовой» и универсальный вариант для компонентов и модульных сеток.

Блок «Название/слоган» достаточно простой и состоит только из оформительских классов:

<div class="t200 bold"><a class="hover-no-underline" href="<?= getinfo('siteurl') ?>"><span class="t-white">MY</span><span class="t-blue200">SITE</span></a></div>
 
<div class="t90 t-gray400">Мой лучший сайт</div>

Здесь обращу внимание только на hover-no-underline, который убирает подчеркивание ссылки. Внутренние span явно задают цвет, так что тут всё просто. В UniCSS ссылками можно управлять разными способами, здесь же получился простой вариант.

Блок меню — это готовый компонент _menu. Его подключение стандартное.

<div class="b-right b-float-none-tablet">
	<?php if ($fn = mso_fe('components/_menu/_menu.php')) require($fn); ?>
</div>

Сам контейнер выравниваем вправо (b-right), а для планшетов его убираем (b-float-none-tablet).

Вёрстка самого меню находится в assets/less/component/menu.less. Именно в этом файле следует задавать размеры, цвета и прочее оформление меню.

Бонус: фиксированная вверху шапка

Если нужно зафиксировать шапку, то к контейнеру шапки (который layout-center-wrap) добавляем класс pos-fixed. По-умолчанию он как раз фиксируется вверху. Но, поскольку fixed-блок выводится из общего потока вывода браузера, то нужно добавить блок равный высоте шапки, который сместит нижний блок контента (div.main). Тут много вариантов, но проще всего добавить в конце компонента еще один div с нужной высотой (её нужно подобрать по дизайну).

<div class="layout-center-wrap clearfix bg-blue700 pos-fixed">
...
</div></div>
<div style="margin-top: 100px"></div>  

Я указал 100px. Отмечу, что следует сразу проверять такие вещи на малых экранах. Если для планшета или телефона должен быть другой отступ, то можно добавить еще div-блоки, управляя их видимостью.

Подвал

Подвал строится по точно такому же принципу, что и шапка. Точно также задаётся модульная сетка (layout), а в ней уже блоки во flex-сетке.

Если нужно вывести копирайты и статистику, как это обычно принято в MaxSite CMS, то отошлю к компоненту footer_any1/footer_any1.php. Посмотрите как в этом файле формируются переменные $copy_maxsite и $login. Если нужен такой функционал, то просто скопируйте этот код в свой компонент.

Комментариев: 18 RSS

1Илья ЗемсковСайт02-01-2016 20:47

Пожалуй описанный вариант шаблона стал даже чаще попадаться. Так что статья очень актуальная! Спасибо!

2Дмитрий14-01-2016 22:15

Но, у нас не так давно появились универсальные компоненты: Any1 (и дубль Any2), File1 (и дубль File2) и Footer_any1
....
Компоненты File1 и File2 просто подключают указанный файл.
...

Версия 0.93, подскажите, в опциях есть только Any1,2 и Footer_any1

File1 и File2 нет

где их искать?

4Виктор06-02-2016 00:20

MAX, подскажи пожалуйста, как можно сделать трехколоночный (с двумя сайдбарами) шаблон на основе представленного в этой статье?

6Денис Назаров06-12-2016 15:46

Допустим, я хочу сделать все страницы на всю ширину, а запись блога чтобы выводилась по старому. Как в этом случае быть?

7Денис Назаров06-12-2016 16:07

Сам спросил, сам нашел ))) надо просто сделать папку рядом с main.php, обозвать ее, к примеру, "обычный_wide", туда скопировать main.php, сделать его на всю ширину, а затем в настройках шаблона на вкладке "Шаблоны вывода" вывод главной задать "обычный_wide".

Крутяк )))

8Денис Назаров06-12-2016 16:18

Но! Однако, при этом получается такой "прикол" - использую для рабочего сайта и рабочая часть достаточно обширна. Хотел сделать так - главная на всю ширину, запись выводить по старому, фиксированной ширины, остальные страницы, которые используются для работы, чтобы тоже были широкими. В настройках шаблона делаю "по умолчанию" - "обычный_wide", "главная" - "обычный_wide", все остальные, включая "Шаблон вывода записей" - обычный. Однако получаю совсем не то, на что рассчитывал - а именно - все страницы становятся на всю ширину. Но я хочу вывод записей в обычном виде! Опять делать подпапку? Что тогда подразумевается под "Шаблон вывода по умолчанию"?

10Валерий26-10-2018 13:53

Максим помогите пожалуйста. Шаблон MAX Zmey, если выбрать левый сайдбар, то див контента при загрузки сдвигается на место сайдбара. Когда контент загрузится, то он перемещается на свое место (направо) и затем загружается сайдбар на своем левое местоположение. Это происходит тогда, кода статья длинная. Как устранить данное дерганье дива контента влево?

11Максим26-10-2018 14:57

Это из-за того, что в html-коде вначале прописан контент, а после сайдбар. При медленном соединении как раз такое поведение корректное, поскольку посетитель сразу видит основную часть сайта.

Изменение порядка формируется в main.php в свойстве order (класс flex-order1). Вы можете в коде поменять div-блоки, чтобы сайдбар оказался вначале, а через order уже поправить поведение блоков.

12Валерий26-10-2018 17:25

Все понял.

Например если шаблон трехколоночный, то делаем так. Сначала пишем

див 1 сайдбар flex-order1

див 2 сайдбар flex-order3

див контент flex-order2

То есть сначала грузим сайдбары потом контент это по дивам. А располагаться на страннице они будут согласно flex-order. То есть слева это садйбар 1, в центре контент, справа сайдбар 2.

Правильно я понял?

14Валерий26-10-2018 19:12

Максим, код сюда не грузится. Вот скрин кода в main.php.. https://i.postimg.cc/t4rdhrws/2018-10-26-20-08-15.jpg

Помогите, чтобы сайдбар не дергался.

15Максим26-10-2018 21:20

Вам нужно разместить блоки сайдбаров в коде по своим местам: сайдбар, контент, сайдбар. Классы flex-orderX будут уже не нужны (они для смена порядка). Классы pad задачют отступы, w — ширина. Это UniCSS — посмотрите, разберётесь.

16Валерий26-10-2018 21:32

Максим

Но классы flex-order(1,2,3)-tablet нужны, если сжать браузер и не проставить эти классы, то в маленькой версии сайта, сначала будет сайдбар 1 (вверху страницы), потом контент, потом сайдбар2 (после контента).

Я нашел причину, это рекламный блок от яндекса. При загрузке происходит сдвиг сайдбара. Без этого блока, никуда ничего не смещается.

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

18Валерий27-10-2018 13:18

Решил проблему другим способом. Теперь загрузка рекламы происходит после загрузки страницы сайта. Ни чего не дергается, спасибо за уделенное время.

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)