Смещение поиска, изменения в "Featured"

[suzume]

Добрый день.

Помогите, пожалуйста. Возникла пара вопросов:

1. Что/где изменять, чтобы сместить поле+кнопку поиска вправо (прямо к корзине)? 

 

Либо, может, будет симпатичнее смотреться, если его уменьшить и переместить вот на эту панель:

(на месте "Информация", "Корзина", "Оформление заказ" - так как это все доступно из личного кабинета/корзины) 

 

Находила темы с подобными вопросами, но там для других версий oC.

 

2. Как сделать, чтобы на строке вместо 6 товаров (в "рекомендуемых" и "новых поступлениях") было 4, например? 

    И чтобы они были по центру, а не по левому краю. Не нравится пустое место вот тут: 

либо туда поставить модуль "Акции", но он уходит вверх под модуль "Слайд-шоу" (в настройках по Правой колонке):

 

 

3. И хотелось бы продлить концы ленточек в разные стороны:

 

 

Шаблон: palioxis

Версия oC: v1.5.4.1

 

Заранее спасибо с:

[Tom]

А пиши в личку! Распишем все твои проблемы по полкам! 

[suzume]

А пиши в личку! Распишем все твои проблемы по полкам! 

Хорошо. 

[suzume]

Так, в чем-то разобралась сама.
Все изменения в /catalog/view/theme/название темы/stylesheet - stylesheet.css

- 166 строка, в контейнере в конце добавила text-align: center; , чтобы была центровка всего на странице -

 

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

1. Смещение поиска
Строка 263, смещение вправо со значением 170px
в итоге:

#header #search {
position: absolute;
top: 23px;
right: 170px;
width: 298px;
z-index: 15;
padding: 10px 14px 10px 10px;
}

Из-за центровки надпись "Поиск" сместилась чуть правее, в итоге частично закрывала изображение с лупой.
Решилось так: пропись позиции (absolutely не работает) с relative + вправо на 10px
строка 290, #header .bst
 

#header .bst {
color: #626262;
font-size: 10px;
font-weight: bold;
line-height: 27px;
padding-left: -6px;
-webkit-text-shadow: 0px -1px 0 #e9e6e6;
-moz-text-shadow: 0px -1px 0 #e9e6e6;
text-shadow: 0px -1px 0 #e9e6e6;
position: relative;
right: 10px;
}

2. Правка модулей "Последние" (они же Новые поступления) и "Рекомендуемые"
начнем со второго.
Рекомендуемые = Featured (Module)
1004 строка и далее.
Конкретно нужен был кусок со значением ширины: width: **px; (1029 строка и далее). Ставим нужное кол-во px.
В конце выглядит так:

.featured-box > div {
width: 220px;
display: inline-block;
vertical-align: top;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 10px;
border-bottom: 1px solid #f1f5f6;
}

Правка "Последние"
Нужно Latest, Special and Bestsellers Module, это 1247 строка
Правим то же самое, что и выше:
 

.box-cl > div {
width: 220px;
display: inline-block;
vertical-align: top;
margin-left: 5px;
margin-bottom: 5px;
padding: 0px;}

Также можно добавить и там, и там:
 

.box-cl > div:hover { 
cursor:pointer;
border: 1px solid #ddd;
box-shadow: 0px 0px 30px 0px #ddd; 
width: 220px; 
padding: -3px;
}

Дает обводку вокруг товара:


Ну и заодно изменила вид отображения товаров:
1630 строка и далее

 

.product-grid > div {
width: 120px;
display: inline-block;
vertical-align: top;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
text-align: center;
}
.product-grid > div:hover {
cursor:pointer;
border: 1px solid #ddd;
box-shadow: 0px 0px 30px 0px #ddd ;
width: 120px;
padding: -3px;
}
 

P.S. Далее нужно изменить размер изображений (для Последних и Рекомендуемых в модялях), размер изображений в просмотре товара в настройках админки (Система-Настройки-*магазин*-Изображения). Для нормального отображения лучше проставить -20px от того размера, что проставляли в stylesheet.css.