Русский

Изменение дизайна ArwShop

Подробная информация по каждому из файлов-шаблонов дизайна

Хочу, чтобы товары на главной странице и в разделах отображались в несколько столбцов, как это сделать?
Куда нужно вставлять коды счётчиков, чтобы они были внизу под блоком новостей с левой стороны?
Как открыть для изменения файл .tpl?
Как можно изменить тип, размер и цвет шрифта в магазине?
Как сделать, чтобы рядом с адресной строкой браузера отображался значок (иконка)
Как сделать всплывающее меню для блока каталога товаров?
Как сделать, чтобы поисковая форма отображалась вверху на всех станицах?

Хочу, чтобы товары на главной странице и в разделах отображались в несколько столбцов, как это сделать?

Для вариантов дизайна seawave2, autumn2, steelblue2 в конец файла styles.css (находится в директории design/имя-дизайна) добавьте примерно такой код.

Для всех страниц:

/* НАЧАЛО Товары в несколько столбцов везде */
.lstProduct{
display:inline-block;
width:240px; /* ширина блока товара */
height:300px; /* высота блока товара */
}

.pTitle{
font-size:16px !important; /* размер шрифта названия товара */
text-align:center !important; /* центровка названия товара */
}

.prSmallImg{
float:none; /* отмена выравнивания изображения */
margin:0px; /* внешний отступ изображения */
text-align:center; /* центровка изображения */
}
/* КОНЕЦ Товары в несколько столбцов везде */

Только на главной странице

/* НАЧАЛО Товары в несколько столбцов на главной странице */
.mainProducts .lstProduct{
display:inline-block;
width:240px; /* ширина блока товара */
height:300px; /* высота блока товара */
}

.mainProducts .pTitle{
font-size:16px !important; /* размер шрифта названия товара */
text-align:center !important; /* центровка названия товара */
}

.mainProducts .prSmallImg{
float:none; /* отмена выравнивания изображения */
margin:0px; /* внешний отступ изображения */
text-align:center; /* центровка изображения */
}
/* КОНЕЦ Товары в несколько столбцов на главной странице */

Только в категориях каталога товаров

/* НАЧАЛО Товары в несколько столбцов в категориях каталога товаров */
.catProducts .lstProduct{
display:inline-block;
width:240px; /* ширина блока товара */
height:300px; /* высота блока товара */
}

.catProducts .pTitle{
font-size:16px !important; /* размер шрифта названия товара */
text-align:center !important; /* центровка названия товара */
}

.catProducts .prSmallImg{
float:none; /* отмена выравнивания изображения */
margin:0px; /* внешний отступ изображения */
text-align:center; /* центровка изображения */
}
/* КОНЕЦ Товары в несколько столбцов в категориях каталога товаров */

Только на странице производителя

/* НАЧАЛО Товары в несколько столбцов на странице производителя */
.mnfProducts .lstProduct{
display:inline-block;
width:240px; /* ширина блока товара */
height:300px; /* высота блока товара */
}

.mnfProducts .pTitle{
font-size:16px !important; /* размер шрифта названия товара */
text-align:center !important; /* центровка названия товара */
}

.mnfProducts .prSmallImg{
float:none; /* отмена выравнивания изображения */
margin:0px; /* внешний отступ изображения */
text-align:center; /* центровка изображения */
}
/* КОНЕЦ Товары в несколько столбцов на странице производителя */

Только в результатах поиска

/* НАЧАЛО Товары в несколько столбцов в результатах поиска */
.searchProducts .lstProduct{
display:inline-block;
width:240px; /* ширина блока товара */
height:300px; /* высота блока товара */
}

.searchProducts .pTitle{
font-size:16px !important; /* размер шрифта названия товара */
text-align:center !important; /* центровка названия товара */
}

.searchProducts .prSmallImg{
float:none; /* отмена выравнивания изображения */
margin:0px; /* внешний отступ изображения */
text-align:center; /* центровка изображения */
}
/* КОНЕЦ Товары в несколько столбцов в результатах поиска */


Для старых вариантов дизайна seawave, autumn, steelblue вы можете скачать примеры шаблонов, которые позволяют отображать товары в несколько столбцов:
для ArwShop Trade
для ArwShop Catalog
для ArwShop Market версии 1.xx
для ArwShop Market версии 2.xx
В папке примеров "full" находятся примеры шаблонов с полными возможностями для отображения товаров в 2 столбца. В папке примеров "simple" находятся упрощённые примеры шаблонов (отображаются только фото, название и цена товаров) для отображения товаров в 3 столбца.
Для применения этих шаблонов к своему дизайну, данные файлы нужно поместить в папку скрипта design/ИМЯ_ДИЗАЙНА/tpl, заменив имеющиеся файлы файлами из примеров.

