Moushe.ru

Блог обо всём

OcStore 1.5.4.1 делаем шаблон NewBlue (1 часть)



Сегодня мы с вами начнём делать новый шаблон для OcStore 1.5.4.1.

newblue

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

1. Выберем рубль стандартной валютой

2. Отключим валюты

3. Отключим языки

4. Копируем и переименовываем стандартный шаблон

5. Выбираем наш новый шаблон

6. Изменим ссылки на css файлы

7. Изменим css стили

8. Добавляем фон шапке шаблона

Приступим:

1. Откроем админку: система/ настройки/ изменить/ локализация/ валюта/ рубль/ сохранить.

2. Откроем админку: система/ локализация/ валюты/ ставим галочки на euro и us dollar и удаляем.

3. Откроем админку: система/ локализация/ языки / ставим галочку на english и удаляем.

4. Откроем папку ../catalog/view/theme в этой папке находятся все наши шаблоны (вернее пока только один – default), копируем папку default на рабочий стол компьютера (или любое удобное вам место) и переименовываем её в newblue, забрасываем получившуюся папку в ../catalog/view/theme.

5. Откроем админку: система/ настройки/ изменить/ витрина/ шаблон магазина/ newblue/ сохранить.

6. Откроем файл ../catalog/view/theme/newblue/template/common/header.tpl и изменим эти строки:

19 - <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

35<link rel=»stylesheet» type=»text/css» href=»catalog/view/theme/default/stylesheet/ie7.css» />

38<link rel=»stylesheet» type=»text/css» href=»catalog/view/theme/default/stylesheet/ie6.css» />

на эти:

19 - <link rel="stylesheet" type="text/css" href="catalog/view/theme/newblue/stylesheet/stylesheet.css" />

35<link rel=»stylesheet» type=»text/css» href=»catalog/view/theme/newblue/stylesheet/ie7.css» />

38<link rel=»stylesheet» type=»text/css» href=»catalog/view/theme/newblue/stylesheet/ie6.css» />

7. Откроем файл ../catalog/view/theme/newblue/stylesheet/stylesheet.css и вместо этих строк (6-12):

body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

вставим эти:

body {
background-color: #2e99e4;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

вместо этих строк (35-42):

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

вставим эти:

a, a:visited, a b {
color: #fff;
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}

вместо этих строк (67-72):

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

вставим эти:

#container {
width: 1000px;
background: url('../image/fonhead.jpg') no-repeat;
padding: 0px 250px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

изменим эти строки (321-334):

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

на эти:

#menu {
background: #fff;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 0px 5px;
}

изменим эти строки (337-342):

#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}

на эти:

#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 0px 5px 5px 0px;
}

изменим эти строки (345-347):

#menu > ul > li > a.active {
background: #000;
}

на эти:

#menu > ul > li > a.active {
background: #2e99e4;
}

изменим эти строки (348-365):

#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

на эти:

#menu > ul > li > a {
font-size: 14px;
font-family:"Myriad Pro";
color: #000;
text-decoration: none;
display: block;
padding: 10px 10px 10px 10px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
color: #fff;
background: #2e99e4;
}

Мы ещё вернёмся к этим стилям – на первом шаге нам нужны общие очертания будущей темы, а потом уже сделав основу будем её дорабатывать.

8. Откроем папку ../catalog/view/theme/newblue/image и поместим в неё этот фон:

fonhead

(фон конечно не ахти, но для урока вполне подойдёт)

На сегодня всё, до новых встреч.

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

  1. Вячеслав

    05.08.2013 at 10:59

    Всё отлично! Мне это и нужно. НО хотелось бы описание, а то «это заменить на это» как то не очень. Мне хочется знать что мы меняем. Если возможно, хотя бы вкратце .))

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

      05.08.2013 at 22:22

      Я всё таки не учебник пишу. Написание статьи занимает кучу времени — мне приходится проделывать все шаги урока, описывать их, корректировать текст, обрабатывать скриншоты, рисовать графические элементы, стараться оптимизировать css стили, если я буду ещё подробнее описывать статьи — я буду размещать их раз в месяц, если читателей это устроит я готов пойти на это, хотя гораздо проще купить несколько учебников — html, css, php и изучать их. 🙂

  2. Дмитрий

    12.09.2013 at 12:49

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

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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