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

Просмотров: 7936Комментарии: 9
Новости

Текущий 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. Если нужен такой функционал, то просто скопируйте этот код в свой компонент.

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

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

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

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

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

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

File1 и File2 нет

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

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

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

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

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

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

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

Крутяк )))

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

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

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

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

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

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

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.