Бесплатная CMS для вашего сайта Разумная альтернатива WordPress

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

02-01-2016Reading time ~ 6 min.Roadmap 19763

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

Related Posts
Comments (18) RSS
1 Илья Земсков 2016-01-02 20:47:53

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


2 Дмитрий 2016-01-14 22:15:49
Но, у нас не так давно появились универсальные компоненты: Any1 (и дубль Any2), File1 (и дубль File2) и Footer_any1

....

Компоненты File1 и File2 просто подключают указанный файл.

...

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

File1 и File2 нет

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


3 Максим 2016-01-15 12:21:20 admin

В dev-версии.


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

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


5 Максим 2016-02-06 10:48:58 admin

Определить его в main.php.


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

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


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

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

Крутяк )))


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

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


9 Максим 2016-12-06 19:57:30 admin

По-умолчанию это и есть основной main.php.


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

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


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

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

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


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

Все понял.

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

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

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

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

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

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


13 Максим 2018-10-26 18:21:55 admin

Да, верно.


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

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


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

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


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

Максим

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

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

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


17 Максим 2018-10-26 22:40:24 admin

Можно указать в style свойство max-width.


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

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

Leave a comment!