Moushe.ru

Блог обо всём

OpenCart (3 часть)



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

До:                                                       После:

OpenCartOpenCartMoushe1

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

1 Увеличим ширину шаблона

2 Добавим фон

3 Допилим футер

Начнём работать:

Откроем 2 папки:

…\catalog\view\theme\Moushe\template\common (здесь части нашей темы – шапка, страницы,правая и левые колонки и изменяемый нами сегодня футер)

…\catalog\view\theme\Moushe\stylesheet (а здесь таблица стилей – stylesheet.css, этот файл отвечает за внешний вид всего шаблона)

Открываем stylesheet.css и ищем этот код:

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

и изменяем:

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

 

***

P.S. — Если вы хотите сделать шаблон магазина растягиваемым на весь экран монитора делаем так:

#container {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

чтобы добавить отступы от краёв экрана добавим ещё одну строчку с отступами:

#container {
width: 100%;
padding: 0px 20px 0px 20px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

***

Подготовим фон (5×290 пикселей, формат jpg):

fon

и закинем его в эту папку:

..\catalog\view\theme\Moushe\image

после этого найдём этот код (stylesheet.css):

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

и вставим в него наш фон:

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

Красота: Подмигивающая рожица

OpenCartMoushe

Теперь откроем файл footer.tpl

<div id="footer">
<div class="div1"><a onclick="window.open('https://www.paypal.com/uk/mrb/pal=W9TBB5DTD6QJW');"><img src="catalog/view/theme/default/image/payment.png" alt="" /></a></div>
<div class="div2"><?php echo $text_powered_by; ?></div>
</div>
</div>
<?php echo $google_analytics; ?>
</body></html>

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

<div id="footer">
<div><br/><center>Цены розничного магазина могут отличаться от цен интернет магазина. © 20**-20**.***.ru – cms <a href="http://myopencart.ru">OpenCart</a>. Все права защищены  </center><br/> </div>
</div>
</div>
<?php echo $google_analytics; ?>
</body></html>

Вместо *** проставьте нужные буквы и цифры сами. Улыбка

P.S. если в окне браузера вы вместо надписи видите непонятные символы то это исправляется очень просто – откройте footer.php блокнотом, и выберите сохранить как – и вместо кодировки ANSI выберите UTF8.

Вот и результат нашей работы:

OpenCartMoushe1

