[Помогите] Как сделать boxed и эффект при наведении на товар?

Всем привет! В общем, такой вопрос: ставлю различные шаблоны а потом модули, и то один не работает из-за шаблона, то другой, в общем трата времени и нервов. В общем думаю подправить стандартный шаблон, но не знаю как сделать 2 вещи:
1. Чтобы вид был boxed.
2. Чтобы при наведении мышки на товар (на главной или в списке товаров) появлялся эффект - рамка с тенью вокруг товара (например http://themeforest.net/item/multish...opencart-template/full_screen_preview/4525734 но тут без тени).
Если есть время и желание - помогите, пожалуйста.

 

имеется ввиду, как у меня на сайте - http://verose.ru/ ?

По поводу вида boxed не совсем понял о чем речь, можно подробнее?

 

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

 

для рамки вокруг товара нужно след код

border: 2px solid #ffadb9;
box-shadow: 0 0 10px rgba(0,0,0,0.5);

вписать в stylesheet.css в след классы (создать при отсутствии):
.box-product > div:hover
.product-grid > div :hover
.product-list > div :hover

Если где-то забыл, то по аналогии

Для рамки вокруг страницы в идентификатор #container в stylesheet.css добавить:
border: 2px solid #ffadb9;
box-shadow: 0 0 10px rgba(0,0,0,0.5);

 

А как еще фон сделать из паттерна?

 

Нужно учитывать кроссбраузерность. Старые версии браузеров не увидят эту рамку.
Для каждого box-shadow нужно дописать:
-webkit-box-shadow: параметры - для сафари, хром
-moz-box-shadow: параметры - для мозиллы.

 

Отлично, а какие параметры то?

 

те же.
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
Подробнее можете почитать на htmlbook.ru

 

Большое преимущество этого форума в том, что обычно те, кому есть что сказать и желание помочь пишут здесь решение, или какую-то конкретику, а не общие фразы, или не пишут вообще...

 

в тот же файл стилей в body
прописать:
background-image: url(../image/background.jpg);
background-repeat:repeat;

файл background.jpg закинуть в папку image (catalog/view/theme/default/image/ )
если тема не дефолтная, то вместо default вписать имя своей темы.

 

Добавляю это:

Код:

.box-product > div:hover
border: 2px solid #ffadb9;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Рамка не появляется. Что делаю не так?
(проверка в мозилле и яндекс браузере)

 

сайт покажите

 

Тогда возьми сеть, а не рыбу В FireFox'е, если не стоит еще, поставь FireBug. Дальше заходишь на любой сайт, что тебе нравится, на элементе который тебя интересует правый клик->Инспектировать с помощью FireBug. И все решение как на ладони.

 

Сайт сейчас показать, перенесен на денвер, в нем быстрее работать, чем по фтп. Да и показывать то нечего, дефолтный шаблон 1531 ocstore, изменение по шаблону какое было сделано - это то, что описано в топике

 

для того, чтобы подсказать решение, нужно самому увидеть и понять, почему у Вас что-то не работает.

по коду
.box-product > div:hover
border: 2px solid #ffadb9;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

вроде все корректно, единственное, что если только здесь внесли правки, то рамка будет отображаться в модулях хиты продаж, рекомендуемые и т.п., а чтобы в каталоге рамка была, нужно вносить описанные правки в классы product-grid и product-list

 

ладно, с этим потом разберемся, вот еще вопрос, не могу понять, как на главной (в рекомендуемых, новинках и т.п.) товары выравнивать равномерно по ширине блока?
добавляю align: center, но не дает эффект. Они выравниваются по левому краю и справа получается большой отступ

 

text-align: center;

 

.box-product > div {
text-align: center;
display: inline-block;
vertical-align: middle;
}

 

Подскажите меня тоже этот вопрос не покидает что бы сделать рамку вокруг товара как на этом сайте http://verose.ru/ ?
Пытался тоже вставлять в дефолтный шаблон вот этот код
.box-product > div:hover
border: 2px solid #ffadb9;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Как пишут выше что мол будет работать в модулях хиты продаж, рекомендуемые и т.п., Не где так и она не появилась эта просто для меня волшебная рамка.
А самое не понятно для меня вот ответ ( нужно вносить описанные правки в классы product-grid и product-list ) ?

Помогите пожалуйста разобраться с этим вопросом. Хотелось бы увидеть весь код в одной собранной куче. Что бы его понять и и изучить.

 

Вот пример (на стандартном шаблоне проверено)

http://moushe.ru/ сам ресурс