VirtueMart 2.x. Как изменить размеры картинок категорий

Данный туториал покажет, как поменять размеры картинок категорий в шаблонах VirtueMart.

Для такой модификации понадобится браузер Firefox и плагин (аддон) Firebug.

1. Откройте страницу сайта, которая содержит картинки категорий (например, страница подкатегорий).
2. Нажмите на иконку Firebug в верхнем правом углу браузера.
3. В появившейся панели используйте кнопку “Щелкните на элементе страницы для анализа”.

4. После активации данного инструмента, нажмите на картинку категории (вокруг изображения должна появиться рамка)  

5. После этого во вкладке Стиль отобразится код того .css файла, в котором задается ширина данного графического элемента. Например:

.category-view .spacer h2 a img {
    height: auto;
    margin-top: 0 !important;
    width: 130px;
}

6. Тестируя ширину в Firebug, можно получить желаемое значение и применить его впоследствии в самом .css файле. Так, в данном случае, ряд состоит из 4-х картинок и для того, чтобы изменить количество до 5, необходимо уменьшить размер изображений. Отредактируем код, используя следующие значения

 .category-view .spacer h2 a img {
    height: auto;
    margin-top: 0 !important;
    width: 56px;
}

7. После получения желаемого результата, щелкните правой кнопкой мыши по названию .css файла (в данном случае virtuemart.css) и выберите Копировать адрес.

8. Вставьте адрес в текстовый документ, чтобы увидеть FTP путь к .css файлу. В данном случае это templates/theme380/css/virtuemart.css
9. Подключитесь к FTP, используя файловый менеджер или FTP клиент (FileZilla).
10. Откройте необходимый .css файл.
11. Найдите исходный код, который вы редактировали в Firebug (строки кода отображаются в текстовых редакторах Notepad++, Dreamweaver и т.д.).
12. Скопируйте строку из Firebug и замените соответствующий код в .css файле. Сохраните изменения.
13. Обновите в браузере страницу подкатегорий. Если все было сделано правильно, размер картинок изменится, как при тестировании кода в Firebug.
14. Теперь, когда размер изображений изменен, можно отредактировать рамки, чтобы избавиться от лишней пустоты вокруг картинок. При помощи Firebug выделите рамку изображения. Во вкладке Стиль в том же .css файле находится код, определяющий ширину необходимого элемента, например

.category-view .spacer, .category-view .category {
    margin: 0 0 0 10px;
    padding: 0 !important;
    width: 175px;
}

15. Отредактируйте размер рамки аналогичным путем, что и картинки категорий, после чего обновите страницу в браузере.

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