ГлавнаяOpencartOpencart размер логотипа

Как изменить логотип в OpenCart. Opencart размер логотипа


Как изменить логотип в OpenCart

Как изменить логотип в OpenCart

От автора: приветствую вас, друзья. Итак, мы продолжаем цикл статей, посвященных знакомству с одной из популярнейших CMS для создания интернет-магазинов – OpenCart (Оперкарт). В этой статье мы поговорим о том, как изменить логотип в OpenCart.

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

Как изменить логотип в OpenCart

А в русской версии OpenCart – таким:

Как изменить логотип в OpenCart

Интернет-магазин на OpenCart!

Создайте интернет-магазин на самой популярной CMS – OpenCart с нуля!

Приступить к созданию

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

Чтобы изменить логотип в OpenCart, нам необходимо перейти в меню Система – Настройки и в редактировании магазина выбрать вкладку Изображения. Именно там указывается текущий логотип и именно там его можно изменить.

Как изменить логотип в OpenCart

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

Как изменить логотип в OpenCart

Например, я выберу логотип компании Apple. После выбора не забываем сохранить изменения и идем смотреть их на сайте.

Как изменить логотип в OpenCart

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

#logo img { max-width: 50px; }

#logo img {

    max-width: 50px;

}

Результат получится вполне приемлемым:

Как изменить логотип в OpenCart

Все просто, не так ли? На этом сегодня все. Больше об OpenCart вы можете узнать из наших бесплатных или платных уроков.

Интернет-магазин на OpenCart!

Создайте интернет-магазин на самой популярной CMS – OpenCart с нуля!

Приступить к созданию

OpenCart: быстрый старт, первые результаты

Создайте свой первый интернет-магазин на OpenCart с полного нуля!

Получить

webformyself.com

OpenCart (8 часть) | Moushe.ru

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

До:                                                       После:

OpenCartMoushe14OpenCartMoushe19

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

1 Вырежем ненужный фон

2 Изменим фон хлебных крошек

3 Изменим фон шаблона

4 Логотип

5 Немного допилим шаблон (нижняя часть блоков, цвет фона и тд.)

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

#header .div5 .left {background: url('../image/header_1_left.png') no-repeat;width: 5px;height: 40px;float: left;}#header .div5 .right {background: url('../image/header_1_right.png') no-repeat;width: 5px;height: 40px;float: right;}#header .div5 .center {background: url('../image/header_1_center.png') repeat-x;height: 40px;margin-left: 5px;margin-right: 5px;}

Вырежем изображения и лишний код:

#header .div5 {clear: both;height: 40px;}

Смотрим на шаблон:

OpenCartMoushe15

2 Теперь откроем папку с картинками ..\catalog\view\theme\Moushe\image и ищем 3 картинки:

header_2_left

header_2_center

header_2_right

немного их перерисуем (люблю png за то что в нём можно сделать прозрачность ):

header_2_leftheader_2_centerheader_2_right

(их тут почти не видно,но они здесь есть Подмигивающая рожица

)

Смотрим на шаблон:

OpenCartMoushe16

3 Откроем картинку fon.jpg и заменим фон на этот:

fon

Откроем stylesheet.css и найдём этот код:

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

добавим цвет фона:

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

Смотрим на шаблон:

OpenCartMoushe17

Симпатичненько, но нужно перерисовать нижнюю картинку у блоков, белые уголки не айс, ищем картинку box_bottom.png и стираем ластиком белые уголки снизу:

box_bottom

Обновим страницу в браузере:

OpenCartMoushe18

Ну вот, другое дело Улыбка

Откроем папку с логотипом ..\image\data немного поработаем над иконкой компьютера:

logo

Смотрим шаблон:

OpenCartMoushe19

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

На сегодня всё.

moushe.ru

Opencart создать страницу по нашему дизайну

Посадка своего дизайна на страницу opencart

Когда переносим наш дизайн в магазин мы занимаемся только стилизацией cms opencart.

Весь функционал есть.

Расширять функционал можно модулями.

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

Если мы хотим переопределить корзину это файл cart.tpl, мы копируем его в нашу тему и в sublime text делаем изменения.

Начнем делать изменения в нашем шаблоне, для этого запустим gulp.

Откроем шапку магазина в файле header.tpl, который мы скопировали в свою тему my из темы по умолчанию.

Файл лежит у нас в папке виртуального сервера openserver, как его установить читаем тут.

Полный путь к файлу C:\OpenServer\domains\opencart.loc\catalog\view\theme\my\template\common\header.tpl.

Откроем файл в программе sublime tex, с правильными настройками для работы.

Содержание статьи

1). Изначально проверяем все пути к файлам.

