Как изменить цвет в форме

Настройки CSS для формы заказа

• Цвета кнопки оформления заказа
• Цвет кнопки добавления товара
• Цвет и расположение корзины
• Цвет фона и текста для формы заказа

Изменение цвета кнопки оформления заказа

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

Данные стили содержат наиболее критичные для дизайна свойства, такие как:

• Цвет фона кнопки
• Цвет текста надписи на кнопке
• Цвет рамки

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

<style>
/* Кнопки Перейти в корзину, Перейти к заказу и Оформить заказ */
.easynetshop-gotocart, 
.easynetshop-goorder, 
.easynetshop-doorder {   
	background-color: #b4213b;    /* Цвет фона */   
	color: #ffffff;  /* Цвет текста */
	border-color: #a42037;   /* Цвет рамки */
}

/* При наведении на Перейти в корзину, Перейти к заказу и Оформить заказ */
.easynetshop-gotocart:hover,  
.easynetshop-goorder:hover, 
.easynetshop-doorder:hover {  
	background-color: #cf435b; 	/* Цвет фона */    
	color: #ffffff; 	/* Цвет текста */
	border-color: #a42037; 	/* Цвет рамки */
}

/* Кнопки Вернуться на сайт, Вернуться к заказу */
.easynetshop-continue, 
.easynetshop-returntocart { 
	background-color: #ffffff;  	/* Цвет фона */
	color: #333333; 	/* Цвет текста */
	border-color: #cccccc; 	/* Цвет рамки */
}

/* При наведении на Вернуться на сайт, Вернуться к заказу */
.easynetshop-continue:hover, 
.easynetshop-returntocart:hover { 
	background-color: #ebebeb; 	/* Цвет фона */ 
	color: #333333; 	/* Цвет текста */
	border-color: #adadad; 	/* Цвет рамки */
} 
</style>

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

Если для кнопки Купить используются стили, представленные виджетом корзины, то их можно также настроить в цветовом стиле сайта. Для этого используются два фрагмента CSS, первый определяет цвета в обычном состоянии кнопки, второй при наведении курсора мыши на кнопку.

<style>
/* Кнопка Купить */
.btn-ens-style, .btn-ens-cross-style {   
	background-color: #b4213b;    /* Цвет фона */   
	color: #ffffff;  /* Цвет текста */
	border-color: #a42037;   /* Цвет рамки */
}
/* При наведении на Купить */
.btn-ens-style:hover, .btn-ens-cross-style:hover {   
	background-color: #cf435b;    /* Цвет фона */   
	color: #ffffff;  /* Цвет текста */
	border-color: #a42037;   /* Цвет рамки */
}
</style>

Изменение цвета корзины

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

Кроме этого в настройках стилей конструктора можно найти параметры для определения местоположения элемента на экране. Привязка осуществляется к двум границам браузера, например, к верхней и к правой границе и указывается отступ от них. При этом отступ от противоположных границ устанавливается в режим auto чтобы обеспечить корректное расположение.

<style>

/* Кнопка Корзина */
#enscart_image_wrapper {   
	background-color: #666666;    /* Цвет фона */   
}

/* Расположение Корзины */
#enscart_wrapper {   
	right: 20px;    /* Отступ корзины справа */   
	top: 80px;    /* Отступ корзины сверху */   
	left: auto;    /* Отступ корзины слева */   
	bottom: auto;    /* Отступ корзины снизу */   
}

/* Количество товаров */
#enscart_counter  {   
	background-color: #d62240;    /* Цвет фона */   
	color: #ffffff;  /* Цвет текста */
}
</style>

Изменение фона для формы заказа

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

<style>
/* Фон для формы заказа */
.easynetshop-modal,
.easynetshop-cross-caption,
.easynetshop-modal-caption, 
.easynetshop-goodtitle-name,
.easynetshop-goodtitle-description,
.easynetshop-form-group input, 
.easynetshop-form-group textarea, 
.easynetshop-form-group select, 
.easynetshop-history-group input,
.easyshop-quant-input, 
.easynetshop-self-quant-input,
.easynetshop-minus-quant, 
.easynetshop-plus-quant, 
.easynetshop-self-minus-quant, 
.easynetshop-self-plus-quant,
.easynetshop-delgood, 
.easynetshop-self-delgood {   
	background-color: #333333;    /* Цвет фона */   
	color: #ffffff;  /* Цвет текста */
}
</style>

Поднять слой с корзиной выше (если скрыт за другими элементами)

Увелчивайте значения параметра z-index до того момента, пока элементы корзины не будут отображаться поверх других элементов страницы

<style> 
.easynetshop-modalcontainer { z-index:2000; }
.easynetshop-modal-fade-wrapper { z-index: 1999; }
#enscart_wrapper { z-index: 1998; } 
</style>