Elnor

Изменение цвета корзины, при добавлении товара

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

Elnor    0

Здравствуйте! есть два вопроса по изменению корзины, очень надеюсь на вашу помощь!

 

1)Как изменить цвет корзины при добавлении товара через css? сейчас изменяется фон корзины при наведении курсора, как сделать так что бы фон изменялся при добавлении товара?

2) Как добавить картинку в блок с корзиной, пробовал добавить вот этот модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10605 но картинка выезжает за пределы блока.

Нужно что бы картинка была слева от текста, но не выезжала за пределы блока

 

Вот мой сайт, что бы понимать как выглядит корзина: http://elnorshop.ru/index.php?route=common/home

И css код отвечающий за корзину:

 

 

 


#header #cart {
min-width: 300px;
}
#header #cart .heading {
float: right;
cursor:pointer;
/*padding-left: 14px;
padding-right: 14px;*/
padding:10px 200px 10px 10px;
border:2px solid #000000;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
-moz-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
background: #FFF url(../image/cart-button-bg.png) 0 100% repeat-x;
position: relative;
z-index: 1;
}
#header #cart .heading:before{
content:'.';
text-indent:-9999px;
position:absolute;
height:18px;
width:13px;
right:17px;
top:50%;
margin-top:-9px;
background:url(../image/cart-ico.png) 0 0 no-repeat;
}
#header #cart .heading:hover{
background: #FFF url(../image/cart-button-bg1.png) 0 100% repeat-x;
}
#header #cart .heading:hover:before{
background-position:0 100%;
}

#header #cart .heading h4 {
color: #000000;
text-shadow: #FFFFFF 1px 1px 1px;
font-size: 20px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #FFFFFF;
text-shadow: #535758 1px 1px 1px;
text-decoration: none;
background:none;
}
#header #cart .heading a span {
/*background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;*/
font-size:15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
/*padding: 8px;*/
padding:12px;
min-height: 150px;
/*border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;*/
border:2px solid #000000;
-webkit-border-radius:0 3px 3px 3px;
-moz-border-radius:0 3px 3px 3px;
border-radius:0 3px 3px 3px;
background: #FFFFFF;
-webkit-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
-moz-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
}

#header #cart.active .heading {
/*margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;*/
background: #FFF url(../image/cart-button-bg1.png) 0 100% repeat-x;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#header #cart.active .content {
display: block;
}
#header #cart .cart {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
#header #cart .cart td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
#header #cart .cart .image {
width: 1px;
}
#header #cart .cart .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
#header #cart .cart .name small {
color: #666;
}
#header #cart .cart .quantity {
text-align: right;
}
#header #cart .cart td.total {
text-align: right;
}
#header #cart .cart .remove {
text-align: right;
}
#header #cart .cart .remove img {
cursor: pointer;
}
#header #cart table.total {
border-collapse: collapse;
padding: 5px;
float: right;
clear: left;
margin-bottom: 5px;
}
#header #cart table.total td {
color: #000;
}
#header #cart .content .checkout {
text-align: right;
clear: both;
}
#header #cart .content .checkout a{

}
#header #cart .content .checkout a {
display: inline-block;
padding:0 9px;
background: url('../image/buttons.png') 0 0 repeat-x;
text-decoration: none;
cursor: pointer;
height:25px;
line-height:25px;
font-size:13px;
font-weight:bold;
color:#fff;
text-shadow:0 -1px 0px #0c72bd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:none;
}
#header #cart .content .checkout a:visited{
color:#fff;
}
#header #cart .content .checkout a:hover {
/*background: url('../image/button-left-active.png') top left no-repeat;*/
background-position:0 -25px;
color:#fff;
}
#header #cart .content .checkout a:active{
background-position:0 -50px;
-webkit-box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
-moz-box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
}
*+ html #header #cart .content .checkout a{display:inline; zoom:1;}


#header #cart .empty {
padding-top: 50px;
text-align: center;
 

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


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

Неужели проблема неразрешима?

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


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

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

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

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

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

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

Войти

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

