Как поменять цвет меню в OpenCart


Содержание материала:

Как изменить, настроить шаблон OpenCart

В этой статье описаны пути к файлам, которые нужно изменять для редактирования шаблона сайта OpenCart

В этой статье описаны пути к файлам, которые нужно изменять для редактирования шаблона сайта OpenCart

Логотип и favicon(иконка)

Изменение логотипа и фавикона не требует от Вас специальных знаний, так как доступно редактирование с админки.

1. Dойдите в панель администратора Opencart.

2. Перейдите Система -> Настройки -> Изменить -> Вкладка «Изображения»

3. В появившейся вкладке жмем кнопку «Очистить» -> затем «Обзор» для загрузки нужного логотипа/фавикона соответственно.

В этой же вкладке можно задать желаемый размер для картинки товара на разных страницах интернет-магазина.

Шрифт и Цветовая гамма & Фон

Для удачного изменения шрифта или цвета отдельных элементов шаблона вы должны быть знакомы с азами html/css.

1. Подключитесь к FTP для редактирования файлов

2. Войдите в корневую папку вашего сайта с файлами Opencart (обычно www или public_html)

3. Перейдите catalog -> view -> theme-> ваша_тема(стандартная default)-> stylesheet -> stylesheet.css

4. Откройте css-файл stylesheet.css для редактирования

5. Задайте требуемый шрифт/цвет элементу шаблона

6. Сохраните изменения и обновите главную страничку сайта в браузере

Фон — Изменить цвет фона можно посредством редактирования значения «background-color» тэга «body».

Шапка (Верхняя часть сайта) & Подвал

1. Подключаемся к FTP используя фтп-менеджер для редактирования файлов

2. Перейдите в корневую папку интернет-магазина с файлами Opencart (обычно это www или public_html)

3. Перейдите catalog -> view -> theme-> ваша_тема(стандартная default)-> template -> common -> header.tpl

4. Откройте header.tpl для редактирования

5. Редактируем код под свои нужды используя html

6. Не забываем о сохранении изменений

Редактируем Подвал (Нижняя часть) — перейдите catalog -> view -> theme-> ваша_тема -> template -> common -> footer.tpl

Редактируем и сохраняем изменения.

Изменение внешнего вида модуля

Редактирование модуля не особо отличается от редактирования шапки, все отличие в размещение нужных файлов.

1.Перейдите в папку catalog -> view -> theme-> ваша_тема -> template -> module

2. Выбираем нужный нам модуль и жмем на редактировать

Для того, чтобы Вы знали какой файл править, приведу соответствие между англоязычным названием модуля(в фтп менеджере) и русскоязычным (в админке)

Как поменять цвет меню в OpenCart

Пришло время изменить цвет и размер кнопок в моем магазине на движке Opencart.
Причины изменения цвета:
1. Цвет кнопки очень тусклый и теряется в общей массе контента.
2. Цвет абсолютно отличный от моих цветов сайта

Причины изменения размера:
1. Размер кнопки маленький и теряется в общей массе контента.
2. Размер кнопки большой (прям гигантский)

Идем по адресу //вашсайт.ru/catalog/view/theme/default/image
Ищем два файла

  • button.png отвечает за цвет и размер кнопки,
  • button-active.png отвечает за цвет и размер кнопки в тот момент, когда мы наводим на нее курсор.

Смело их редактируем в Photoshop-е:
1. Цвет: я использовал старую и добрую заливку.
2. Размер: изменить размер изображения и изменяем высоту картинки до того размера, который Вам необходим. По умолчанию высота 24px если не изменяет память.

Переделываем верхнее меню opencart

Т.к. мы уже переделали opencart под быстрое оформление заказа, теперь нужно убрать из верхнего меню лишние элементы, вроде закладок и личного кабинета. А так же добавить немного нужных ништяков.

Открываем файл: /catalog/view/theme/default/template/common/header.tpl

В российских реалиях выбор языка и валюты не нужен. Далее т.к. у нас аккаунты не предусмотрены удаляем всё что с ним связано:

