Здравствуйте, дорогие читатели канала Сам Себе Веб-Мастер.
Продолжаем адаптировать шаблон. Те, кто внимательно следит за этим курсом, читает статьи и повторяет описанные в них действия, наверное, заметили, что в подвале (footer) ссылки уже оформлены в соответствии с исходным шаблоном. И выглядит подвал так
Я адаптировал стили чуть позже, но не писал об этом, а сейчас самое время. Для начала показываю стили css, которые отвечают за вывод ссылок в исходном шаблоне.
Ссылки в блоках левой части подвала выводятся списком и каждая ссылка прописана в теге <li></li> и имеет вид:
<li><a href="page.html">Ссылка</a></li>.
Код блока ссылок выглядит так
Блок ссылок в движке, который выводится в шаблон, имеет такой вид
Каждая ссылка прописана в теге <div></div> с классом link
<div class="link"><a href="http://hostdb.ru/">Выбрать хостинг</a></div>.
Стили css будут такими
С левой частью подвала разобрались. А вот, в правой части есть идея вывести блок контактов с картой API. Код будет такой
Здесь стили менять не нужно. В этом варианте подвал будет иметь вот такой вид
Правда, вывод блока контактов не входил в наши планы. Но, мне кажется, что этот блок здесь очень хорошо смотрится. В наших планах еще был вот такой блок.
Я планировал в левой части блока вывести превью новостей, а в правой - оставить все как есть, но передумал. Новостная лента движка позволяет создавать категории новостей, поэтому, в правой части этого блока мы выведем меню категорий новостей. Чтобы это все продемонстрировать, я создал несколько тестовых категорий новостей, прописал вывод превью новостей и меню категорий в шаблоне. Вот как это выглядит
Справа, ниже меню категорий выводятся несколько блоков с произвольным контентом. Код вывода превью новостей непосредственно в шаблон имеет вид
Код меню категорий
Стили для этого блока
В завершении описания блока превью новостей нужно сказать, что этот блок будет выводится на всех страницах, кроме страниц новостей, чтобы не дублировать контент.
На этом все. Адаптацию шаблона под движок можно считать завершенной. Скачайте шаблон с Яндекс Диска, установите на свой тестовый сайт и вы это увидите. Далее будем адаптировать движок под шаблон. У нас есть модуль ленты новостей, который выводит свой контент и он никак не вяжется со стилем шаблона. Так же, у нас есть форма обратной связи, формы регистрации и авторизации, вывод которых необходимо подкорректировать. Но, это все темы следующих статей.
До свидания. Надеюсь, что вам понравилось. Не забывайте подписываться на канал Сам Себе Веб-Мастер.
Другие публикации на эту тему:
Адаптация html-шаблона под MyEngine. Часть 1
Адаптация html-шаблона под MyEngine. Часть 2
Адаптация html-шаблона под MyEngine. Часть 3
Адаптация шаблона под MyEngine. Часть 4
Адаптация html-шаблона под MyEngine. Часть 5