Меняем папку /default/ на нашу папку с темой /my/.

Нажимаем сочетание клавиш ctrl+h и в поле найти find пишем папку default, в нижнем поле указываем нашу папку my.

Нажимаем клавишу replace all.

Нажимаем сочетание клавиш ctrl+h и в поле найти find пишем папку default

2). Перейдем к навигации nav с идентификатором top и удалим выбор валют.

nav с идентификатором top и удалим выбор валют

3). Копируем nav id=top и добавляем под тег header.

Сверху логотип, посередине будет поиск и справа логин и телефон.

Под строкой row у тега header пишем новую разметку.

  1. Логотип занимает три колонки col-md-3. Вырезаем все, что от логотипа в коде и добавляем в нашу разметку.
  2. Во второй колонке col-md-5 разместим поиск.
  3. Копируем элемент списка li с логином в колонку и добавим ul div class=col-md-4. Перенесем телефон, копируем ссылку с телефоном в третью колонку.

Сделаем вторую линию nav id=top с меню и корзиной.

1. Меню будет в колонке col-sm-8. Копируем в эту колонку nav id=menu, удаляем все внутри списка ul class=nav navbar-nav и добавляем вывод информации . Делаем по аналогии с файлом footer.tpl, выводится внизу информация, которая выводится из административной панели opencart в меню каталог статьи.Информация не отобразится, будет ошибка. Устраняем ошибку созданием модификатора. Готовый файл с модификатором загружаем в проект. Как создать новый модификатор для шапки читать тут. В итоге сверху должна отобразиться информация с меню.

Делаем по аналогии с файлом footer.tpl

2. Переместим код корзины в col-sm-4

Код index.html.

<body> <header> <div> <div> <div> <div> <?php if ($logo) { ?> <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a> <?php } else { ?> <h2><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h2> <?php } ?> </div> </div> <div> <?php echo $search; ?> </div> <ul div> <li><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" data-toggle="dropdown"><i></i> <span><?php echo $text_account; ?></span> <span></span></a> <ul> <?php if ($logged) { ?> <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li> <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li> <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li> <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li> <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li> <?php } else { ?> <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li> <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li> <?php } ?> </ul> </li> <li><a href="<?php echo $contact; ?>"><i></i></a> <span><?php echo $telephone; ?></span></li> </ul> </div> </div> </header> <nav> <div> <div> <div> <nav> <div><span><?php echo $text_information; ?>:</span> <button type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i></i></button> </div> <div> <?php if ($informations) { ?> <ul> <?php foreach ($informations as $information) { ?> <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li> <?php } ?> <li><a href="/skidki">Скидки</a></li> <li><a href="<?php echo $contact; ?>">Контакты</a></li> </ul> <?php } ?> </div> </nav> </div> <div> <?php echo $cart; ?> </div> </div> </div> </nav>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<body>

<header>

<div>

<div>

<div>

<div>

<?php if ($logo) { ?>

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

<?php } else { ?>

<h2><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h2>

<?php } ?>

</div>

</div>

<div>

<?php echo $search; ?>

</div>

<ul div>

<li><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" data-toggle="dropdown"><i></i> <span><?php echo $text_account; ?></span> <span></span></a>

<ul>

<?php if ($logged) { ?>

<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>

<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>

<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>

<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>

<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>

<?php } else { ?>

<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>

<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>

<?php } ?>

</ul>

</li>

<li><a href="<?php echo $contact; ?>"><i></i></a> <span><?php echo $telephone; ?></span></li>

</ul>

</div>

</div>

</header>

<nav>

<div>

<div>

<div>

<nav>

<div><span><?php echo $text_information; ?>:</span>

<button type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i></i></button>

</div>

<div>

<?php if ($informations) { ?>

<ul>

<?php foreach ($informations as $information) { ?>

<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>

<?php } ?>

<li><a href="/skidki">Скидки</a></li>

<li><a href="<?php echo $contact; ?>">Контакты</a></li>

</ul>

<?php } ?>

</div>

</nav>

</div>

<div>

<?php echo $cart; ?>

</div>

</div>

</div>

</nav>

Стилизуем в файле стилей магазина stylesheet.sass.

В opencart, только дописываем свои стили, ничего из системного не переопределяем.