Следующая задача более интересная, нужно добавить статьи в шапку opencart, но при этом что бы оно не дублировало аналогичное меню в футере. Находим строчку:

И перед ней вставляем:

Но теперь хедеру непонятно откуда взять массив $informations. Что бы объяснить ему, открываем файл: /catalog/controller/common/header.php в котором где-нибуть в районе 39-40 строчки вставляем следующее:

В этом кусочке кода мы подгрузили все статьи в которых НЕ стоит галочка «Отображить снизу».

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

Топ-пост этого месяца:  Как создать список статических страниц в WordPress с помощью wp_list_pages (улучшаем заработок на

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

В opencart по умолчанию не предусмотрена отправка телефона и адреса клиента при оформлении заказа. Почему так сделано- загадка. Чтобы не залазить каждый раз в админку, абсолютно все клиенты просят добавить как минимум телефон в письмо о заказе. Opencart отправляет его из файла order.php, находящегося в /catalog/model/checkout, находим код

В настоящее время с помощью css анимации можно сделать практически всё что угодно. Gif и javascript анимация постепенно уходят на второй план. Преимущество css анимации

Главное меню OpenCart: как добавить, удалить пункт верхнего меню Опенкарт

Вступление

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

Про главное меню OpenCart

В коробочной версии системы управления OpenCart , можно создать главное меню (оно же верхнее меню) магазина, только из категорий родительских категорий.

Дочерние категории родительской категории будут выпадать из пунктов меню родительских категорий автоматически. В настройках меню вы можете задать, как будут показаны дочерние категории. А именно указать количество столбцов дочерних категорий, их порядок и статус (показать/скрыть).

В этой статье я не буду показывать правку кода для другой настройки главного меню. Однако замечу, что правка кода меню делается в файлах:

Обратите внимание, что главное меню коробочной версии адаптивно и занимает весь экран устройства, на котором идёт просмотр. На малых экранах меню сворачивается в кнопку. На фото вы можете видеть, как выглядит меню на мобильных устройствах.

Как добавить новый пункт главного меню

Перейдем к практике и посмотрим, как добавить новый пункт главного меню в демо-меню коробочной версии (для примера).

  • Идем на вкладку «Категории»;
  • Выбираем родительскую категорию товаров и нажимаем значок «Редактировать» в строке выбранной категории;
  • На странице ректора категории, на вкладке «Данные» выделяем чекбокс «Главное меню» (1 на фото);
  • Ниже указываем количество столбцов для дочерних категорий (2 на фото). Значение «0, ноль» будет соответствовать одному столбцу, значению «1»;
  • Не забываем указать сортировку этой категории в главном горизонтальном меню (3).

Убрать пункт меню из главного меню

Чтобы удалить любой пункт верхнего меню OpenCart нужно:

  • Выбрать родительскую категорию товаров и нажать значок «Редактировать» в строке выбранной категории;
  • На странице ректора категории, на вкладке «Данные» убрать галочку в чеке «Главное меню»;
  • Не забыть сохраниться.

Вывод

Согласитесь, в коробочной версии главное меню OpenCart очень просто настраивается. По моему, слишком просто и слишком ограниченно. Если сравнивать настройки меню OpenCart с меню других CMS, оно явно проигрывает.

Однако код OpenCart несложный и всегда можно «допилить» меню системы под себя «ручками». Об этом в других статьях, для продвинутых пользователей. Подписывайтесь на обновления блога.

Редактирование шаблона opencart 3

Одной из наиболее важных и больших нововведений в OpenCart 3.0 является новый редактор тем. Настроить тему по умолчанию, наконец, можно прямо из раздела «Дизайн» панели администратора.

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

Обзор редактора тем Opencart 3.0

Чтобы найти редактор тем, откройте раздел администратора OpenCart и перейдите к Design > Theme Editor.

Прежде всего, важно отметить, что редактор тем OpenCart 3.0 использует Twig в качестве движка шаблонов для PHP.

Это означает, что редактор тем дает вам контроль над элементами HTML в ваших шаблонах. Это не включает в себя модификацию стилей и CSS.

Вы можете узнать о Twig в документации здесь.

Теперь в этом разделе вы заметите три основных поля:

Вы можете выбрать магазин, который хотите настроить, если вы запускаете несколько магазинов из одной установки OpenCart.

Choose a template

Выберите файл шаблона, который вы хотите настроить. Например, если вы хотите отредактировать домашнюю страницу, выберите common, а затем home.twig.

Theme History

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

Как отредактировать шаблон

Допустим, мы хотим изменить один из шаблонов на нашем сайте OpenCart. Мы оставим магазин по умолчанию и выберем шаблон товара.

Шаблон товара содержит файлы .twig, которые вы можете увидеть на скриншоте ниже

Мы выберем файл product.twig файл, чтобы мы могли редактировать страницу товара в нашем магазине OpenCart.

Модификация, которую мы будем реализовывать, проста. Мы изменим цвет ссылки хлебных крошек в навигации.

Вот пример кода, который мы будем использовать:

Вставьте пример вместо 5 строки:

Теперь нажмите кнопку «Сохранить» и перейдите в магазин, чтобы просмотреть изменения.

Топ-пост этого месяца:  Музыка в Facebook Stories - как добавить и поделиться с друзьями

Войдите на любую страницу продукта, и вы заметите, что ссылка на хлебную крошку теперь окрашена в красный цвет:

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

Это был краткий обзор нового редактора тем в OpenCart 3.0, но вы можете получить представление о том, как легко теперь поиграть с дизайном вашего магазина.

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

Нам очень интересно узнать, что вы думаете о новой функции в OpenCart, поэтому, пожалуйста, поделитесь своим мнением и опытом в комментариях ниже!

Как поменять цвет меню в OpenCart

Модули, шаблоны и готовые решения

16 сент. 2013 г.

Изменяем шрифт в названии, описании и цен товаров в списке товаров OpenCart

  1. изменить шрифт в названии товара в списке товаров
  2. изменить шрифт в описании товаров в списке товаров
  3. изменить шрифт цен в списке товаров

Решение:

Редактируем файл
//catalog/view/theme/default/stylesheet/stylesheet.css
Примерно 900 строка

Итак, мы изменили стили в списке товаров на движке OpenCart:

  1. Названия товара
  2. Описания товара
  3. Цены товара

Если вы используете вид: сетка, то необходимо подправить те же классификаторы, но с окончанием grid

Переделываем верхнее меню opencart

Т.к. мы уже переделали opencart под быстрое оформление заказа, теперь нужно убрать из верхнего меню лишние элементы, вроде закладок и личного кабинета. А так же добавить немного нужных ништяков.

Открываем файл: /catalog/view/theme/default/template/common/header.tpl

В российских реалиях выбор языка и валюты не нужен. Далее т.к. у нас аккаунты не предусмотрены удаляем всё что с ним связано:

Следующая задача более интересная, нужно добавить статьи в шапку opencart, но при этом что бы оно не дублировало аналогичное меню в футере. Находим строчку:

И перед ней вставляем:

Но теперь хедеру непонятно откуда взять массив $informations. Что бы объяснить ему, открываем файл: /catalog/controller/common/header.php в котором где-нибуть в районе 39-40 строчки вставляем следующее:

В этом кусочке кода мы подгрузили все статьи в которых НЕ стоит галочка «Отображить снизу».

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

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

В opencart по умолчанию не предусмотрена отправка телефона и адреса клиента при оформлении заказа. Почему так сделано- загадка. Чтобы не залазить каждый раз в админку, абсолютно все клиенты просят добавить как минимум телефон в письмо о заказе. Opencart отправляет его из файла order.php, находящегося в /catalog/model/checkout, находим код

В настоящее время с помощью css анимации можно сделать практически всё что угодно. Gif и javascript анимация постепенно уходят на второй план. Преимущество css анимации

Opencart 2. Как изменить цвет навигационного меню в Opencart 2

Просмотров: 12 371

23 декабря 2015

kubiknoobik

не могу найти где редактируется цвет всплывающих из под этого меню разделов

Анатолий Дрокин

Константин Заболотских

Пробовал несколько раз ничего не получилось! Заменяю данные обновляю-цвет возвращается обратно! В чем дело?

Sofia Yakimova

можно ли редактировать код в самом файле на хостинге, не скачивая сам файл и не подключаясь по ftp?

Aliye Leyla Emirdağ

в версии 2.3.0.2 данный способ не работает (скопировала файл с сервера на компьютер, отредактировала в Notepade+, соранила, заменила на сервере, обновила.. но все по старому 🙁

Анастасия Сизова

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

Dmitry Ivanov

в товаре в выпадающем меню (например размер) выбранный размер подсвечиватся синим цветом. в каком месте подправить его на чёрный (например)

V >3 года назад

Спасибо за видео. Есть актуальный вопрос. Например шапка сайта стала выше, как туда перенести поиск и корзину?
Снимайте про опенкарт 2 больше. Сейчас еще очень мало видео на эту версию. будете первым.

Opencart 2. Как изменить цвет навигационного меню в Opencart 2

Показать панель управления

  • Опубликовано: 23 декабря 2015
  • Изменение цвета навигационного меню в интернет-магазине Opencart 2 правкой css файла.
  • Наука и техника
  • #opencart2#меню Opencart 2#цвет меню Opencart 2#изменение цвета меню в Opencart 2

Комментарии • 22

Тем кому нужно выпадающее меню изменить. В версии 2.х строка 86,87
.dropdown-menu li > a:hover <
text-decoration: none;
color: #ffffff;
background-color: #цвет;
background-image: linear-gradient(to bottom, #цвет, #цвет);

не могу найти где редактируется цвет всплывающих из под этого меню разделов

Пробовал несколько раз ничего не получилось! Заменяю данные обновляю-цвет возвращается обратно! В чем дело?

Здравствуйте!
На с/ш не совсем понятно, как включить эту функцию.
Прошу подсказать.
Заранее признателен.

Согласен с Вами: в новой версии (у меня 2.3.0.2.2)изменив один цвет, ничего не меняется. Нужно менять несколько цветов в файле css — тогда получится. Всего этого есть другое решение: модуль Super Custom Theme:
https://www.opencart.com/index.php?route=marketplace/extension/info&extension_ >Все работает: http://prntscr.com/f130qe

Топ-пост этого месяца:  РАЕК аудитория Рунета достигла 90 млн. пользователей

можно ли редактировать код в самом файле на хостинге, не скачивая сам файл и не подключаясь по ftp?

хотя вспомнил и третий вариант — можно редактировать через админку опенкарта в модуле code manager

варианта два — 1) установить winscp и notepad++ и открывая файлы через winscp в нотерад++, редактируете их в кеше winscp, а при сохранении он сразу сохраняется на сервере. второй вариант через админку на хостинге(ну тут думаю все понятно)

в версии 2.3.0.2 данный способ не работает (скопировала файл с сервера на компьютер, отредактировала в Notepade+, соранила, заменила на сервере, обновила.. но все по старому 🙁

Спасибо. Помогло. В другом свежем браузере отражается правильно

работает в любой версии..чистите кеш..как вариант кеш модификаторов почистить

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

Благодарю) буду пробовать

промотр кода через chome правой кнопкой мыши «просмотреть код», редактирование — аналог блокнота с правильной кодировкой, точнее с возможностью выставлять свою кодировку файла — notepad++

в товаре в выпадающем меню (например размер) выбранный размер подсвечиватся синим цветом. в каком месте подправить его на чёрный (например)

уже нашел, люди пишут что нужно подменять библиотеки, а стандартными css это не меняется (((

+Dmitry Ivanov (fisher) на вскидку не подскажу..но путь анализа тот же самый..на объекте выбираете исследуемый элемент «показать код элемента» и смотрите соотвествующий css файл

Спасибо за видео. Есть актуальный вопрос. Например шапка сайта стала выше, как туда перенести поиск и корзину?
Снимайте про опенкарт 2 больше. Сейчас еще очень мало видео на эту версию. будете первым.

Opencart 2. Как изменить цвет навигационного меню в Opencart 2

Изменение цвета навигационного меню в интернет-магазине Opencart 2 правкой css файла.

Alexandr Khu 9 개월 전

kubiknoobik 2 년 전

не могу найти где редактируется цвет всплывающих из под этого меню разделов

Анатолий Дрокин 2 년 전

Константин Заболотских 2 년 전

Пробовал несколько раз ничего не получилось! Заменяю данные обновляю-цвет возвращается обратно! В чем дело?

Здравствуйте! На с/ш не совсем понятно, как включить эту функцию. Прошу подсказать. Заранее признателен.

Андрей Малков 2 년 전

Согласен с Вами: в новой версии (у меня 2.3.0.2.2)изменив один цвет, ничего не меняется. Нужно менять несколько цветов в файле css — тогда получится. Всего этого есть другое решение: модуль Super Custom Theme: www.opencart.com/index.php?route=marketplace/extension/info&extension_ >

Sofia Yakimova 2 년 전

можно ли редактировать код в самом файле на хостинге, не скачивая сам файл и не подключаясь по ftp?

Sergey Sadykov 2 년 전

хотя вспомнил и третий вариант — можно редактировать через админку опенкарта в модуле code manager

Sergey Sadykov 2 년 전

варианта два — 1) установить winscp и notepad++ и открывая файлы через winscp в нотерад++, редактируете их в кеше winscp, а при сохранении он сразу сохраняется на сервере. второй вариант через админку на хостинге(ну тут думаю все понятно)

Aliye Leyla Emirdağ 2 년 전

в версии 2.3.0.2 данный способ не работает (скопировала файл с сервера на компьютер, отредактировала в Notepade+, соранила, заменила на сервере, обновила.. но все по старому 🙁

Aliye Leyla Emirdağ 2 년 전

Спасибо. Помогло. В другом свежем браузере отражается правильно

Sergey Sadykov 2 년 전

работает в любой версии..чистите кеш..как вариант кеш модификаторов почистить

Анастасия Сизова 3 년 전

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

Анастасия Сизова 3 년 전

Благодарю) буду пробовать

Sergey Sadykov 3 년 전

промотр кода через chome правой кнопкой мыши «просмотреть код», редактирование — аналог блокнота с правильной кодировкой, точнее с возможностью выставлять свою кодировку файла — notepad++

Dmitry Ivanov 3 년 전

в товаре в выпадающем меню (например размер) выбранный размер подсвечиватся синим цветом. в каком месте подправить его на чёрный (например)

Dmitry Ivanov 3 년 전

уже нашел, люди пишут что нужно подменять библиотеки, а стандартными css это не меняется (((

Sergey Sadykov 3 년 전

+Dmitry Ivanov (fisher) на вскидку не подскажу..но путь анализа тот же самый..на объекте выбираете исследуемый элемент «показать код элемента» и смотрите соотвествующий css файл

VideoPlay 3 년 전

Спасибо за видео. Есть актуальный вопрос. Например шапка сайта стала выше, как туда перенести поиск и корзину? Снимайте про опенкарт 2 больше. Сейчас еще очень мало видео на эту версию. будете первым.

Sergey Sadykov 3 년 전

+VideoPlay посмотрите вот этот ролик koreporter.com/v/%EB%B9%84%EB%94%94%EC%98%A4-OuJkVUYBUhE.html , думаю вопросы по шапке отпадут. Пишите вопросы при работе с опенкартом — если смогу с удовольствием помогу))

Спасибо! Ставлю «палец вверх»!

Sergey Sadykov 3 년 전

+Евгений Карагандинец взаимно) пишите, если есть какие то еще трудности)

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