Moushe.ru

Блог обо всём

OpenCart 1.5.1 шаблон fly (2 часть)



Продолжим работы над нашим шаблоном.

До:                                                      После:

До7

Список задач на сегодня:

1. Переместим ссылки на вход в личный кабинет и регистрацию.

2. Добавим пару кнопок на социальные сети.

3. Удалим ссылки – личный кабинет, корзина, оформить.

4. В шапке слово Корзина сделаем ссылкой (2 варианта исполнения).

5. Выровняем товар (картинку товара, цену, кнопку купить) по центру.

 

И так приступим.

1. Откроем файл header.tpl (..\catalog\view\theme\fly\template\common) и ищем эти строки (103-109):

<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>

переместим их вверх под 50 строку (вот что у вас должно получиться):

<div id="container">
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>

Откроем stylesheet.css (..\catalog\view\theme\fly\stylesheet) и изменим эту строку (16):

h1, .welcome {

на эту:

h1 {

между этими строками (103-104):

}

#language {

вставим новый стиль:

#welcome{
color: #fff;
font: Verdana;
font-size: 14px;
text-align: center;
background: #000 url('../image/fonpanel.jpg') repeat-x;
padding-top: 8px;
padding-bottom: 8px;

}
#welcome a{
color: #1fabe8;
font-weight: bold;
padding-bottom: 5px;
padding-top: 10px;
}

Закинем эту картинку в папку image (..\catalog\view\theme\fly\image):

fonpanel

Смотрим результат:

1

 

2. В header.tpl (..\catalog\view\theme\fly\template\common) после этой строки (62):

<div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>

вставим эти:

<div id="socbuttons">
<noindex>
<a href="1" rel=”nofollow” target="_blank"><img src="catalog/view/theme/fly/image/vk.png" alt="Мы в контакте" /></a>
<a href="2" rel=”nofollow” target="_blank"><img src="catalog/view/theme/fly/image/odn.png" alt="Мы на одноклассниках" /></a>
<a href="3" rel=”nofollow” target="_blank"><img src="catalog/view/theme/fly/image/face.png" alt="Мы на facebook" /></a>
</noindex>
</div>

(1, 2, 3 — меняем на ссылки ваших страниц)

В stylesheet.css (..\catalog\view\theme\fly\stylesheet) вставим эти строки:

#socbuttons {
position: absolute;
top: 2px;
right: 0px;
}

изменим эти строки (160-166):

#header #cart {
position: absolute;
top: 0px;
right: 145px;
z-index: 9;
min-width: 300px;
}

на эти:

#header #cart {
position: absolute;
top: 21px;
right: 145px;
z-index: 9;
min-width: 300px;
}

а эти (282-288):

#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 298px;
z-index: 15;
}

на эти:

#header #search {
position: absolute;
top: 40px;
right: 0px;
width: 298px;
z-index: 15;
}

Возьмём эти иконки (уменьшить их до нужных размеров вы сможете и сами) и закинем их в папку image (..\catalog\view\theme\fly\image):

vkodnface

Смотрим результат:

2

Вроде-бы неплохо. Улыбка

 

3. В header.tpl (..\catalog\view\theme\fly\template\common) ищем эту строку (123):

<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist_total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>

и укоротим её:

<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist_total"><?php echo $text_wishlist; ?></a></div>

(P.S.  ссылки главная и закладки я не стал перемещать в верхнюю панель только по одной причине – вдруг вы захотите добавить в это меню ссылку на форум или новые страницы. )

 

4.1 В header.tpl (..\catalog\view\theme\fly\template\common) ищем эти строки (108-113):

<div id="cart">
<div class="heading">
<h4><?php echo $text_cart; ?></h4>
<a><span id="cart_total"><?php echo $text_items; ?></span></a></div>
<div class="content"></div>
</div>

и изменим их на эти:

<div id="cart">
<div class="heading">
<h4><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a></h4>
<a><span id="cart_total"><?php echo $text_items; ?></span></a></div>
<div class="content"></div>
</div>

Результат наших действий:

3

 

4.2 В header.tpl (..\catalog\view\theme\fly\template\common) ищем эти строки (108-113):

<div id="cart">
<div class="heading">
<h4><?php echo $text_cart; ?></h4>
<a><span id="cart_total"><?php echo $text_items; ?></span></a></div>
<div class="content"></div>
</div>

