Moushe.ru

Блог обо всём

OcStore 1.5.5.1.1 несколько улучшений (1 часть)



Сегодня я решил немного подкорректировать стандартный шаблон от OcStore 1.5.5.1.1. В этом уроке мы поработаем только над элементами которые выводятся на главной (и не только) странице.

DoPosle

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

  • Изменим размер меню навигации
  • Изменим размер шапки шаблона
  • Отцентрируем карточки товара в модулях

Приступим:

Откроем файл ../catalog/view/theme/default/stylesheet и вместо этих строк (92-97):

#top {
height: 30px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

вставим эти:

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

(мы расширили верхнее меню с ссылками и убрали 1 пиксельную полоску сверху, она была лишней)

вместо этих строк (142-148):

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

вставим эти:

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

(мы добавили корзине отступ сверху в 5 пикселей, а то картинка корзины была уродливо прижата к верхней панели браузера)

вместо этих строк (286-294):

#header #welcome {
position: absolute;
top: 7px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}

вставим эти:

#header #welcome {
position: absolute;
top: 10px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}

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

вместо этих строк (298-305):

#header .links {
position: absolute;
left: 290px;
top: 8px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}

вставим эти:

#header .links {
position: absolute;
left: 290px;
top: 10px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}

(мы опустили ссылки главная, закладки, корзина покупок, оформление покупок на 2 пикселя ниже)

результат:

1

Уже лучше, но всё равно выглядит не завершёно, будем исправлять, вместо этих строк (92-96):

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

вставим эти:

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-radius: 0 0 5px 5px;
background: #F8F8F8;
}

(мы добавили 1 пиксельную полоску справа и слева от нашего меню, так-же мы закруглили нижние уголки блока)

результат:

2

Вместо этих строк (100-106):

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

вставим эти:

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

(мы увеличили размер шапки на 30 пикселей)

вместо этих строк (107-111):

#header #logo {
position: absolute;
top: 33px;
left: 15px;
}

вставим эти:

#header #logo {
position: absolute;
top: 55px;
left: 15px;
}

(мы опустили картинку-логотип чуть ниже, на 22 пикселя)

результат:

3

ну вот, совсем другое дело.

Мне нравится стандартный шаблон от OcStore, но ужасно раздражает некрасиво выглядящие модули (товары, изображения, цены и кнопка купить прижаты к левому краю):

image

вместо этих строк (666-668):

.box {
margin-bottom: 20px;
}

вставим эти:

.box {
margin-bottom: 20px;
text-align: center;
}

вместо этих строк (700-706):

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

вставим эти:

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

результат:

5

На сегодня пожалуй всё, следите за нашими новостями.

43 Комментария

  1. Спасибо, я в верстке профан, очень помогло:)

  2. Очень понравилась и помогла статья, автор пиши еще, жду с нетерпением, есть вопросы по шаблону: как убрать в шапке валюты, по сути они не нужны, ссылки «войти» зарегистрироваться и весь текст в строке сделать больше

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

      04.10.2013 at 20:33

      1. Валюты убираются в админке: Система — Локализация — Валюты — Изменить — выбираем валюту и удаляем или отключаем
      2. #welcome, #links добавляем или правим строку font-size: **px; где ** размер шрифта (stylesheet.css)

  3. разобрался, поменял. А вот например как упростить процесс регистрации, убрать лишние строки. По дизайну еще например как сделать чтобы вместо «Войти или зарегистрироваться» были уже поля ввода логина пароля и кнопочка «Зарегистрироваться». Также править нижнюю строку.

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

      07.10.2013 at 19:14

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

  4. Владислав а напишите урок по редактированию карточки товара.
    Думаю многим бы он пришёлся по вкусу.

  5. Скачал ocstore-1-5-5-1-1 с оф. сайта. Там был модуль «Фильты» не активирован — активировал, добавил фильтр. Захожу в Каталог — Категории — Изменить (выбранную) — Данные. Там есть поле «Фильтры: (Автодополнение)». Ввожу туда имя фильтра, сохраняю — и ничего. Поле Фильтры всё равно остаётся пустым. Фильтры в 1-5-5-1-1 вообще работают?

  6. Анатолий

    15.10.2013 at 14:18

    Спасибо за помощь!Понятно, доходчиво! а то я новичок в этом деле а толком в интернете не могу найти как что делать) а тут по полочкам все описано!!!!!)))Спасибо!!!

    • Светлана

      21.10.2013 at 16:44

      Замечательная статья! Все очень подробно и понятно расписано!
      Подскажите пожалуйста, как «Поиск» опустить ниже, где прописывать количество пикселей, в css все перепробовала, не получается

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

      21.10.2013 at 21:48

      header search ищите, положение фиксированное, top и right изменяйте, размер поля ввода поиска изменяется там же, если не понятно пишите мне в контакте — в комментарии не вставляется код.

  7. Подскажите пожалуйста, а как в данной версии opencart отключить регистрацию пользователей, т.е. чтобы заказы оформлялись сразу без регистрации и предложений произвести ее.

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

      07.11.2013 at 22:54

      В админке отключите регистрацию, возможно придётся ещё файл оформления заказа переделать.

  8. Владимир

    21.11.2013 at 17:06

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

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

      21.11.2013 at 22:01

      Выполните последнюю часть урока в обратную сторону — снизу вверх.

  9. Здравствуйте. У Вас действительно много классных и полезных статей, но решения своей проблемы я пока не нашел.
    Суть проблемы. В магазине будет две цены — розница и опт, сделано с помощью скидок и акций.
    span class=»price-old» и span class=»price-new» переделаны стилями под свои нужды.
    Нужно сделать, чтобы после цен было написано: (опт) и (розн.)
    Вообще не врубаюсь, куда это писать (в category.tpl, наверное) ничего не получается.
    Помогите, пожалуйста.

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

      17.12.2013 at 00:02

      Ссылку на сайт бы…

  10. РОМАН

    28.12.2013 at 21:03

    добрый вечер
    если можно подскажите ПОСЛЕДОВАТЕЛЬНО СТЬ настройки опенкарт и установки разных модулей(настрой ка ЧПУ и seo , VQMOD, модуль export-import, ssl, система получения платижей….), хочу сделать интернет магазин детской одежлы , у меня OcStore 1.5.5.1.1. . СПАСИБО

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

      28.12.2013 at 22:10

      Вот здесь вы найдёте ответы на большинство ваших вопросов — http://opencartforum.ru/forum/12-общие-вопросы/, написать сам не смогу — материал получился бы слишком большим, размером с книгу.

  11. РОМАН

    31.12.2013 at 00:38

    Если можно, скажите мне по пунктах что делать , а уже как делать я поищу .Так как на форумам всего очень много по разных направлениях поэтому трудно понять надо это мне или нету. Так как я уже говорил у меня OcStore 1.5.5.1.1 и хочу сделать интернет магазин детской одежды . Большое спасибо!

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

      01.01.2014 at 16:38

      01. Установите OcStore — на моём блоге есть статья
      02. Установите vqmod — на моём блоге есть статья
      03. Смотрите модули на myopencart.ru
      04. Смотрите модули на opencart.com
      05. Переводите модули скаченные с opencart.com — на моём блоге есть статья
      06. Покупаете модуль робокассы и SimpleCart
      07. Наполняете магазин товарами
      08. Читаете материалы по SEO
      09. Регистрируетесь на Яндекс Маркете, если у вас конечно есть ИП, ООО и т.д.
      10. Выполняете все требования маркета и оплачиваете его
      11. Принимаете заказы с маркета

  12. Сергей

    11.01.2014 at 19:10

    Здравствуйте.Спасибо за урок. Вопрос такой — нельзя ли поменять цвет кнопок =купить= и как это сделать. Если можно подробно….Заранее спасибо.

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

      11.01.2014 at 21:45

      В папке image лежат две картинки фона, перекрашивайте их и всё.

  13. Сергей

    12.01.2014 at 13:07

    Большое Спасибо, что отзываетесь на просьбы. —-дошел сам с помощью фаербага на мазиле и с вашим советом где-то в коментах. А вот теперь , при клике на кнопку =купить= отбрасывает в верх страницы, не открывается способ доставки, в корзине появляется товар и все. В настройках ничего не менял, только оформление. И еще такие вопросы — как правильно сменить фавиконку, а то у меня изменилась только на панели управления. И еще обязательно ли переименовывать файл .htaccess txt. До этого пользовался joomla….сейчас заблудился в папках

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

      12.01.2014 at 21:59

      1. Простое перекрашивание двух фоновых картинок не убивают корзину.
      2. Если в админке сменили фавикон чистите куки у браузеров, иконка должна появиться и на сайте.
      3. Обязательно.

  14. Здравствуйте! Помогите: как мне сделать шапку и главное меню также, как и здесь http://deliri.ru/demoshop/# + добавить в меню «главная»

    Спасибо!

  15. Сергей

    14.01.2014 at 09:40

    Здравствуйте, а можно этот шаблон расширить?, может где-то об этом уже писали писали?

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

      14.01.2014 at 12:36

      Stylesheet.css #container — в нём задана ширина.

  16. Сергей

    14.01.2014 at 17:36

    Спасибо, сделал, а вот как убрать =валюта= с шапки. Языки убрал с админки, а это не хочет…

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

      14.01.2014 at 21:12

      Статус ненужных валют уберите, выберите свою валюту вместо валюты по умолчанию.

  17. Татьяна

    21.01.2014 at 10:18

    Спасибо большое за подробное описание. Благодаря Вам у меня все получилось.

  18. Сергей

    27.01.2014 at 19:55

    Здравствуйте, может не здесь задаю вопрос, надеюсь что ответите. Хочу в главном горизонтальном меню — где категории поставить -статью- (доставка\оплата) вот как это сделать.

  19. Сергей

    28.01.2014 at 21:14

    Что-то не получается—- 2. Открываем header.tpl и в div меню вставляем новую ссылку по типу уже существующих. — не соображу как и где ?? , нельзя ли по подробнее., — конечно буду изучать ваши статьи ,….но это уже сейчас надо…

  20. Артём

    07.07.2014 at 10:23

    Зачётная статья! Спасибо автору!
    Ребят, такой вопрос:
    Если зайти в категории, то отображается список товаров с описанием, ценой и кнопкой купить. Цена отображается не красиво, прижата к верху и мелким шрифтом, как это можно поменять? заранее спасибо!
    Вот: http://honey-magazine.ru/index.php?route=product/category&path=18

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

      07.07.2014 at 23:33

      Пишите мне в контакт — http://vk.com/mag1987 — в комментарии код не вставить.

  21. Натали

    17.09.2014 at 13:50

    Спасибо за статью. Но у вас в примере ошибка
    .box-product > div {
    width: 168px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    }

    Думаю, второй раз должно быть margin-left

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

      17.09.2014 at 21:40

      Спасибо за обнаруженную ошибку, исправил — просто два раза повторил одну строку.

  22. Владимир

    26.06.2015 at 17:47

    Большое спасибо за статью!
    Хотелось еще добавить для полного счастья.Подскажите как
    убрать отображение под категорий при наведении на «Категории» в главном меню.Чтобы под категории выпадали при наведении на категории.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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