Практически для любого сайта важнейшей частью является шапка и информация, размещенная в ней, ведь это первое, на что обращает внимание посетитель, попавший на сайт. В шапке сайта может быть размещен абсолютно любой текст, например, адрес магазина, телефон и другие контакты, время работы, либо просто приветственное сообщение. Рассмотрим самый простой способ добавления текста в шапку Opencart.
Для данного способа достаточно отредактировать файлы шаблона header.tpl и файл стилей stylesheet.css. Есть и другие способы, например, вывод адреса и телефона из информации о магазине, которая редактируется в админке, но у такого способа, на мой взгляд, есть минусы — текст, выведенный таким образом нельзя оформить, выделив отдельные слова html тегами.
Перейдем непосредственно к добавлению текста в шапку сайта. Откроем файл шаблона шапки — header.tpl. Он находится по следующему пути: catalog/view/theme/default/template/common/header.tpl. Если вы используете не стандартный шаблон default, то надо изменять файл header.tpl в папке с названием своего шаблона.
Добавим новый блок, назовем его header_text и вставим после блока welcome перед строкой <div class="links">, на скриншоте вставленный блок выделен серым:
Содержание блока header_text в данном примере будет таким:
<div class="header_text"> <div class="header_adr"><b>Адрес:</b> Название города<br /> Название улицы, дом №3</div> <div class="header_phone"><b>Телефон:</b> (909)123456789</div> </div>
Как видим, он состоит из основного контейнера header_text и двух дополнительных header_adr — для адреса и header_phone для телефона. Заголовки Адрес и Телефон выделены жирным (теги <b></b>), в адресе после названия города стоит переход на новую строку с помощью <br />. У вас текст и оформление блока могут быть абсолютно любыми, но для примера оставим их такими.
Сохраним файл header.tpl, не забыв проверить кодировку, она должна быть UTF-8, а еще лучше, UTF-8 без BOM, так как мы используем русский текст в файле, другие кодировки лучше не использовать.
Теперь откроем файл таблиц стилей stylesheet.css. Он расположен по адресу catalog/view/theme/default/stylesheet/stylesheet.css.
Для начала изменим высоту шапки, чтобы было где разместить адрес и телефон: найдем строку #header (примерно 92 строка) и изменим значение высоты height: 190px;
Теперь добавим описание стилей нашего нового блока. Добавлять будем после #header #welcome (примерно 299 строка), как показано на скриншоте:
Код, который будем вставлять:
.header_text {
position: absolute;
top: 100px;
left: 20px;
font-size: 12pt;
font-family: verdana;
font-style: italic;
color: #333;
border: 1px dashed #38B0E3;
padding: 10px;
}
.header_adr {
background: url('../image/adres.png') no-repeat left center;
padding-left: 40px;
}
.header_phone {
background: url('../image/phone.png') no-repeat left center;
padding-left: 40px;
}
Подробнее о том, что мы добавили:
header_text - абсолютное позиционирование position: absolute; позволяет размещать блок в любом месте главного контейнера с помощью указания координат. В данном примере координаты указаны top:100px; left: 20px; изменяя эти значения в большую или меньшую сторону, можно разместить блок в любом месте шапки. Далее указаны настройки шрифта для блока: размер 12pt, семейство шрифта Verdana, наклон шрифта — italic. Цвет шрифта — темно-серый #333. Рамка вокруг блока толщиной 1px, пунктирная, голубого цвета, отступ между текстом и рамкой 10px.
.header_adr и .header_phone оформлены с помощью картинок. Изображения можно скачать ТУТ и положить в папку catalog/view/theme/default/image . Padding-left задает отступ от картинки, если вы захотите установить свою картинку другого размера, то следует изменить значение padding-left в зависимости от размера изображения. Сохраняем файл stylesheet.css и видим следующее:
