Moushe.ru

Блог обо всём

OpenCart дорабатываем футер сайта (1 часть)



До:                                                      После:

ДоПосле

Посетители сайта просили меня написать статью о доработке футера, этим мы сегодня и займёмся. Улыбка

1. Составим список вещей необходимых нам в футере сайта:

Ссылки на главную страницу, контакты, карту сайта

Иконки соц. сетей

Добавим адрес, телефон и часы работы

Добавим ссылку на админку сайта (хотя я бы не советовал этого делать в целях безопасности, но раз в комментах просили то сделаем)

Немного изменим копирайты

2. Откроем footer.php (..\catalog\view\theme\default\template\common) и вместо стандартного кода вставим такой:

<div id="footer">

<div style="float: left; display: inline-block; width: 30%;">
<center><b>Наш адрес:</b><br>
г. Москва м. Савеловская<br>
ТК. Савёловский п-ны С-* и А-*<br>
Тел. 8 (903) 006 - 81 - **<br>
Часы работы: с 10:00 до 20:00
<br><br>
Мы в соц. сетях:
<a href="*"><img src="catalog/view/theme/default/image/Vk.jpg" alt="В контакте" /></a>
<a href="*"><img src="catalog/view/theme/default/image/odn.jpg" alt="Одноклассники" /></a>
<a href="*"><img src="catalog/view/theme/default/image/facebook.jpg" alt="Facebook" /></a></center>
</div>

<div style="float: right; display: inline-block; width: 70%;">
<a href="index.php?route=common/home"><img src="catalog/view/theme/default/image/dom.jpg" alt="" />Главная</a>
<a href="index.php?route=information/contact"><img src="catalog/view/theme/default/image/cont.jpg" alt="" />Контакты</a>
<a href="index.php?route=information/sitemap"><img src="catalog/view/theme/default/image/category.png" alt="" />Карта сайта</a>
<a href="/default/admin"><img src="catalog/view/theme/default/image/admin.jpg" alt="" />Вход для администратора</a>

</div>
</div>

<center>Copyright © 2010-2011 <a href="moushe.ru">Moushe.ru</a>
Сайт разработан на CMS <a href="http://myopencart.ru/">OpenCart</a></center>

<?php echo $google_analytics; ?>
</body></html>

Теперь откроем stylesheet.css (..\catalog\view\theme\default\stylesheet) и изменим это:

#footer {
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
}
#footer .div1 {
float: left;
text-align: left;
}
#footer .div2 {
float: right;
text-align: right;
}

на это:

#footer {
width: 100%;
height: 120px;
clear: both;
padding-top: 5px;
border: 1px solid #DDDDDD;

}

Смотрим результат проделанных изменений:

После

В следующих уроках мы добавим фон, вставим другие симпатичные иконки соц. сетей и сделаем у блока закруглённые углы. Следите за новостями. Улыбка

9 Комментариев

  1. Владимир

    16.09.2012 at 16:51

    Здравствуйте!Подскажите как мне также сделать но на шаблоне Moushe?И не получается установить счётчики посещаемости в нужное место.Если Вас это не затруднит.Напишите мне на E-mail:dvi3001@mail.ru.Буду благодарен за пояснения.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      17.09.2012 at 00:12

      У меня уже давно удалён OC 1.4.9 помочь не смогу.

  2. Если не секрет, что выбрали в замену OC?

  3. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    01.10.2012 at 21:13

    Пока остановился на Taberna ecommerce

  4. Добрый день!
    подскажите как можно написать текст под значками?
    к примеру я хочу сделать немного не так как у вас, а сделать как меню на айфоне))
    допустим,значок «трубка» под ним написать контакты,значок «почта» под ним почта, и тд
    очень долго мучался чтобы сделать все значки горизантально и на растоянии друг от друга) потом сделал по аналогии вашего примера,где вы рассказывали как ставить варианты оплаты, создал для каждого значка колонну и так они раздвинули) единственное в стилях немного подкоректировал.
    Но как подписать значки снизу я не могу додуматься(
    и так же почему то не ставиться фон(
    вообще не реагирует почемуто(
    очень надеюсь на Ваш ответ!

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      17.02.2014 at 15:55

      после картинки используйте тег br и пишите свой текст.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      18.02.2014 at 16:47

      Используйте тег br правильно, открывающая скобка br / закрывающая скобка, а не свою «оригинальную» конструкцию. Вбейте в яндекс — тег br и он покажет вам как его использовать правильно.

  5. Зеркальные элементы

    06.07.2016 at 19:07

    А как отследить ссылки которые идут с сайта?

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика