Moushe.ru

Блог обо всём

OpenCart делаем шаблон Comp4You (2 часть)



До:                                                      После:

12

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

1. Отключим лишние модули

2. Убьём кнопки: Акции, Избранное, Контакты, Карта сайта

3. Укоротим панель поиска

4. Удалим кнопку Оформить

5. Увеличим ширину шаблона (сделаем его резиновым — растягивающимся)

6. Изменим фон сайта

7. Изменим картинку шапки

8. Вставим в шапку телефон и часы работы

9. Удалим в товарах ненужную строчку (товар 1, товар 2 и тд.)

Как видим нам предстоит большой объём работы, и так начнём. Улыбка

 

1. Отключаем в админке все ненужные вам модули (мне не нужны – ссылки, хиты продаж, информация), отключаем выбор языка и выбор валюты. Как это делается написано в первых моих уроках OpenCart’a.

2. Открываем файл header.tpl (..\catalog\view\theme\Comp4You\template\common) и удаляем этот код:

<div class="div3"><a href="<?php echo str_replace('&', '&amp;', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a><a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/default/image/bookmark.png');"><?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/default/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/default/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>

3. Удаляем этот код:

<div id="search">
<div class="div8"><?php echo $entry_search; ?>&nbsp;</div>
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
<select id="filter_category_id">
<option value="0"><?php echo $text_category; ?></option>
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>
<option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a> <a href="<?php echo str_replace('&', '&amp;', $advanced); ?>"><?php echo $text_advanced; ?></a></div>
</div>

И вставляем вместо него этот:

<div id="search">
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></div>
</div>

4. Ищем эту строчку:

<a href="<?php echo str_replace('&', '&amp;', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a><a href="<?php echo str_replace('&', '&amp;', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a></div>

и обрезаем её:

<a href="<?php echo str_replace('&', '&amp;', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a></div>

5. Откроем Stylesheet.css и ищем этот код:

#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

Правим:

#container {
width: 90%;
background:#fff;
padding: 0px 20px 100px 20px;
border-radius:16px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

6. Закинем этот фон в папку image (..\catalog\view\theme\Comp4You\image):

fon

Ищем код в stylesheet.css:

body {
margin: 0px;
padding: 0px;
text-align: center;
}

Изменяем:

body {
background:#fa9441 url(«../image/fon.jpg») repeat-x;
margin: 0px;
padding: 20px;
text-align: center;
}

7. Возьмём картинку и закинем в папку data (..\image\data):

logo

8. Откроем header.tpl и создадим в нём такой код (над div4):

<div class="div3"><center>
Наш телефон: 8 (000) 000 - 00 - 00<br>
Часы работы: с 10.00 до 20.00 <br>
</center></div>

P.S. — при желании вы можете вставить и адрес, тогда код должен быть таким:

<div class="div3"><center>
Наш телефон: 8 (000) 000 - 00 - 00<br>
Часы работы: с 10.00 до 20.00 <br>
Наш адрес: ТК "Comp4You" пав. А-1<br>
</center></div>

Сохраним файл в UTF-8 кодировке, иначе русские символы будут неправильно отображаться на сайте.

Откроем stylesheet и ищем этот код:

#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}

И меняем на это:

#header .div3 {
float: center;
padding-top: 100px;
height: 38px;
color: #000000;
font-size: 14px;
text-transform: uppercase;
}

9. Открываем  featured_home.tpl и latest_home.tpl  (..\catalog\view\theme\Comp4You\template\module) и удаляем из них эту страшную строчку:

<span style="color: #999; font-size: 11px;"><?php echo $products[$j]['model']; ?></span><br />

 

Если вы всё сделали аккуратно и без ошибок у вас получится что-то похожее на это:

2

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

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

  1. «4. Удалим кнопку Оформить»
    Владислав, хотелось бы увидеть урок, в котором можно не только удалить кнопки, но и изменить их на свои. Изменить не только надпись кнопки, но и ее назначение. Например, сделать кнопки «Доставка и оплата» и еще несколько информационных страничек. Ссылки на эти странички, а также их наполнение лучше сделать через блок «Информация» стандартный.
    С уважением Александр.

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

    12.10.2011 at 21:20

    Раз просите, то обязательно выделю время на написание такого урока. 🙂

  3. Познавательно, НО мало. И на этом спасибо

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

    14.10.2011 at 21:25

    Всегда пожалуйста 🙂

  5. Уважаемы автор, подскажите пожалуйста как бы в шаблоне расширить левую боковую панельку. Изменение ширины в stylesheet.css #column_left приводит к кривому виду.

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

      16.10.2011 at 21:50

      Делаем изменения например на такие:
      #column_left { - размер левой колонки
      float: left;
      width: 240px;
      margin-right: 10px;
      clear: left;
      }

      #content { - отступ центральной части справа и слева
      margin-left: 250px;
      margin-right: 190px;
      margin-bottom: 10px;
      }

      и после этого изменяем размеры картинок box_top.png и box_bottom.png на 10px меньше чем заданный размер, например я задал размер левой колонки 240px, значит картинки изменяем по ширине до 230px

    • Огромное спасибо за столь быстрый, и предельно развернутый ответ. Низкий Вам поклон. 🙂

    • Правда есть одна проблемка, шаблон использует и на левую и на правую панель в файле стилей stylesheet.css единственный класс:

      .box {
      margin-bottom: 10px;
      background: url('../image/box_top.png') no-repeat;
      }
      .box .bottom {
      height: 5px;
      background: url('../image/box_bottom.png') no-repeat;
      }

      Насколько я понимаю нужно клонировать этот .box, назвать клон например .box_left, задать ему, измененые под размер левой колонки, картинки верхушки и низа. Ну и соответственно где-то прикрутить так, чтобы при формировании div id=»column_left» впихивался class=»box_left», а для div id=»column_right» использовался старый добрый class=»box». Если мои мысли в правильном направлении, пожалуйста намекните где происходит формирование column_left, а ежели я ересь какую удумал подскажите верное направление )

      Извините, что намусорил в комментах, не складывается у меня тут с тегами (

    • Еще раз извините, можете не отвечать сам догнал как делать )

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

      17.10.2011 at 21:10

      Нужно открыть все модули левой колонки и присвоить им новый div класс, в stylesheet.css создать новый div класс и привязать к нему новые картинки.

    • извините..а можно для тех, кто на бронепоезде и только по ночам может догонять, немного разжевать, в каких местах и в каких файлах допилить правую колонку под нормальный размер, если левую уже изменил? :-[
      еще раз извините и спасибо…=)

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

      26.10.2011 at 22:33

      В stylesheet.css

      #column_right {
      float: right;
      width: 180px; (ширина правой колонки)
      margin-left: 10px;
      clear: right;
      }
      #content {
      margin-left: 190px;
      margin-right: 190px; (должно быть на 10 пикселей больше чем у вас ширина правой колонки)
      margin-bottom: 10px;
      }

      Потом ищём этот код:
      .box {
      margin-bottom: 10px;
      background: url('../image/box_top.png') no-repeat;
      }
      .box .bottom {
      height: 5px;
      background: url('../image/box_bottom.png') no-repeat;
      }

      Копируем его и вставляем обратно уже с другим названием:
      .box_right {
      margin-bottom: 10px;
      background: url('../image/box_top.png') no-repeat; (копируем в папке image эту картинку - box_top.png изменяем её размер и сохраняем с другим названием - название вставляем сюда)
      }
      .box_right .bottom {
      height: 5px;
      background: url('../image/box_bottom.png') no-repeat; (делаем тоже самое что и для первой картинки)
      }

      После этого открываем папку с модулями и изменяем в них это:
      div class="box"
      на это:
      div class="box_right"
      и всё, если не совсем понятно напишу в пятницу или субботу урок.

  6. У меня вот почему-то на одном компьютере (дома) сайт выглядит по одному, а на другом (на работе) — по другому, размеры меняются и справа рисунок с контактами располагается левее кнопок Социальных сетей, а дома контакты располагаются по правому краю под кнопками Соц.сетей. Это из-за чего? Из-за растягиваеющегося шаблона (блок #container)? Как добиться чтобы на разных компьютерах и разных браузерах сайт выглядел одинакого?
    С уважением Александр.

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

    16.10.2011 at 21:23

    Это происходит из-за того что у вас размеры картинок большие, в разрешении 1024×768 они не вмещаются в одну полоску — упираются в панель соц кнопок и тем ничего не остаётся как переместиться вверх, а в 1280×1024 им хватает места распологаться в линию с кнопками соц сетей.

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

    16.10.2011 at 21:30

    Уменьшите размер логотипа (350px),телефонов(350px) так чтобы хватало места блоку соц кнопок так чтобы в сумме получилось около 1000px но не больше, тогда у вас бут нормально всё отображаться и на мониторе с разрешением 1024x768px и на мониторе с 1280x1024px и выше.

  9. Артур

    20.11.2011 at 01:06

    Здравствуйте можно ли чтобы номер телефона и часы работы отображалось прям напротив логотипа справа в шаблоне moushe ?

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

      20.11.2011 at 01:13

      Из этого:
      < *center>
      Наш телефон: 8 (000) 000 - 00 - 00
      Часы работы: с 10.00 до 20.00
      Наш адрес: ТК "Comp4You" пав. А-1
      < */center>

      делаем это:

      Наш телефон: 8 (000) 000 - 00 - 00
      Часы работы: с 10.00 до 20.00
      Наш адрес: ТК "Comp4You" пав. А-1

  10. Артур

    20.11.2011 at 03:50

    Спасибо за быстрый ответ
    сделал вот так, встал ровно напротив логотипа, теперь как бы ещё передвинуть это всё вправо до конца
    Наш телефон: 8 (000) 000 — 00 — 00 Часы работы: с 10.00 до 20.00 Наш адрес: ТК «Comp4You» пав. А-1

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

      20.11.2011 at 11:39

      Из этого:
      #header .div3 {
      float: center;
      padding-top: 100px;
      height: 38px;
      color: #000000;
      font-size: 14px;
      text-transform: uppercase;
      }

      делаем это:
      #header .div3 {
      float: right;
      padding-top: 100px;
      height: 38px;
      color: #000000;
      font-size: 14px;
      text-transform: uppercase;
      }

  11. Артур

    20.11.2011 at 12:53

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

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

      20.11.2011 at 23:00

      Буду и дальше стараться 🙂

  12. Спасибо, всё подробно написано, всё очень легко делать, спасибо большое.

  13. Алексей

    30.12.2011 at 12:47

    Влад у меня проблема. По п. 8. про номера телефонов в шапке сайта…
    У меня так как вы пишите неполучиться …. у меня занятый (кнопкой личный кабинет и регистрация)
    Я вставлю код после div3

    067-305-75-67
    063-20-21-233
    AW@ukr.net
    402-818-992

    Но начинает сьезжат div3 Подправляю в стилях…ети два слоя один тянет за другим.

    #header .div3 a {
    margin-left: 10px;
    padding: 1px 0px 2px 25px;
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 14px;
    color: #FBFBFC;
    }
    #header .div12 {
    float: right;
    margin-right: -188px;
    padding-top: 40px;
    padding-right:1px;
    font-size: 21px;
    color: #663300;
    font-family: UniCredit CY Heavy ;

    Только margin-right: -188px; вот етим атрибутом удалось выровнять…Но начинаю менять маштаб етот слой сьезжает в право…..
    Как мне зафиксировать его и зделать чтоб ети слои друг друга не цепляи
    Заранее благодарен за ответ

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

      30.12.2011 at 14:29

      После Личного кабинета и регистрации ставите < *br /> и вставляете телефон и тд. либо создаёте новый div и вставляете в него весь код.

      Если написал не понятно задавайте вопросы на мыло hruhru.87@mail.ru

  14. Не нашел твой блог раньше, пришлось самому мучиться со всем этим 😮

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

      16.01.2012 at 21:17

      🙂 Бывает, кстати советую в магазине цвета немного изменить — раздражает глаза, или вы делали его для дальтоников ? 🙂

  15. Андрей

    10.02.2012 at 16:56

    Владислав, здравствуй! Надеюсь, что ты мне поможешь.
    Я пользуюсь версией ocstore_v1.5.1.3, шаблон — bleen. Проблема в том, что футер не помещается на странице. Вся информация подвала, она сливается с содержимым, в моем случае с таблицами в которой находится информация о товаре. Таблица не такая уж и большая ( примерно: длина — 40см.). И этот косяк на всех страничках. На форуме встретил подобную проблему, но ни кто так и не ответил. Если сможешь помоги. Спасибо!

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

    10.02.2012 at 17:51

    Ссылку на сайт — hruhru.87@mail.ru либо скриншоты проблемы и шаблон. 😮

  17. Евгений

    18.02.2012 at 02:10

    9 пункт удалить в товарах ненужную строчку не получается. В админке товары — название и модель со звездочкой приходится прописывать. А на сайте все равно выводится.

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

      18.02.2012 at 15:32

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

  18. А как можно добавить разный фон для header, body и footer. Не могли бы Вы написать урок на эту тему?
    Огромное спасибо.

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

      20.02.2012 at 21:17

      Если будет в планах ещё один шаблон для OpenCart 1.4.9 то постараюсь затронуть эту тему.

  19. Был бы очень благодарен! Возможно, в чем-то даже мог бы помочь при написании.
    т.е. могу сделать сам, мне лишь намек нужно дать в какую сторону копать.

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

      21.02.2012 at 16:36

      К примеру вывести в админке строку — Код счётчика(ов), и вывести его на витрину в футер, тогда для добавления счётчиков (яндекс и мэйл) в футер сайта, новичкам-создателям магазинов на OpenCart’е не придётся заморачиваться и править tpl для добавления этих вещей 😉

  20. Добрый день, вот столкнулся с след проблемкой. На движке Opencart 1.5.1.3 не очень хорошо продумани кнопки ВПЕРЕД. Они по смыслу не всегда подходят. Например в меню контакты для отправки письма администрации надо нажать Вперед а хотелось бы чтоб была кнопка ОТПРАВИТЬ. Если менять текст кнопки, то он измениться на всем сайте, что снова теряет смысл. Поведайте пожалуйста как создать дополнительную кнопку с своим иминем.
    Например:
    Регистрация клиента — заместь ВПЕРЕД кнопка зарегестрироваться
    Контакты — заместь Вперед, Отправить и так далие,

    Научите как клонировать эти кнопки чтоб функционал не менялся.

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

      24.05.2012 at 18:31

      К сожалению не смогу ответить — я сейчас работаю над 4-мя сайтами 3 на WordPress и 1 на Pluxfolio, скоро сдавать, поэтому на блоге не пишу никаких статей вообще — нет времени. Задайте вопрос на оф. форуме — myopencart.ru

  21. Здравствуйте. С вашей помощью уже добрался до изменения фона. Подскажите, а почкму у меня в палиоксисе не хочет редактироваться стилишет? Изменяю так как Вы пишите, и соответственно указываю путь фона в юрл. Даже эксперементировал с изменением просто цветов бэкграунда и колора, но ноль реакции почему то. С уважением. Спасибо …

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

      25.03.2013 at 21:16

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

  22. Подскажите, как повысит контраст шаблона?

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

      17.11.2013 at 23:39

      Если нужно сделать темнее фон — берёте и перерисовываете в графических программах, если стили в css меняйте код цвета.

  23. Здравствуйте, Влад! У меня оксторе 1.5.5.1.1, шаблон поменяла, но он: 1.очень узкий
    2. левая колонка при просмотре товара выползает на середину и информация о товаре и кнопка купить — смещаются куда -то.
    в Stylesheet.css у меня такая строчка:
    #container {}
    #container-center {width: 980px;margin:0px auto 0px auto;padding-top:0px;text-align: left;}
    #column-left {float: left;width: 235px;}
    #column-right {float: right;width: 235px;}
    #content {min-height: 100px;margin-bottom: 25px;}
    #column-left + #column-right + #content, #column-left + #content {margin-left: 249px;}
    #column-right + #content {margin-right: 249px;}
    /* header */
    Как её можно откорректировать, чтобы это исправить.

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

      26.09.2014 at 18:46

      Напишите мне в контакт — тут код не смогу вставить + ссылку на сайт

  24. Помогите, пожалуйста,Владислав!!

  25. добрый день. очень прошу помочь так как я так же как и многие с бронепоезда. сделал все так как у Вас написано. но картинку изменил на свою (с размерами как у Вашей) и цвет поставил свой. так вот цвет видно а картинку нет. как сделать чтобы видна была картинка на фоне? заранее большое спасибо.

  26. Забыл сказать что у меня почему то нет строк в нужных файлах 2, 3, 4.
    что делать?

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

      03.11.2014 at 17:56

      Может быть другая версия OcStore, проверьте путь к картинке и расширение картинки — jpg, png и тд — если адрес к картинке или расширение указано не верно — картинка и не будет отображаться.

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

    • шаблон у меня стандарт!

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

      04.11.2014 at 18:00

      Картинка имеет градиент — верх тёмный с плавным переходом к основному цвету фона, только для этого. Смотрите каталог статей, там есть и про вставку телефона в новые версии опена.

  28. спасибо

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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