Файлы в ArwShop Trade и ArwShop Catalog:
main_products.tpl - для главной страницы.
category_products.tpl - для разделов каталога товаров.
search_results.tpl - для результатов поиска товаров.

Файлы в ArwShop Market:
main.tpl - для главной страницы.
category.tpl - для разделов каталога товаров.
manufacturer.tpl - для страниц производителей товаров.
search.tpl - для результатов поиска товаров.

Описание принципа работы разделения на несколько столбцов можно найти в файлах помощи в разделе "Изменение дизайна / main_products.tpl - шаблон отображения товаров на главной странице", которые входят в состав установочного дистрибутива (файл help.html или index.html в папке help).


Куда нужно вставлять коды счётчиков, чтобы они были внизу под блоком новостей с левой стороны?

Откройте основной шаблон дизайна, файл design/ИМЯ_ДИЗАЙНА/tpl/design.tpl в текстовом редакторе, и найдите там код:
<!--Левое меню-->
{menu_categories}
{menu_content_pages}
{menu_news}
<!--А СЮДА МОЖНО ВСТАВИТЬ КОД СЧЁТЧИКОВ-->
<!--END OF Левое меню-->



Как открыть для изменения файл .tpl?

Для того чтобы открыть какой-либо файл с помощью программы "Блокнот" ("Notepad") в операционной системе Windows, расширение которого не зарегистрировано на Вашем компьютере или файлы с таким расширением по умолчанию уже открываются какой-то другой программой, нужно сделать следующее (универсальный вариант): нажать кнопку "Пуск" на панели задач (по умолчанию внизу слева в Проводнике Windows), в появившемся меню выбрать "Программы → Стандартные → Блокнот". В окне программы выбрать пункт меню "Файл → Открыть", в появившемся диалоговом окне выбрать Тип файлов: "Все файлы", затем выбрать нужный файл для открытия.
После изменения файла его нужно заменить на сайте.


Как можно изменить тип, размер и цвет шрифта в магазине?

В файл стилей styles.css (находится в папке design/ИМЯ_ДИЗАЙНА) добавьте код, или измените его, если там уже есть элементы body и td. Код примерно такой:
body{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #873D6F;
}

где:
Georgia, "Times New Roman", Times, serif - имена шрифтов (если первый шрифт отсутствует на компьютере пользователя, браузер использует второй, и т.д.).
12px - размер шрифта в пикселях.
#873D6F - цвет шрифта.
Это может не работать во всех частях дизайна (зависит также от используемого варианта дизайна), т.к. для многих других элементов дизайна используются персональные стили, для каждого из которых требуется персональный подход. Стили для большинства элементов находятся в файле styles.css.

Как сделать, чтобы рядом с адресной строкой браузера отображался значок (иконка)

Прежде нужно создать в программе графическом редакторе (или взять готовый) файл в формате .ico (Windows icon) и сохранить его под именем favicon.ico
Файл favicon.ico нужно поместить в корень сайта. А в файл дизайна design.tpl, который находится в папке design/имя_дизайна/tpl между тегами <head> и </head> добавьте такой HTML код:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">


Как сделать всплывающее меню для блока каталога товаров?
В панели администрирования "Настройки / Блоки меню" включите опцию "Всегда показывать подразделы 2-го уровня для всех разделов в вертикальном меню каталога товаров не зависимо от того открыт раздел или нет".
В файл styles.css добавьте

.menu_categories ul li ul{display:none;}
.menu_categories ul li:hover ul{display:block;}
Актуально для дизайна coral, autumn2, seawave2, steelblue2.

Пример стилей для выпадающего вправо меню:
.menu_categories ul li ul{
display:none;
position:absolute;
margin-left:160px;
margin-top:-20px;
background-color:#ffffff;
border:1px solid #bbbbbb;
}
.menu_categories ul li:hover ul{display:block;}
Актуально для дизайна coral, autumn2, seawave2, steelblue2.



Как сделать, чтобы поисковая форма в ArwShop Trade отображалась вверху на всех станицах?

Для этого можно вставить поисковую форму в основной шаблон design.tpl (находится в папке design/ИМЯ_ДИЗАЙНА/tpl) в удобное для Вас место ниже или выше {horizontal_menu}, а из шаблонов category.tpl, main.tpl, search.tpl её удалить.
Код поисковой формы:
<form action="{shop_url}search.php" style="margin:0px;">
<table>
 <tr>
  <td colspan="2">
  {lang.search_products}
  </td>
 </tr>
 <tr>
  <td>
  <input type="text" name="srchtext" size="44" align="middle">
  </td>
  <td>
  <input type="image" src="{design_url}img/search.gif" alt="{lang.to_find}">
  </td>
 </tr>
</table>
</form>



Вернуться к списку разделов

Смотрите также: Помощь администратору ArwShop Market.