Простите за большие промежутки между статьями об OpenCart – очень мало свободного времени, просто не успеваю написать.nbsp;

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

  1. Хорошие статьи. По Opencart я лучше, то есть понятнее, ничего не нашёл. Хотелось бы узнать мнение Владислава по следующему поводу: как сделать, чтобы в модуле «Категории» при загрузке сайта отображались не только категории, но и подкатегории. Подсказка с англоязычного сайта на моём Opencart-1.4.9 не сработала.

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

    05.08.2011 at 13:23

    Вот вам полезная ссылка — http://dev.wonderlog.ru/cat/cms/opencart/ 🙂

  3. Статьи понятные, а поэтому одни из лучших. Возникла проблема: нужно иметь возможность устанавливать цену для категории и отображать её в модуле «Категории» и в описании категории (например, кондиционеры «LG» от 11 000 руб. Как это лучше сделать? Хотелось бы услышать авторитетное мнение Владислава.

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

    06.09.2011 at 21:19

    Не советую этого делать — у вас название категории будет в 2 строчки, а подкатегории вообще в три — на вашем сайте и так тяжело читается каталог, будет ещё хуже.
    1. Первое что приходит на ум — активируйте модуль производители — и переименуйте его в Цены — и создайте несколько типов цен — до 11 000р, до 15 000р и тд.
    2. Воспользоваться модулем — категории на главной, и тогда можно сделать категории как вы хотите: http://opencartforum.ru/files/file/129-категории-на-главной/

  5. Владислав находит правильные и простые решения, а простое решение, уж поверьте, найти очень непросто. Спасибо за быстрый ответ по вопросу «Цена категории» (но заказчик хочет цену категории — решать придётся). Теперь вот другая проблема. Обращаюсь к Владиславу как к знатоку шаблона Opencart. При переносе на Opencart действующего сайта , сделанного когда-то на закрытой и малопонятной AirCms (а фактически это разработка нового сайта на более высоком уровне), возникла проблема, которую с ходу не решил. В header и footer нужно внести обыкновенные ссылки , принципами ООП можно временно пренебречь. А файл «header.tpl» не принимает тегов с русскими ссылками, отображаются «?», то есть проблема с кодировкой. Владислав, Ваш авторитет может повыситься.

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

    07.09.2011 at 21:10

    Привет, сохраните ваш header.tpl и footer.tpl с помощью обыкновенного блокнота (сохранить как — нижний выпадающий список)- он позволяет выбрать кодировку — в вашем случае нужна UTF8, и тогда всё будет как нужно 😉 удачи с магазином

  7. Владислав, спасибо за статьи. Были вопросы, искал ответы, нашел у Вас.
    Иду по Вашим урокам, все получалось, а вот с фоном не выходит: меняю код, но фон не меняется. Возможно, я что-нибудь здесь «Подготовим фон (5×290 пикселей, формат jpg):» не так делаю и, соответственно, в папке image появляется не то?
    Заранее спасибо.

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

    25.09.2011 at 12:21

    Просто движок сайта изменяет кавычки, поставьте "" — такие кавычки вместо «»

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

    PS — весь код в статье переделан, теперь все кавычки в статье такие как и должны быть в вашем коде. 🙂

  9. Здравствуйте, Владислав!
    Я дошел до 7 урока, потом у меня что-то не получилось (весь сайт перекосился)
    и я решил начать все сначала.
    Для этого заменил файлы stylesheet.css и header.tpl на дефолтные.
    (т.к. другие файлы вроде не изменял).
    После этого у меня сайт принял начальный вид.
    Теперь я меняю в коде файла stylesheet.css блок:
    body {
    background: url(«catalog/view/theme/default/image/fon_list.jpg») repeat-x;
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

    И у меня почему-то сайт нисколько не изменяется. (проверил, картинка в каталоге image есть).
    Подскажите, в чем может быть проблема?
    Нужно ли поменять другие файлы для возврата к дефолтному шаблону?
    Заранее спасибо.
    С уважением Александр.

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

    06.10.2011 at 19:40

    background: url(«catalog/view/theme/default/image/fon_list.jpg») repeat-x; — вы путь к картинке странный указали, переделайте как в моём уроке — background: url(«../default/image/fon_list.jpg») repeat-x;

    • Поставил в точности как написали. Не помогло. (Кавычки изменил).
      Почему путь странный? Это просто полный путь к файлу.
      Самое интересное, что в первый раз, когда я менял шаблон, я делал то же самое и путь такой же прописывал и у меня все получалось.
      А теперь — нет.
      Попробовал ради интереса очистить весь файл stylesheet.css.
      Сайт конечно немного покривился, но все равно работает, по крайней мере большинство блоков остались как прежде, это нормально?

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

      06.10.2011 at 22:19

      В админке какой шаблон выбран ? Какой смысл указывать весь путь к картинке, если можно сделать короткий ? Например, если вы переименуете папку шаблона то полный путь будет вести в никуда — картинка не будет отображаться , а короткому без разницы как называется папка с шаблоном.

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

      06.10.2011 at 22:29

      Смотрю ваш stylesheet.css в default шаблоне там нет кода картинки:

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

      а картинка симпатичная — жёлтые листики клёна 🙂

    • Странно, а вчера была строка….
      Мистика…
      Вставил опять строку. Но ничего не изменилось.
      Да картинка красивая 🙂
      Самое главное что картинка уже вначале была на сайте и выглядело все очень красиво 🙂
      А как Вы смотрите, какие у меня картинки лежат?
      stylesheet.css можно просмотреть открыв сайт и поставить «Вид-исходный код», а вот как картинки посмотреть я не знаю 🙂
      Вы можете все мои файлы просмотреть???

    • Понял, спасибо буду знать.
      Название шаблона я не менял, 2 урок не выполнял, все делал с дефолтным шаблоном. Никакие пути не менял, папки тоже не переименовывал.

    • Реально, какая-то мистика…
      Фон «листики» вдруг неожиданно появился.
      Потом я начал дальше менять — все пропало.
      Вернул как было — и опять нет «листиков».

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

    07.10.2011 at 20:51

    🙂 http://tiandeclub.ru/catalog/view/theme/default/stylesheet/stylesheet.css вот можно увидеть ваш stylesheet.css
    http://tiandeclub.ru/catalog/view/theme/default/image/fon_list.jpg а вот картинка.
    Правим эту строчку background: url("../default/image/fon_list.jpg") repeat-x; на эту background: url("../image/fon_list.jpg") repeat-x;
    и смотрим что изменилось на сайте

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

    07.10.2011 at 23:43

    🙂 обращайтесь, если понадобится помощь и кстати уже появился урок в котором написано как вставить телефон текстом, а не картинкой, вам будет полезен 😉

  13. Дмитрий

    09.10.2011 at 17:30

    Владислав, спасибо вам за ваши статьи! Пробую переделать футер. Сейчас он:

    Вызывает модуль с информацией в футере. Как сделать, чтобы еще одну строку добавить с вашим футером? Копирование строки: Цены розничного магазина могут отличаться от цен интернет магазина. © 20**-20**.***.ru – cms OpenCart. Все права защищены не помогает. Ошибка при сохранении изменений.

    ПС: Не программист. Для меня это все «темный» лес. )

  14. Алексей

    08.11.2011 at 19:49

    Здравствуйте!
    Вы пишете:
    Открываем stylesheet.css и ищем этот код:

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

    А я не могу найти этот код, файл stylesheet.css открываю, нажав правой кнопкой и далее «Просмотр кода элемента». Подскажите, пожалуйста, как правильно сделать?

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

    08.11.2011 at 20:44

    Правая кнопка мыши — открыть с помощью — и выбираем блокнот или иной текстовый редактор, от себя рекомендую notepad++ с ним очень легко и удобно работать.

  16. Екатерина

    18.11.2011 at 17:00

    Огромное спасибо, учусь по вашим следам :))) пошла на третий урок 🙂

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

      18.11.2011 at 17:52

      Приятно слышать 🙂

  17. АРТУР

    24.11.2011 at 09:58

    Здравствуйте Владислав после изменения ширины шаблона всё нормально встало ,но как заходишь в кабинет страница не расширяется а стоит как есть в фаил acount.tpl прописал width: 97%;(частично решил проблему кабинет расширяется) но при просмотре на большом экране она все равно убегает, не так как выставлено на маленьком экране,может в стилях нужно что-то дописать или поправить?

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

    24.11.2011 at 20:01

    Забавно, у меня всё нормально работает в шаблоне

  19. Алексей

    04.01.2012 at 03:41

    Сделал, впринципе все получилось,но есть вопросы: как придать цвет тексту(а то он у меня синий какой-то на воне вышел) и чтобы фон поиска и корзины был закрашен
    фоно основным?

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

    04.01.2012 at 21:29

    1. — stylesheet.css

    a, a:visited, a b {
    color: #38B0E3;
    text-decoration: underline;
    cursor: pointer;
    }

    2 правим #header #cart и #header #search input (stylesheet.css)

    PS — только для OpenCart 1.5.1 и выше 🙂

  21. Сергей

    09.01.2012 at 14:11

    Хэээээлп!!!
    статьи суперские, все детально расписано, ноймет каждый, но вот проблемка…
    при изменении файла stylesheet.css на сайте это ни как не отображается…
    даже элементарно ширину не могу изменить…
    файл открываю, правлю и сохраняя notepad++, изменениия сохраняются, но сайт вообще на это ни как не реагирует(
    установлены последнии версии denwer и ocStore 1.5.1.3 (сайт на локалке)
    заранее спасибо за помощь :))

  22. Катерина

    25.03.2012 at 21:13

    Я писала сегодня что у меня не получается растянуть, своего комментария я не нашла зачем вы удаляете?

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

      25.03.2012 at 21:55

      Вопрос был задан не по теме — не по этому шалону, вот и был удалён. Пишите мне на почту или в icq (мыло — hruhru.87@mail.ru и Ася — 493-296-671) и опишите свою проблему.

  23. Елена

    20.06.2012 at 15:41

    footer.tpl не могу найти,укажите путь

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

      20.06.2012 at 20:56

      Эх… Почему люди так не внимательны? 🙁 В статье же написано:

      …catalogviewthemeMoushetemplatecommon (здесь части нашей темы – шапка, страницы,правая и левые колонки и изменяемый нами сегодня ФУТЕР)

  24. Дмитрий

    25.11.2012 at 05:20

    Владислав подскажите как поменять фон самих страниц

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

      27.11.2012 at 21:32

      С ОпенКартом 1.4.9 уже не вожусь.

  25. Алексей

    10.02.2013 at 20:40

    При изменении ширины шаблона сайта вот ссылка http://videonablyudenie.com.ua/ съезжает изображение у людей на старых мониторах 1024*768 а у меня все нормально есть ли способ это исправить?

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

      10.02.2013 at 21:06

      Делайте резиновую вёрстку, а не фиксированную (в процентах, а не пикселях).

  26. Шапка растянулась, а все остальное нет. Что делать?

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

      24.04.2013 at 21:59

      1. Какая версия OcStore / OpenCart’а
      2. Какой шаблон правите
      3. Дайте ссылку на ваш сайт

  27. ПАВЕЛ

    12.04.2014 at 01:02

    Добрый вечер. поробовал поменять фон как Вы написали. всё получилось. но поменялась только верхняя часть. я уже все «background» в steelshet менял и ничего, меняеться «поиск» на этот фон? меняеться «войти и зарегиться», а боковики ни меняються если не тяжело подскажите как сделать что бы и боковые части сайта были такого же фона как и верхняя часть. За ранее благодарен !

  28. Огромное спасибо за ваш сайт, очень помогли уроки. Сейчас хочу сделать свое детище резиновым, все делаю как в вашем уроке, меняю данные ширины во всем шаблоне — все меняется как должно. Нл вот беда — левая колонка меняется, а правая (то есть основная с текстом и прочим) остается на месте и наезжает на левую. Голову сломала и перелопатила кучу форумов в попытке исправить.
    Помогите пожалуйста.
    shop-of-tea.ru — мой сайт

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

      24.05.2014 at 23:44

      Проблему ещё не исправили? Был в отпуске.

  29. Огромное спасибо за Ваши уроки!!! Просто и понятно. Самый лучший материал по обучению во всем Инете!:) Можете помочь в вопросах?
    1. Мне необходимо создать мультивалютный магазин (EUR/$/ грн.) — в админке, и при этом на сайте должна высвечиваться только гривна.
    2. Также вопрос как привязаться к автоматическому обновлению курса НБУ + добавить процент.
    3. Как упростить оформление заказа?
    -Мне было бы достаточно несколько полей: 1).ФИО 2).Город. 3).Компания. 4).Номер телефона. 5). Электронный адрес.
    — Перевод только банковский и приватбанк
    — Доставка: самовывоз либо Новая почта.
    Заранее благодарю!!

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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