Это готовая система.

  1. Добавим стили к header отступ сверху padding: 10px 0 и серый фон.
  2. Чтобы стилизовать логотип добавим новый класс logo в html. Уменьшим размер логотипа.
  3. У поиска нет классов, просто стилизуем идентификатор #search. Добавим нужные свойства поиску, плюс при наведении и в фокусе будет другой фон. Чтобы поменять слово по умолчанию в поле поиска откроем файл по пути C:\OpenServer\domains\opencart.loc\catalog\language\ru-ru\common\search.php и отредактируем. Изменим кнопку с классом input-group-btn.
  4. Добавим обертке с классом dropdown для личного кабинета и телефона свойство display: inline-block.
  5. Для выпадающего меню dropdown-toggle зададим отступы, размер шрифта и цвет.
  6. Для фокуса, наведения мышкой и активного состояния меню личного кабинета убираем text-decoration: none
  7. Для dropdown-menu добавим рамку и ко всем элементам списка и ссылкам отступ. Будем менять стиль при наведении мышкой &:focus, &:hover.
  8. Чтобы стилизовать телефон, зададим новый класс в html phone, у телефона как и у личного кабинета добавим display: inline-block.

Добавляем стили для второй полосы с меню и корзиной.

  1. Для навигации с классом top-menu. Для главного меню navbar сделаем шрифт font-size: 1.4em. Цвет черный шрифта. Для всех ссылок у дочернего элемента меню &-nav сделаем отступ сверху top: 15px. При наведении уберем текст подчеркнутым и цвет меняется на синий.
  2. Корзина с идентификатором #cart. Внутри кнопка button, смотрим в браузере посмотреть код у элемента, поэтому к button пропишем свойства.

Добавляем стили для второй полосы с меню и корзиной

Код в main.sass.

header background-color: #BA68C8 padding: 10px 0 .dropdown display: inline-block a transition: .3s &.dropdown-toggle color: blue font-size: 1.2em margin-top: 3px 0 0 padding: 8px 0 4px display: block &:hover, &:active, &:focus color: #fff text-decoration: none .dropdown-menu border: 3px solid #b641b0 border-radius: 0 > li > a padding: 10px 30px &:focus, &:hover background-color: blue color: #FFF .phone color: #fff display: inline-block float: right font-size: 1.1em padding-top: 12px padding-left: 10px .fa color: #fff font-size: 1.2em .logo width: 90% #search width: 100% .form-control padding: 5px 15px height: 35px border-radius: 15px background-color: #fff border: 3px solid blue font-size: 20px color: #b641b0 transition: .2s ease margin-top: 5px &:focus, &:hover background-color: #E1BEE7 .input-group-btn position: absolute right: 40px top: 5px .btn padding: 5px 15px background-color: transparent border: none color: #b641b0 font-size: 20px .top-menu .cart-wrapper .dropdown-menu padding: 15px width: 460px a color: #000 .navbar margin-bottom: 0 font-size: 1.4em color: #000 min-height: 40px .navbar-collapse padding: 0 &-nav > li > a padding: top: 15px bottom: 10px &:hover, &:focus background: none color: blue #cart button background-color: blue color: #fff border-radius: 0 padding-top: 15px padding-bottom: 10px border: none font-size: 1.2em text-align: left

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

header

background-color: #BA68C8

padding: 10px 0

.dropdown

display: inline-block

a

transition: .3s

&.dropdown-toggle

color: blue

font-size: 1.2em

margin-top: 3px 0 0

padding: 8px 0 4px

display: block

&:hover, &:active, &:focus

color: #fff

text-decoration: none

.dropdown-menu

border: 3px solid #b641b0

border-radius: 0

> li

> a

padding: 10px 30px

&:focus, &:hover

background-color: blue

color: #FFF

.phone

color: #fff

display: inline-block

float: right

font-size: 1.1em

padding-top: 12px

padding-left: 10px

.fa

color: #fff

font-size: 1.2em

.logo

width: 90%

#search

width: 100%

.form-control

padding: 5px 15px

height: 35px

border-radius: 15px

background-color: #fff

border: 3px solid blue

font-size: 20px

color: #b641b0

transition: .2s ease

margin-top: 5px

&:focus, &:hover

background-color: #E1BEE7

.input-group-btn

position: absolute

right: 40px

top: 5px

.btn

padding: 5px 15px

background-color: transparent

border: none

color: #b641b0

font-size: 20px

.top-menu

.cart-wrapper

.dropdown-menu

padding: 15px

width: 460px

a

color: #000

.navbar

margin-bottom: 0

font-size: 1.4em

color: #000

min-height: 40px

.navbar-collapse

padding: 0

&-nav

> li

> a

padding:

top: 15px

bottom: 10px

&:hover, &:focus

background: none

color: blue

#cart

button

background-color: blue

color: #fff

border-radius: 0

padding-top: 15px

padding-bottom: 10px

border: none

font-size: 1.2em

text-align: left

Делаем адаптивный дизайн магазина opencart.

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

магазин сделан на bootstrap

sdelatlending.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта