Moushe.ru

Блог обо всём

OpenCart (6 часть)



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

До:                                                       После:

OpenCartMoushe8OpenCartMoushe10

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

1 Изменим панель навигации

Откроем header.tpl и ищем этот код:

<div class="div4"><a href="<?php echo str_replace('&', '&amp;', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo str_replace('&', '&amp;', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo str_replace('&', '&amp;', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
<?php } ?>
<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>

вырежем его и вставим под эти строки:

<div class="div5">
<div class="left"></div>
<div class="right"></div>
<div class="center">

Смотрим сайт:

OpenCartMoushe9

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

#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
padding-top: 70px;
}

#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/tab_1.png') no-repeat;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: url('../image/tab_2.png') no-repeat;
color: #FFF;
padding-bottom: 10px;
z-index: 3;

и правим:

#header .div4 {
width: 510px;
float: left;
height: 32px;
padding: 1px 0px 0px 0;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: #fff;
color: #000;
padding-bottom: 10px;
z-index: 3;
}

Смотрим на сайт:

OpenCartMoushe10

Перекрасим синий фон на серый, откроем папку ..\Moushe\image и заменим картинки:

header_1_leftheader_1_centerheader_1_right

Результат наших трудов:

OpenCartMoushe10

На этом сегодняшний урок окончен.

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

  1. Дмитрий

    18.07.2011 at 04:41

    Отличные уроки, большое спасибо!
    Ждем еще:)

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

    18.07.2011 at 23:15

    Спасибо, в следующем уроке мы вырежем ненужную графику и немного перерисуем хлебные крошки, а в 8 уроке вас ждёт сюрприз — шаблон засияет новыми цветами. 🙂 Следите за новостями

  3. Владислав, спасибо огромное за уроки!!!
    Я себя прям веб-дизайнером почувствовал)))))
    Все отлично разложено по урокам.
    Только вот с этим уроком у меня не получилось.
    Получилась такая картинка — [URL=http://radikal.ru/F/s59.radikal.ru/i166/1110/14/2d7c14f5aee1.jpg.html][IMG]http://s59.radikal.ru/i166/1110/14/2d7c14f5aee1t.jpg[/IMG][/URL]
    Пробовал сам разобраться, но тоже не получалось, а потом просто скопировал твой код — и все равно не получилось.
    Как то странно.
    Буду дальше разбираться, тяжело в учении — легко в бою.))))

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

    05.10.2011 at 22:37

    Вы Stylesheet поправили? Если да то div лишний поставили

  5. Оксана

    29.10.2011 at 12:39

    А можно кнопки «главная», «кабинет » и т.д. выровнять по центру, а не по левому краю?

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

      29.10.2011 at 13:34

      Измените это:
      #header .div4 {
      width: 510px;
      float: left;
      height: 32px;
      padding: 1px 0px 0px 0;
      }

      на это:
      #header .div4 {
      width: 510px;
      float: center;
      height: 32px;
      padding: 1px 0px 0px 0;
      }

    • Оксана

      29.10.2011 at 14:38

      Не выходит почему-то. Всё равно всё слева.

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

      29.10.2011 at 16:45

      Дайте мне ссылку на сайт, посмотрим в чём проблема.

  6. Оксана

    29.10.2011 at 17:05

    Сайт пока на денвере только

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

    29.10.2011 at 17:23

    Скриншот на почту: hruhru.87@mail.ru

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

    29.10.2011 at 18:02

    Откройте header.tpl и поместите содержимое

    < *div class="div4"> до < */div>

    в < *center> < */center> – только * удалите

    Движок сайта не даёт вставить в комменты код полностью. 🙂

    • Оксана

      29.10.2011 at 18:52

      Всё, получилось! Спасибо огромное!

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

      29.10.2011 at 18:56

      Не за что 🙂

  9. Роман

    07.11.2011 at 02:21

    А мне вот что непонятно, (вторые сутки мучаю код:))
    Не могу добиться чтоб ширина поиска соответствовала ширение content.
    Если задавать в пикселях то на разных экранах конечно по разному выглядит.
    Задаю в % тоже дурня получается. Может как-то сделать
    ширина поиска = ширина сайта — ширина левой

  10. Роман

    07.11.2011 at 02:26

    Можно ли сделать чтоб поиск по ширение менялся в зависимости от разрешения экрана (как content)? А то задашь в пикселях — на разных экранах по разному выглядит конечно.
    Поставлю % вместо пикселей тоже по разному получается но не так же как content.
    Как вообще cmsка считает ширину content?

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

      07.11.2011 at 10:45

      В Stylesheet.css задаётся общая ширина шаблона и есть код отвечающий за ширину колонок, всё оставшееся место отдаётся контенту — центральной колонке. Вам просто нужно задать ширину шаблона в пикселях (пример 1000px) и вычесть из неё ширину боковой колонки (пример 250px) и получившуюся цифру задать поиску (пример 750px), и задать отступ справа или слева (пример 250px) и всё.

      Если ширина шаблона задана в процентах то и ширину боковой колонки задаёте в процентах, и панель поиска тоже в процентах.

  11. Роман

    07.11.2011 at 18:27

    Спасибо, будем искать ширину шаблона, потому что пока поиски не увенчались успехом.

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

      07.11.2011 at 22:25

      Ширина контента:

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

      ширина колонок и отступы:

      #column_left {
      float: left;
      width: 180px;
      margin-right: 10px;
      clear: left;
      }
      #column_right {
      float: right;
      width: 180px;
      margin-left: 10px;
      clear: right;
      }
      #content {
      margin-left: 190px;
      margin-right: 190px;
      margin-bottom: 10px;

  12. Роман

    08.11.2011 at 00:27

    Мои данные и собственно суть проблемы
    #container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;

    #column_left {
    float: left;
    width: 190px;
    margin-right: 10px;
    clear: left;
    }
    #column_right {
    float: right;
    width: 190px;
    margin-left: 10px;
    clear: right;

    В итоге что имеем:
    если задать поиск в % и редактировать чтоб нормально выглядело на экране (1680 на 1050), то на маленьком экране (800 на 600) поиск будет выходить гораздо шире и не будет смотреться. Есть варианты сделать колонки в % но тож не тот результат будет. Или сайт в пикселях и снова мы не получим нужного результата.
    Надеюсь я доступно описал суть проблемы, зарание спасибо за ответ.
    И отличный блог побольше вам успехов.

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

    08.11.2011 at 12:31

    Тогда вам придётся сделать несколько stylesheet.css под разные разрешения экрана и поставить скрипт который проверяет разрешение экрана у посетителя и выдаёт ему нужный stylesheet.css и делать шаблон для экранов с разрешением 800x600px не вижу смысла — такие древности встречаются слишком уж редко. 🙂

  14. Роман

    08.11.2011 at 16:21

    Спасибо, не буду заморачиваться оставлю в пикселях.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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