Вид витрины Virtuemart

Микст Virtuemart и Joomla хороший инструмент для продажи товаров, но связка приносит доход только при правильной её настройке и оформлении. Если витрина кривая (слишком большая или маленькая, уезжает в сторону или режет глаз, картинки дружат организмами на полразмера), то продавать можно лишь себе в целях повышения собственного эго. Сегодня я расскажу, как привести в порядок витрину Virtuemart и добиться от неё отдачи.

Количество колонок

Этот пункт рассмотрим на примере старенького магазина Virtuemart 1.1.8 – суть везде остаётся одна. Витрина этого движка выводится в <table>,  и нам надо добиться, чтобы она занимала всё пространство, а картинки не липли друг к другу как казанская сирота к богадельне.

Количество колонок витрины

За количество колонок отвечает файл:

components/com_virtuemart/themes/default/templates/common/categoryChildlist.tpl.php

Точнее его строка:

$categories_per_row = 4;

По умолчанию колонки 4, меняем по  фантазии.

Центровка витрины

Здесь же указана центровка ячейки td:

<td align="center" width="<?php echo $cellwidth ?>%" >

Можно поменять center на left или right. Куда судьба тянется.

Центровка самой таблицы идёт в css шаблона:

table {margin: auto;}

Margin: auto выровняет таблицу по центру, если она не занимает всего пространства сегмента. Если таблиц много, а выравниваем только витрину, то создайте для неё отдельный класс, например,

<table>

И пропишите для него свой стиль, например:

table.vitrina {margin: auto;}

В css шаблона Joomla.

Изменение размера картинок в Virtuemart

Размер картинок

Размеры картинок указываются в стилях шаблона Joomla. Количество колонок и размер картинок правят одновременно: больше колонок – меньше размер фото.

Вот пример стиля картинок:

img { border-radius: 10px; height: auto; max-width: 150%;}

max-width: 150% показывает, что максимальный размер фото 150%,

border-radius:10px закругляет края картинок,

height: auto указывает на автоматическое выравнивание фото по высоте ячейки. Можно дополнительно добиться счастья за счёт:

overflow: auto

Тогда фото не будут налазить друг на друга при последовательном выводе элементов в HTML.

Второй вариант изменения размера ячеек на витрине это правка её дива. Например, в categoryChildlist.tpl.php у нас указан див

<div>

За его отображение отвечает:

#header13 {height: auto; width: 100%}

Этот вариант подойдёт, если надо изменять только витрины, более ничего не затрагивая.

Название категории

Если для названия категории на витрине не создан отдельный класс, то за его вывод по умолчанию отвечает a, пример:

a { color: #06c; font-weight: 400; outline: medium none; text-decoration: none;}

Тут всё понятно –

text-decoration: none указывает, что подчёркивания нет, если изменить на значение «underline», то оно появится, а line-through это зачёркнутый текст,

font-weight – это насыщенность шрифта,

outline: medium none – внешняя граница.

Так витрина становится человекообразной, а надежды оживают, как размороженная лягушка.