Адаптация html-шаблона под MyEngine. Часть 6.

20 March

Здравствуйте, дорогие читатели канала Сам Себе Веб-Мастер.

Источник: Яндекс Картинки. Фото адаптировано автором.
Источник: Яндекс Картинки. Фото адаптировано автором.

Продолжаем адаптировать шаблон. Те, кто внимательно следит за этим курсом, читает статьи и повторяет описанные в них действия, наверное, заметили, что в подвале (footer) ссылки уже оформлены в соответствии с исходным шаблоном. И выглядит подвал так

Подвал (footer) шаблона ZeroFour.
Подвал (footer) шаблона ZeroFour.

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

Адаптация html-шаблона под MyEngine. Часть 6.

Ссылки в блоках левой части подвала выводятся списком и каждая ссылка прописана в теге <li></li> и имеет вид:

<li><a href="page.html">Ссылка</a></li>.

Код блока ссылок выглядит так

Адаптация html-шаблона под MyEngine. Часть 6.

Блок ссылок в движке, который выводится в шаблон, имеет такой вид

Адаптация html-шаблона под MyEngine. Часть 6.

Каждая ссылка прописана в теге <div></div> с классом link

<div class="link"><a href="http://hostdb.ru/">Выбрать хостинг</a></div>.

Стили css будут такими

Адаптация html-шаблона под MyEngine. Часть 6.

С левой частью подвала разобрались. А вот, в правой части есть идея вывести блок контактов с картой API. Код будет такой

Адаптация html-шаблона под MyEngine. Часть 6.

Здесь стили менять не нужно. В этом варианте подвал будет иметь вот такой вид

Вывод блока контактов в подвале.
Вывод блока контактов в подвале.

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

Адаптация html-шаблона под MyEngine. Часть 6.

Я планировал в левой части блока вывести превью новостей, а в правой - оставить все как есть, но передумал. Новостная лента движка позволяет создавать категории новостей, поэтому, в правой части этого блока мы выведем меню категорий новостей. Чтобы это все продемонстрировать, я создал несколько тестовых категорий новостей, прописал вывод превью новостей и меню категорий в шаблоне. Вот как это выглядит

Вид блока превью новостей
Вид блока превью новостей

Справа, ниже меню категорий выводятся несколько блоков с произвольным контентом. Код вывода превью новостей непосредственно в шаблон имеет вид

Адаптация html-шаблона под MyEngine. Часть 6.

Код меню категорий

Адаптация html-шаблона под MyEngine. Часть 6.

Стили для этого блока

Адаптация html-шаблона под MyEngine. Часть 6.

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

На этом все. Адаптацию шаблона под движок можно считать завершенной. Скачайте шаблон с Яндекс Диска, установите на свой тестовый сайт и вы это увидите. Далее будем адаптировать движок под шаблон. У нас есть модуль ленты новостей, который выводит свой контент и он никак не вяжется со стилем шаблона. Так же, у нас есть форма обратной связи, формы регистрации и авторизации, вывод которых необходимо подкорректировать. Но, это все темы следующих статей.

До свидания. Надеюсь, что вам понравилось. Не забывайте подписываться на канал Сам Себе Веб-Мастер.

Другие публикации на эту тему:

Адаптация html-шаблона под MyEngine. Часть 1

Адаптация html-шаблона под MyEngine. Часть 2

Адаптация html-шаблона под MyEngine. Часть 3

Адаптация шаблона под MyEngine. Часть 4

Адаптация html-шаблона под MyEngine. Часть 5

Адаптация html-шаблона под MyEngine. Часть 7

Адаптация html-шаблона под MyEngine. Часть 8