Войти


  • Похожий контент

    • От contakt
      Добрый день!
      Подскажите пожалуйста, как убрать корзину, нужен просто каталог без оформления, например, вместо купить сделать подробнее, только информация.
      Спасибо.
    • От sv2109


      View File Акции, Подарки
      Больше 10 тысяч загрузок модулей от sv2109!
      Что делает этот модуль?
      Дает возможность создавать и красиво показывать в карточке товара, каталоге и других страницах всевозможные акции. За основу в создании этого модуля был взят опыт больших интернет магазинов.
      Зачем?
      Акции - это очень мощный инструмент продаж с помощью которого при правильном подходе можно в разы увеличить прибыть магазина, так как акция дает сильный стимул купить именно этот товар и именно сейчас.
      Не поэтому ли практически все большие интернет магазины очень активно используют этот инструмент? Зайдите на любой такой магазин и увидите огромное количество акций, скидок, подарков, распродаж итд.
      Что может быть акцией?
      Товар-подарок. Пример: "Купи ноутбук и получи мышку в подарок", "купи смартфон и получи чехол в подарок", "купи фотоаппарат и получи карту памяти в подарок" итд. При добавлении товара в корзину автоматически в корзину добавляется товар-подарок с нулевой ценой. Неизвестный подарок, приз. Пример: "Купите этот товар и получите ценный подарок от нашего магазина". Сам подарок показывается на сайте в виде красивой коробки, что внутри - сюрприз. Суперцена. Показывает что у товара очень привлекательная цена. Скидка на другой товар. Пример: "Купи фотоаппарат и получи скидку 20% на покупку объектива". Розыгрыш призов. Пример: "Среди купивших офисный стул с 1 по 31 декабря будет разыгрываться ноутбук". Бесплатная доставка. Новинка. Показывает, что товар новый. Скидка на товар. "Только 2 ноутбука в 1 руки!" - реальная акция в Розетке Что угодно Некоторые советы по акциям
      обязательно указывайте дату окончания акции! Она должна быть минимальной, а не через 2 месяца. Это дополнительно будет стимулировать покупателя совершить покупку именно сейчас, а не уйти с мыслью вернуться через 2 месяца, то есть никогда. указывайте, что количество подарков или акционных товаров ограничено. Это дополнительно будет стимулировать покупателя купить товар именно сейчас, потому что уже через час подарка может не быть. создавайте реально полезные для ваших покупателей акции, а не банальные 5% при 50% наценке. Иногда полезно даже ничего не заработать на этой первой продаже но получить лояльного, постоянного покупателя, который принесет прибыть в будущем. постоянно экспериментируйте, придумывайте новые, оригинальные акции. постоянно использует этот очень мощный инструмент продаж, а не только перед праздниками. В планах дальнейшее развитие этого модуля.
      Модуль использует vQmod, но возможна установка и без vQmod
      Модуль использует IonCube, обычно на 99% хостингов он установлен, но на всякий случай можете проверить.
      Одна лицензия модуля позволяет установить этот модуль на 1 домене.
      Совместимость:
      Модуль должен работать на всех 1.5.х версиях OpenCart, OcStore.
      Версию для OpenCart 2.0 можно скачать тут
      Демо:
      Товар 1 Товар 2 Товар 3 Товар 4 Товар 5 Категория Админка Для связи с автором модуля пишите на sv2109@gmail.com
      © Стасюк Владимир (sv2109.com), 2014
      Submitter sv2109 Submitted 12/12/2014 Category Модули Системные требования Сайт разработчика sv2109.com Старая цена Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1
      1.5.3.1 ocStore 1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1 OpenCart.Pro, ocShop OcShop 1.5.6.4.х  
    • От sv2109
      Больше 10 тысяч загрузок модулей от sv2109!
      Что делает этот модуль?
      Дает возможность создавать и красиво показывать в карточке товара, каталоге и других страницах всевозможные акции. За основу в создании этого модуля был взят опыт больших интернет магазинов.
      Зачем?
      Акции - это очень мощный инструмент продаж с помощью которого при правильном подходе можно в разы увеличить прибыть магазина, так как акция дает сильный стимул купить именно этот товар и именно сейчас.
      Не поэтому ли практически все большие интернет магазины очень активно используют этот инструмент? Зайдите на любой такой магазин и увидите огромное количество акций, скидок, подарков, распродаж итд.
      Что может быть акцией?
      Товар-подарок. Пример: "Купи ноутбук и получи мышку в подарок", "купи смартфон и получи чехол в подарок", "купи фотоаппарат и получи карту памяти в подарок" итд. При добавлении товара в корзину автоматически в корзину добавляется товар-подарок с нулевой ценой. Неизвестный подарок, приз. Пример: "Купите этот товар и получите ценный подарок от нашего магазина". Сам подарок показывается на сайте в виде красивой коробки, что внутри - сюрприз. Суперцена. Показывает что у товара очень привлекательная цена. Скидка на другой товар. Пример: "Купи фотоаппарат и получи скидку 20% на покупку объектива". Розыгрыш призов. Пример: "Среди купивших офисный стул с 1 по 31 декабря будет разыгрываться ноутбук". Бесплатная доставка. Новинка. Показывает, что товар новый. Скидка на товар. "Только 2 ноутбука в 1 руки!" - реальная акция в Розетке Что угодно Некоторые советы по акциям
      обязательно указывайте дату окончания акции! Она должна быть минимальной, а не через 2 месяца. Это дополнительно будет стимулировать покупателя совершить покупку именно сейчас, а не уйти с мыслью вернуться через 2 месяца, то есть никогда. указывайте, что количество подарков или акционных товаров ограничено. Это дополнительно будет стимулировать покупателя купить товар именно сейчас, потому что уже через час подарка может не быть. создавайте реально полезные для ваших покупателей акции, а не банальные 5% при 50% наценке. Иногда полезно даже ничего не заработать на этой первой продаже но получить лояльного, постоянного покупателя, который принесет прибыть в будущем. постоянно экспериментируйте, придумывайте новые, оригинальные акции. постоянно использует этот очень мощный инструмент продаж, а не только перед праздниками. В планах дальнейшее развитие этого модуля.
      Модуль использует vQmod, но возможна установка и без vQmod
      Модуль использует IonCube, обычно на 99% хостингов он установлен, но на всякий случай можете проверить.
      Одна лицензия модуля позволяет установить этот модуль на 1 домене.
      Совместимость:
      Модуль должен работать на всех 1.5.х версиях OpenCart, OcStore.
      Версию для OpenCart 2.0 можно скачать тут
      Демо:
      Товар 1 Товар 2 Товар 3 Товар 4 Товар 5 Категория Админка Для связи с автором модуля пишите на sv2109@gmail.com
      © Стасюк Владимир (sv2109.com), 2014
    • От sv2109


      View File Акции, Подарки
      Больше 10 тысяч загрузок модулей от sv2109!
      Это вторая версия модуля, который имеет уже больше 100 покупок!
      Что делает этот модуль?
      Дает возможность создавать и красиво показывать в карточке товара, каталоге и других страницах всевозможные акции. За основу в создании этого модуля был взят опыт больших интернет магазинов.
      Зачем?
      Акции - это очень мощный инструмент продаж с помощью которого при правильном подходе можно в разы увеличить прибыть магазина, так как акция дает сильный стимул купить именно этот товар и именно сейчас.
      Не поэтому ли практически все большие интернет магазины очень активно используют этот инструмент? Зайдите на любой такой магазин и увидите огромное количество акций, скидок, подарков, распродаж итд.
      Что может быть акцией?
      Товар-подарок. Пример: "Купи ноутбук и получи мышку в подарок", "купи смартфон и получи чехол в подарок", "купи фотоаппарат и получи карту памяти в подарок" итд. При добавлении товара в корзину автоматически в корзину добавляется товар-подарок с нулевой ценой. Неизвестный подарок, приз. Пример: "Купите этот товар и получите ценный подарок от нашего магазина". Сам подарок показывается на сайте в виде красивой коробки, что внутри - сюрприз. Суперцена. Показывает что у товара очень привлекательная цена. Скидка на другой товар. Пример: "Купи фотоаппарат и получи скидку 20% на покупку объектива". Розыгрыш призов. Пример: "Среди купивших офисный стул с 1 по 31 декабря будет разыгрываться ноутбук". Бесплатная доставка. Новинка. Показывает, что товар новый. Скидка на товар. "Только 2 ноутбука в 1 руки!" - реальная акция в Розетке Что угодно Некоторые советы по акциям
      обязательно указывайте дату окончания акции! Она должна быть минимальной, а не через 2 месяца. Это дополнительно будет стимулировать покупателя совершить покупку именно сейчас, а не уйти с мыслью вернуться через 2 месяца, то есть никогда. указывайте, что количество подарков или акционных товаров ограничено. Это дополнительно будет стимулировать покупателя купить товар именно сейчас, потому что уже через час подарка может не быть. создавайте реально полезные для ваших покупателей акции, а не банальные 5% при 50% наценке. Иногда полезно даже ничего не заработать на этой первой продаже но получить лояльного, постоянного покупателя, который принесет прибыть в будущем. постоянно экспериментируйте, придумывайте новые, оригинальные акции. постоянно использует этот очень мощный инструмент продаж, а не только перед праздниками. В планах дальнейшее развитие этого модуля.
      Совместимость:
      OpenCart и ocStore 2.0.x, 2.1.x, 2.2.x, 2.3.x
      OpenCart 3.0 - по запросу.
      Версию для Opencart, ocStore 1.5.x можно скачать тут
       
      Модуль использует ocmod
      Модуль использует IonCube, обычно на 99% хостингов он установлен, но на всякий случай можете проверить.
      Одна лицензия модуля позволяет установить этот модуль на 1 домене.
      Демо:
      Товар 1 Товар 2 Товар 3 Товар 4 Товар 5 Категория Админка Для связи с автором модуля пишите на sv2109@gmail.com
      © Стасюк Владимир (sv2109.com), 2016
      Submitter sv2109 Submitted 02/10/2016 Category Модули Системные требования Сайт разработчика sv2109.com Старая цена Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х  
    • От sv2109
      Больше 10 тысяч загрузок модулей от sv2109!
      Это вторая версия модуля, который имеет уже больше 100 покупок!
      Что делает этот модуль?
      Дает возможность создавать и красиво показывать в карточке товара, каталоге и других страницах всевозможные акции. За основу в создании этого модуля был взят опыт больших интернет магазинов.
      Зачем?
      Акции - это очень мощный инструмент продаж с помощью которого при правильном подходе можно в разы увеличить прибыть магазина, так как акция дает сильный стимул купить именно этот товар и именно сейчас.
      Не поэтому ли практически все большие интернет магазины очень активно используют этот инструмент? Зайдите на любой такой магазин и увидите огромное количество акций, скидок, подарков, распродаж итд.
      Что может быть акцией?
      Товар-подарок. Пример: "Купи ноутбук и получи мышку в подарок", "купи смартфон и получи чехол в подарок", "купи фотоаппарат и получи карту памяти в подарок" итд. При добавлении товара в корзину автоматически в корзину добавляется товар-подарок с нулевой ценой. Неизвестный подарок, приз. Пример: "Купите этот товар и получите ценный подарок от нашего магазина". Сам подарок показывается на сайте в виде красивой коробки, что внутри - сюрприз. Суперцена. Показывает что у товара очень привлекательная цена. Скидка на другой товар. Пример: "Купи фотоаппарат и получи скидку 20% на покупку объектива". Розыгрыш призов. Пример: "Среди купивших офисный стул с 1 по 31 декабря будет разыгрываться ноутбук". Бесплатная доставка. Новинка. Показывает, что товар новый. Скидка на товар. "Только 2 ноутбука в 1 руки!" - реальная акция в Розетке Что угодно Некоторые советы по акциям
      обязательно указывайте дату окончания акции! Она должна быть минимальной, а не через 2 месяца. Это дополнительно будет стимулировать покупателя совершить покупку именно сейчас, а не уйти с мыслью вернуться через 2 месяца, то есть никогда. указывайте, что количество подарков или акционных товаров ограничено. Это дополнительно будет стимулировать покупателя купить товар именно сейчас, потому что уже через час подарка может не быть. создавайте реально полезные для ваших покупателей акции, а не банальные 5% при 50% наценке. Иногда полезно даже ничего не заработать на этой первой продаже но получить лояльного, постоянного покупателя, который принесет прибыть в будущем. постоянно экспериментируйте, придумывайте новые, оригинальные акции. постоянно использует этот очень мощный инструмент продаж, а не только перед праздниками. В планах дальнейшее развитие этого модуля.
      Совместимость:
      OpenCart и ocStore 2.0.x, 2.1.x, 2.2.x, 2.3.x
      OpenCart 3.0 - по запросу.
      Версию для Opencart, ocStore 1.5.x можно скачать тут
       
      Модуль использует ocmod
      Модуль использует IonCube, обычно на 99% хостингов он установлен, но на всякий случай можете проверить.
      Одна лицензия модуля позволяет установить этот модуль на 1 домене.
      Демо:
      Товар 1 Товар 2 Товар 3 Товар 4 Товар 5 Категория Админка Для связи с автором модуля пишите на sv2109@gmail.com
      © Стасюк Владимир (sv2109.com), 2016
  • Последние посетители   0 пользователей онлайн

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