и изменим их на эти:

<div id="cart">
<div class="heading">
<div class="carts"><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a></div>
<a><span id="cart_total"><?php echo $text_items; ?></span></a></div>
<div class="content"></div>
</div>

Откроем stylesheet.css (..\catalog\view\theme\fly\stylesheet) и изменим эти строки (180-186):

#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}

на эти:

#header #cart .heading .carts a {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading .carts a:hover {
color: #38B0E3;
text-decoration: underline;
}

Результат:

(1 картинка) Ни каких отличий от старой надписи Корзина, но стоит лишь навести на слово Корзина курсор мыши и мы видим что слово корзина является ссылкой (2 картинка):

45

 

5. Рекомендуемые товары у нас по умолчанию прижаты к левому краю экрана, а мне хочется что бы они были по центру, приступим к корректировке. Откроем stylesheet.css (..\catalog\view\theme\fly\stylesheet) и ищем этот код (661-667):

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}

добавим в него одну строчку:

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
text-align: center;
}

Результат:

6

Немного побалуемся с отступами:

.box-product > div {
width: 132px;
display: inline-block;
vertical-align: top;
margin-right: 2px;
margin-bottom: 20px;
text-align: center;
}

Результат:

7

Как мы видим товар почти идеально отцентрирован. Улыбка

На сегодня всё, поздравляю вас с окончанием второго урока. Улыбка

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

  1. Супер!
    Уберите только фразу «Возьмём эти иконки (» в конце поста.

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

      16.01.2012 at 21:18

      Благодарю, всё исправлено 🙂

  2. Nsty Vldkvich
    vkontakte.ru Nsty Vldkvich

    21.01.2012 at 21:49

    А можно сделать в горизонтальном меню не категории, а ссылки на контакты, о нас и т.п. Чтобы кнопка открытой страницы меняла цвет?

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

      21.01.2012 at 22:42

      При желании можно сделать всё 🙂 скрипт можно попробовать поискать на офф. форуме. 🙂 В этом шаблоне не планирую это реализовывать.

  3. Владимир

    14.02.2012 at 17:07

    Здравствуйте Владислав. Подскажите пожалуйста как вместо ссылок — личный кабинет, корзина, оформитm разместить ссылки — контакты и FAQ. Заранее благодарю.

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

    14.02.2012 at 21:52

    Вот был один урок — http://moushe.ru/nashi-stati/web-dizajn-2/opencart-delaem-novye-stranicy/ и вот был второй урок — http://moushe.ru/nashi-stati/web-dizajn-2/opencart-menyaem-menyu-navigacii/

  5. Здравствуйте Владислав.
    Подскажите как поменять ссылку с логотипа на нужную мне страницу, а не главную магазина?

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

    20.03.2012 at 20:58

    Если буду свободен в пятницу то напишу в свежий урок.

  7. Доброго времени суток, Владислав! А подскажите пожалуйста, как можно центрировать наименование товара не в «рекомендуемых» на главной странице магазина, а в категориях при просмотре в виде витрины?

  8. Сергей

    05.07.2012 at 00:06

    Подскажите пжл, как вообще убрать в верхней части главной страницы » вход в личный кабинет и регистрацию» и просто оставить там темною полосу.

    Просто все это убрать?
    Очень нужно! Заранее спасибо

  9. Сергей

    05.07.2012 at 00:13

    Пробовал убрать- убрал)
    но вместе с полоской)
    как полоску темную оставить?

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

      05.07.2012 at 21:08

      Изменить это в stylesheet.css:

      #header {
      height: 90px;
      margin-bottom: 7px;
      padding-bottom: 4px;
      position: relative;
      z-index: 99;
      }

      добавив эту строку:
      background: #fff url('../image/fonpanel.jpg') repeat-x;

  10. Подскажите, пжл, как вверх где вход, переместить поиск?

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

      27.10.2012 at 00:03

      Stylesheet.css и правите это #header #search

  11. Спасибо! 🙂

  12. по поводу 4.1
    у меня нет в хедере такого кода

    div id=»cart»>

    где его можна найти?
    Спасибо.

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

      29.10.2012 at 21:58

      Не удивительно, если у вас OpenCart выше чем 1.5.1 для которого написана статья, ищите эти строки в этом файле:
      ../catalog/view/theme/default/template/module/cart.tpl

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

      30.10.2012 at 21:28

      Пожалуйста. 🙂

  13. Александр

    31.10.2012 at 14:44

    по п.1.
    у меня почему-то получается зебра из чёрно-белых вертикальных полос.
    по п. 4.
    А можно как-нибудь сделать чтоб и на картинку корзины поставить ссылку на саму корзину?

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

      31.10.2012 at 21:17

      Ссылку на сайт дайте, а картинку легко сделать ссылкой поместите её в ссылку или ждите следующего урока по опенкарту.

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

      09.01.2013 at 21:27

      1 — У вас криво скачалась картинка fonpanel, чёрный прямоугольник в белой рамке.

  14. Эльвира

    19.12.2012 at 12:14

    Владислав! Вы — молодец! Помогаете нам!
    Ваши уроки замечательные.
    Вопрос не много не по теме: Как сделать так, чтобы ссылки на сайте были не динамическими, а сео ссылками?

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

      19.12.2012 at 22:24

      Я вам не смогу ответить на этот вопрос, вам нужно к seo’шникам обратиться.

  15. Эльвира

    19.12.2012 at 14:40

    И еще вдогонку, как выровнять по центру подписи к товару в категориях?

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

      19.12.2012 at 22:35

      Какие подписи? Заголовок?
      В стиль .box .box-heading добавляем строку text-align: center;

  16. Попыталась установить кнопки на соц. сети, сделала все как написано, ссылки работают, но сами картинки не видны. Что это может быть?

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

      24.01.2013 at 21:29

      В каком формате картинки и какой формат прописан до картинок в файле, чаще всего люди путают это, картинка в png а ссылка прописана до jpg формата.

  17. Здравствуйте, а у вас написано,что В stylesheet.css (..\catalog\view\theme\fly\stylesheet) вставим эти строки:

    #socbuttons {
    position: absolute;
    top: 2px;
    right: 0px;
    }

    Это в самом начале вставлять или в конце????

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

      23.03.2013 at 13:28

      В любом удобном для вас месте.

  18. Добрый день! С помощью Вашей статьи изменил свою верхнюю шапку. Но вот беда, вставил в верхнюю линию, два блока (телефоны и «Где купить») и не могу их правильно расположить, хотел бы чтобы они стояли в разных концах страницы — один справа, другой слева. Поставил на первый float:left он ушел влево как положено, если сделать второму float:right, то вся страница летит, не подскажете как сделать?

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

      04.05.2013 at 20:30

      Это вопрос не по ОпенКарту. Задайте ещё стили text-align: left, text-align: right;

  19. Спасибо огромное. Видна рука мастера. =) Может напишете пару уроков для более новой версии? Я так понимаю 1.5.4.1 довольно распространена.

  20. Здравствуйте. как вывести регистрацию на главную страницу

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

      06.10.2013 at 22:38

      Здравствуйте, на myopencart.ru видел модуль, устанавливаете его и у вас на главной будут окошки для ввода логина и пароля, если я правильно понял вопрос.

  21. Как его найти? я искал так и не нашел.

  22. Владимир

    17.01.2014 at 13:45

    Маленький вопрос , так сказать по не знаю.
    в этом моменте

    font-size: 14px;
    text-align: center;
    background: #000 url(‘../image/fonpanel.jpg’) repeat-x;
    padding-top: 8px;
    padding-bottom: 8px;

    картинка обзывается fonpanel.jpg , а та которую сохраняем немного не так, надо переименовать?
    Вопрос возник из-за того, что не появляется эта полоса у меня…

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

      17.01.2014 at 21:25

      Название должно быть именно таким.

    • Владимир

      17.01.2014 at 23:28

      Возможно подскажите тогда какими могут быть причины отсутствия полосы…

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

      19.01.2014 at 22:01

      Дайте ссылку на сайт, посмотрю.

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

      22.01.2014 at 16:55

      Вставьте в stylesheet.css код между 103 и 104 строкой.

  23. Александр

    14.08.2014 at 20:38

    Спасибо большое! А то я всю голову сломал, как выровнить кнопку «купить» по центру) Дай бог Вам здоровья)

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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