Moushe.ru

Блог обо всём

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



До:                                                       После:

ДоПосле

Продолжим издевательства над футером нашего интернет магазина.

Откроем footer.tpl (..\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>

на это:

<div id="footer">
<div class="top">
<div class="left"></div>
<div class="right"></div>

<div class="center"><center>
<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></center>
</div>

</div>
<div class="middle">

<div>
<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>

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

Открываем stylesheet.css (..\catalog\view\theme\default\stylesheet) и изменяем это:

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

}

на это:

#footer {
margin-left: 190px;
margin-right: 190px;
margin-bottom: 10px;
}
#footer .top .left {
background: url('../image/content_top_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#footer .top .right {
background: url('../image/content_top_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#footer .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 5px;
margin-right: 5px;
}
#footer  img {
padding-top: 13px;
padding-left: 10px;
padding-bottom: 0px;
padding-right: 5px;
color: #000000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
cursor:pointer;
margin: 0px;
}
#footer  .center a {
color: #000000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
cursor:pointer;
margin: 0px;
}
#footer .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}
#footer .bottom .left {
background: url('../image/content_bottom_left.png') no-repeat;
width: 5px;
height: 5px;
float: left;
}
#footer .bottom .right {
background: url('../image/content_bottom_right.png') no-repeat;
width: 5px;
height: 5px;
float: right;
}
#footer .bottom .center {
background: url('../image/content_bottom_center.png') repeat-x;
height: 5px;
margin: 0 5px 10px 5px;
}

Теперь возьмём эти иконки и закинем их в папку image (..\catalog\view\theme\default\image):

odnvkfacebook

Любуемся результатом:

После

На сегодня всё, до новых встреч. Улыбка

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

  1. замечательно! ОГРОМНОЕ Вам спасибо!

  2. Алексей

    05.01.2012 at 19:03

    Влад подскажите сделал по Вашей статье футер. Но немного видоизменил…
    У меня вопрос как мне изменить цвет и размер текста.
    Так же опустить текст ниже. ? ?
    На моём сайте видно как я хотел бы зделать и как есть сейчас.

    #footer {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border: 1px solid #190212;
    width: 100%;
    clear: both;
    background: #020101 url('../image/footer_bg.jpg') no-repeat;
    height: 90px;
    }

    #footer .center a {
    color: #663300;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor:pointer;
    margin: 5px;
    ;
    }

    #footer .bottom {
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    padding: 10px 10px 1px 10px;
    min-height: 30px;
    }

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

    05.01.2012 at 23:46

    #footer .center a {
    color: #663300; (цвет шрифта)
    font-size: 17px; (размер шрифта)
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor:pointer;
    margin: 5px;
    padding-top: 10px; (отступ сверху)
    }

  4. Алексей

    06.01.2012 at 12:12

    Да дело в том что нехочет оно менять размер шрифта ни цвет и здвигается только нижняя часть с копирайтом.

    Незнаю почему ??
    Закинул уже футер с вашими подправками. Ничего непомогает ((((
    Скорее всего в stylesheet.css

    А мне надо зделать как на сайте футер в фотошопе

    Заранее благодарен за дельній совет….

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

      06.01.2012 at 13:00

      Отправил на почту stylesheet.css с правками, проверяйте — у меня сейчас на локалке установлен OpenCart 1.5.1, поэтому сам проверить не могу.

  5. Александр

    11.01.2012 at 05:29

    Большое спасибо вам за ваши уроки!!!

  6. Татьяна

    26.02.2012 at 16:25

    Владислав, не могу найти такую же красивую иконку с тенью для Моего Мира. Помогите! 🙂

  7. http://tiande-sklad.ru
    делала всё по уроку, не получилось , возможно не подходит по версии что у меня стоит, пыталась обратно вернуть что было не получилось- видимо код нарушила в футере, буду очень благодарна за подсказочку

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

      09.10.2012 at 21:09

      Статья написана для OpenCart 1.4.9 а у вас 1.5.+ — скачайте заново архив Опенкарта и заберите из него файл footer.tpl

  8. Дмитрий

    19.02.2014 at 15:23

    подскажите как добавить «О Нас» в футер

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

      19.02.2014 at 22:36

      Делаете статью, ставите галку напротив этого текста — Отображать в нижней части сайта.

  9. Сергей

    22.05.2015 at 18:07

    Если делать статью в» каталог->статьи» , то она появиться в блоке «Информация», а как её поместить скажем в «Служба поддержки» или «Дополнительно»? (OC 1.5.6.4)

  10. Сергей

    22.05.2016 at 11:36

    Есть возможность скинуть оригинал файла footer.tpl или видоизмененный с номерами телефона. мой error.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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