Шаблоны для новичков. Урок 13. Лого и меню с поиском

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

Второй компонент у нас занимает всю ширину браузера, поэтому его структура по сути повторит структуру первого компонента.

Напомню, что второй компонент это файл header-logo.php. В default-шаблоне уже есть похожий компонент (logo-links.php). Мы скопируем этот код в свой компонент.

<div class="header-logo">
	<div class="wrap">
		<div class="left r1">
			<?php
			$logo = getinfo('stylesheet_url') . 'images/logos/' . mso_get_option('default_header_logo', 'templates', 'logo01.png');
			
			if (!is_type('home')) echo '<a href="' . getinfo('siteurl') . '">';
				
			echo '<img class="left" src="' . $logo . '" alt="' . getinfo('name_site') . '" title="' . getinfo('name_site') . '">';
			
			if (!is_type('home')) echo '</a>';


			echo '
				<div class="name_site">' . getinfo('name_site') . '</div>
				<div class="description_site">' . getinfo('description_site') . '</div>';

			?>
		
		</div><!-- div class=r1 -->
		
		<div class="right r2">
			<?php if (function_exists('ushka')) echo ushka('header-logo2'); ?>
		</div><!-- div class=r2 -->
		
		<div class="clearfix"></div>
		
	</div>
</div>

HTML-структура «стандартная»: общий блок, в нём wrap-блок, в нем уже два плавающих блока div.r1 и div.r2.

Для вывода данных используем PHP. Переменная $logo формируется из пути шаблона к изображениям с лого и опции default_header_logo, в которой содержится имя файла логотипа. Опция уже определена в options-template.ini, поэтому задавать её отдельно не нужно.

Далее формируем тэг IMG, причем, если это не главная страница, то обрамляем изображение в ссылку на главную страницу сайта.

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

Блок div.r2 содержит только код вывода ушки.

Для оформления компонента в CSS нужно будет только указать ширину первого блока.

div.header-logo {
	div.wrap {
		div.r1 {
			width: 50%;
		}
	
		div.r2 {
	
		}
	}
}

Для первого я задал ширину 50% и сделал пустую заготовку для второго. На текущем этапе я просто не знаю какая реально потребуется ширина.

В качестве цветового решения компонента я добавил темно-синий фон и светлые буквы. Следует отметить, что default-шаблоне (style-all.css, mso-style.less) уже есть стили для

• div.logo-links
• div.name_site
• div.description_site

Поэтому на текущем этапе они нас устраивают. Остается только цвет.

div.header-logo {

	background: #193C70;
	color: #EBEBEB;
	
	div.wrap {
		div.r1 {
			width: 50%;
		}
	
		div.r2 {
	
		}
	}
} 

«Облагородим» фон

Сейчас я расскажу о приёмах, которые позволяют немного разнообразить фон. Самый простой способ - это добавить градацию. Указывается начальный цвет и конечный. В less-хелперах есть микс .background_gradient().

div.header-logo {
	.background_gradient(#193C70, #214A88);
...

Хелпер .background_gradient() формирует стиль CSS3 background-image со всеми кросбраузерными префиксами, а для IE использует filter.

Второй способ - это использовать прозрачную текстуру. То есть указывается и фон блока и его текстура. Создается видимость «пупырчатости», «решетки», «линейки» и т.п. Здесь гланое следить за тем, чтобы текстура была в формате PNG24. Именно он обеспечивает корректную прозрачность.

Можно сделать такую текстуру самостоятельно, но я обычно ищу уже готовые файлы в Интернете. Вот пример такого совмещения:

div.header-logo {
	background: #193C70 url("../images/patterns/pattern1.png");
...

Ну и последний вариант - обычная фоновая картинка. В default-шаблоне в images/patterns уже есть примеры таких фонов (они используются в css-профилях). Для примера я подключил файл bg-gray.png.

Какой именно вариант использовать, зависит от дизайна сайта.

Третий компонент: меню + поиск

Третий компонент строится по той же HTML-схеме, что и первые два. Файл header-menu.php

<div class="header-menu">
	<div class="wrap">
		<div class="left r1">
			меню
		</div><!-- div class=r1 -->
		
		<div class="right r2">
			поиск
		</div><!-- div class=r2 -->
 
		<div class="clearfix"></div>
	</div>
</div>

Этот компонент у нас будет содержать главное меню, которое полностью готово в компоненте menu.php. Следовательно, всё, что нам нужно, так это подключить файл в div.r1.

<div class="header-menu">
	<div class="wrap">
		<div class="left r1">
			<?php require('menu.php') ?>
		</div><!-- div class=r1 -->
...

С формой поиска чуть сложней, поскольку у нас нет её заготовки. Точнее она есть в плагине search_form. Я привожу сразу готовый код.

...
		<div class="right r2">
			
			<form class="fform" name="f_search" method="get" onsubmit="location.href='<?= getinfo('siteurl') ?>search/' + encodeURIComponent(this.s.value).replace(/%20/g, '+'); return false;">
			<p>
			<span><input type="text" name="s" value="" placeholder="Что ищем?" required></span>
			<span class="fsubmit"><input type="submit" name="Submit" value="Поиск"></span>
			<p>
			</form>
	
		</div><!-- div class=r2 -->
...

Отмечу лишь несколько моментов. Прежде всего - форма имеет класс fform, а ячейка span.fsubmit специально для кнопки submit. Это предопределенные классы из default-шаблона, благодаря которому форма верстается по специальным правилам (это нововведение MaxSite CMS в 0.645 (см. mso-forms.less)). Для полей мы используем placeholder (подсказка) и required (обязательное поле) - это из HTML5.

Теперь очередь CSS-стилей. Для начала определимся с шириной блоков. Пусть поиск занимает 270px, как и сайдбар. Для ячейки кнопки зададим ширину 60px, остальное будет сделано автоматом (в этом и есть особенность использования form.fform).

div.header-menu {
 
	background: #15325D;
	
	div.wrap {
		div.r1 {
			width: 690px;
		}
	
		div.r2 {
			width: 270px;
			
			form.fform {
				span.fsubmit {
					width: 60px;
					input {width: 100%}
				}
			}
		}
	}
}

Обратите внимание, что фон компонента немного отличается от фона меню. Это очевидно, ведь для меню мы не задали стили.

За меню отвечает секция МЕНЮ ВЫПАДАЮЩЕЕ. В нем указал default-фон, просто его убираем. В остальном меню особо менять не требуется.

// МЕНЮ ВЫПАДАЮЩЕЕ
div.MainMenu {
	font-size: 10pt; // шрифт 
}
 
// верхние пункты меню
ul.menu li {
	a {margin-right: 8px; color: white;} // верхний пункт
	a:hover {background: #3A4356; color: white;} // при наведении
	&.selected a {background: #374973;} // выделенный
}

Последний штрих - выровнять форму поиска по высоте меню. У нас меню стандартное - 35px, следовательно для тэга P зададим нулевые оступы поля и укажем line-height: 35px. Браузер автоматом разместит форму по центру.

...
form.fform {
				
	p {
		line-height: 35px;
		padding: 0;
	}
...

Шаблон для загрузки

Для экспериментов вы можете загрузить текущий файл шаблона ⁸⁴⁹.

««« Урок 14 | Урок 12 »»»