Индивидуальный дизайн для корзины

При подключении корзины "Простой магазин" в файле с расширением .css содержится полный набор стилей для отображения корзины. Они имеют открытый код и каждый из них может быть переопределен с учетом особенностей вашего сайта. Для изменения внешнего вида необходимо после подключения кода корзины указать новые правила. Не обязательно полностью переписывать все ранее определенные стили - для изменений отдельных правил достаточно указать только нужный параметр. Остальные параметры будут использовать ранее указанные значения.

Наша корзина постоянно развивается и с появлением новых возможностей файл со стилями, загружаемый с наших серверов тоже обновляется. Если вы желаете сохранить его себе и исправить, то мы рекомендуем выполнить это в следующем порядке:

• Оставить подключенным наш файл со стилями
• После нашего подключить собственный файл
• В собственном файле переопределить только те элементы, которые меняют свои свойства

Это позволит реализовать необходимые изменения и сохранит возможность обновления исходного файла.

Стандартный вид

Не требует никаких настроек. Определяется системой. Простой и интуитивно понятный для посетителей.

Меняем вид у кнопки добавления товара:

В CSS-файле переопределяем стили для класса .easynetshop-buy:

a.easynetshop-buy {
background-color: #006dcc;		/* Меняем цвет фона на синий*/
border: none; 				/* Удаляем рамку */ 
border-radius: 0px;			/* Удалеям скругление углов */
padding: 5px 20px;			/* Меняем отступы */
font-size: 20px;			/* Увеличиваем шрифт */
box-shadow: inset -1px -5px 0 rgba(0, 0, 0, 0.12); /* Добавляем тень */
}
a.easynetshop-buy:hover {
background-color: #0099cc;		/* При наведении также меняем цвет на синий */
}

Меняем вид корзины

Нужно создать контейнер с id = "easynetshop-cart". При его отсутствии в коде сайта будет создан контейнер по-умолчанию.

<div id="easynetshop-cart">
Товаров в корзине: <span id="easynetshop-cart-count">0</span> <br/> <!-- Плейсхолдер для количества товаров -->
Стоимость заказа: <span id="easynetshop-cart-summ">0</span> руб. <!-- Плейсхолдер для суммы покупки -->
</div>	

#easynetshop-cart {
display: inline-block;
font-size: 18px;
font-weight: bold;
background-color: #f9f9f9;
color: #636363;
border: 1px solid #969696;
}