Перейти к содержанию
Esq61

Исправить вывод товаров $$

Рекомендуемые сообщения

Доброго времени суток, нужен вот такой табличный вывод товаров.

Какая будет стоимость верстки ?

post-26418-0-07499300-1354667855_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

40$

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Друзья, кто нить поможет сие чудо реализовать за баксов 20 :) более не имею пока что. Либо за "магарыч" указать верный путь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
указать верный путь.
Править нужно файл catalog\view\theme\default\stylesheet\stylesheet.css

Что бы в категориях у товара выровнять кнопку,цену и наименование товара нужно:
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
добавить строчку:
#column-left + #column-right + #content .product-grid > div {
width: 125px;
text-align: center;
}
Что бы изменнить кол-во товара в категории в ширину:
#column-left + #column-right + #content .product-grid > div {
width: 181px;менять эту цифру
text-align: center;
предварительно пеменяв ширину центрального модуля:
.product-grid {
width: 104%;менять эту цифру
overflow: auto;
}
Убрать зазор между картинкой и рамкой:
.product-grid .image img {
padding: 0px;
border: 1px solid #E7E7E7;

Изменить расстояние между товарами по высоте:
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px; отвечает эта цифра
Поднять наименование товара на картинку:
.product-grid .image {
display: block;
margin-bottom: -30px;менять эту цифру
Изменить размер шрифра и цвета наименования товара:		 тоже самое для сетки .product-list .name a {
.product-grid .name a {
font-size: 24px;вставить эту строку
color: #38B0E3;изменить на черный цвет #333333;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;Меняет расстояние между наимен товара и ценой
Что бы в сетке убрать зазор между картинкой и рамкой:
.product-list .image img {
padding: 0px;
border: 0px solid #E7E7E7;
}
Что бы в сетке наименование товара сдвинуть влево:
.product-list .image {
float: left;
margin-right: -165px;менять эту цифру
}
Что бы в сетке изменить размер шрифра и цвета наименования товара:
font-size: 24px;вставить эту строку
color: #38B0E3;изменить на черный цвет #333333;
font-weight: bold;
text-decoration: none;
}
Что бы в сетке опустить название товара ниже нужно добавить в код:
.product-list .name {
margin-bottom: 3px;
padding-top: 68px;Эту строчку
}
Что бы в сетке опустить цену ниже нужно добавить в код:
.product-list .price {
float: right;
height: 50px;
margin-left: 8px;
text-align: right;
color: #333333;
font-size: 12px;
padding-top: 50px;Эту строчку
}
Что бы в сетке опустить кнопку ниже нужно добавить в код:
.product-list .cart {
margin-bottom: 3px;
padding-top: 45px;Эту строчку
}

Давно писал для себя,может не все подойдет для Вашей версии,но думаю все равно уже сможете разобраться.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Да только css переменные к сожалению не выводит.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
http://www.opencart.com/index.php?route=extension/extension/info&extension_id=2122&filter_search=price list можно поставить такой модуль и запелить его по дизайну

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Друзья, кто нить поможет сие чудо реализовать за баксов 20 :) более не имею пока что. Либо за "магарыч" указать верный путь.

Напишите точно какие данные надо выводить, попробую сделать за 20 баксов.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.