Перейти к содержимому


Изменение Дизайна Корзины.

корзина дизайн шаг заказ

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 43

#1 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 24 Сентябрь 2014 - 23:28

Доброго времени суток. нуждаюсь в помощи наших уважаемых модераторов.

Переделки по дизайну карзины и шагов заказа. Всё отмечено на скриншотах.

1. Кнопки перекрасить в цвет  #C71585

2. С красной полоской тоже самое

3. Рамки и белые элементы перекрасить в чёрный

4. Стрелки "Шаги заказа" перекрасить так же в #C71585

5. "Я хочу зарегистрироваться", убрать этот пунктик, а если можно то лучше вообще убрать такую возможнасть с сайта.

6. Текст сделать белым. Что бы текст читался.

Надеюсь что сможете мне помочь буду ждать ответа с нетерпением)

Прикрепленные изображения

  • 1.jpg
  • 2.jpg
  • 3.jpg
  • 4.jpg


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Сентябрь 2014 - 01:46

1. В style.css найдите:
#shopping_cart_mini .button {
	background: #d80000;
	border: medium none;
	color: #d4d4d4 !important;
	cursor: pointer;
	display: inline-block;
	float: right;
	font-family: Calibri;
	font-size: 12px;
	font-weight: bold;
	line-height: normal;
	margin-bottom: 10px;
	margin-left: 5px;
	padding: 6px 10px;
	text-decoration: none;
	text-transform: uppercase;
}
измените значение стиля background на желаемый

2. найдите:
.fieldKey {
	border-top: 2px solid #ff0000;
	font-family: Calibri;
	font-weight: bold;
	line-height: 2.5;
	margin-top: 20px;
	padding-top: 15px;
	width: 100%;
}
измените значение стиля border-top

3. найдите:
.CompareGoodsTable .ceil1, .close-block {
	background: #fafafa;
}
.shopping-cart-table thead td {
	line-height: 41px;
	padding: 0 10px;
	white-space: nowrap;
}
замените на:
.CompareGoodsTable .ceil1, .close-block {
	background: #000;
}
.shopping-cart-table thead td {
	line-height: 41px;
	padding: 0 10px;
background: #000;
color: #fff;
	white-space: nowrap;
}

4. найдите:
.orderStepName-active {
	background: url("http://sait.storeland.net/step-active.png") no-repeat right center #ff0000;
	color: #ffffff;
	height: 37px;
	text-align: center;
	text-shadow: -1px -1px 0 #000;
	vertical-align: middle;
}
измените картинку step-active.png и измените значение цвета ff0000 на необходимое

5. В шаблоне Оформление заказа найдите и удалите:
<!-- Если в тарифном плане подключен раздел личного кабинета -->
		  {% IF TARIFF_FEATURE_CLIENT_ROOM %}
			{% IFNOT CLIENT_IS_LOGIN %}
			  <p>
				<input type="checkbox" id="contactWantRegister" name="form[contact][want_register]" value="1" {% IF ORDER_FORM_CONTACT_WANT_REGISTER %}checked="checked"{% ENDIF %}><label for="contactWantRegister">Я хочу зарегистрироваться</label>
			  </p>
			{% ENDIF %}
		  {% ENDIF %}
		</div>
		 
		<!-- Если в тарифном плане подключен раздел личного кабинета -->
		{% IF TARIFF_FEATURE_CLIENT_ROOM %}
		  {% IFNOT CLIENT_IS_LOGIN %}
			<div class="contactRegisterNeedElement" {% IFNOT ORDER_FORM_CONTACT_WANT_REGISTER %}style="display:none;"{% ENDIF %}>
			  <div class="title"><h2 title="Информация для входа в личный кабинет">Информация для входа</h2></div>
			  <div class="contentContainer order-step">
				<p><label for="contactPassWord" class="required">Придумайте пароль<em>*</em></label></p>
				<input id="contactPassWord" type="password" name="form[contact][pass]" value="{ORDER_FORM_CONTACT_PASS}" maxlength="50" minlength="6"  class="required" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
				{% IFNOT user_agent_ie %}
				  <div class="showPassBlock"><a href="#" rel="Скрыть пароль" class="OrderShowPass">Показать пароль</a></div>
				{% ENDIF %}
				<div class="field name-lastname">
				  <div class="alignCenter" style="display:none;width:214px;padding-top:10px;" id="caps_lock">
				   <img src="{ASSETS_IMAGES_PATH}warningCapslock.png?design=movement"><br />
				   <strong class="black">Caps Lock включен.</strong><br />
				   Пароль может быть введен неверно.
				  </div>
				</div>
			  </div>
			</div>
		  {% ENDIF %}
		{% ENDIF %}

6. найдите:

.shopping-cart-table a {


	color: #000;
	font-weight: bold;
	text-decoration: underline;
}
замените на:
.shopping-cart-table a {
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}


#3 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 25 Сентябрь 2014 - 08:55

Спасибо за помощь. у меня тут немного не так пошло.

1. Что то не понятное появилось. при нажатии выходит фиолетовая полоска и исчезает. Можно ли как то вернуть фото?

2. рамку с циврой перекрасить в чёрный.

3. текст сделать белым.

Прикрепленные изображения

  • 1.jpg


#4 batta

batta

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 25 Сентябрь 2014 - 14:51

Просмотр сообщенияA-myshop (25 Сентябрь 2014 - 08:55) писал:

Спасибо за помощь. у меня тут немного не так пошло.

1. Что то не понятное появилось. при нажатии выходит фиолетовая полоска и исчезает. Можно ли как то вернуть фото?

2. рамку с циврой перекрасить в чёрный.

3. текст сделать белым.
Здравствуйте.
1)
В Style.css
.fieldKey {
font-weight: bold;
line-height: 2.5;
width: 180px;
font-family: Calibri;
border-top: solid 2px #C71585;
width: 100%;
margin-top: 20px;
padding-top: 15px;
}
измените на
.fieldKey {
font-weight: bold;
line-height: 2.5;
width: 180px;
font-family: Calibri;
/* border-top: solid 2px #C71585; */
width: 100%;
margin-top: 20px;
padding-top: 15px;
}

2)
В style.css
.shopping-cart-table td {
border: 1px solid #cdcdcd;
padding: 5px;
vertical-align: middle;
text-align: center;
}
измените на
.shopping-cart-table td {
border: 1px solid #000000;
padding: 5px;
vertical-align: middle;
text-align: center;
}


3)
В style.css
.shopping-cart-table .cart-price {
font-weight: bold;
color: #444;
white-space: nowrap;
}
измените на
.shopping-cart-table .cart-price {
font-weight: bold;
color: #FFF;
white-space: nowrap;
}

В style.css
SELECT, input[type="text"], input[type="number"], input[type="password"], input[type="file"], input[type="email"], .inputText {
border: 1px solid #cdcdcd;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
измените на
SELECT, input[type="text"], input[type="number"], input[type="password"], input[type="file"], input[type="email"], .inputText {
border: 1px solid #cdcdcd;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
}

В Style.css
.shopping-cart-table .cart-price-general {
font-weight: bold;
color: #222;
}
измените на
.shopping-cart-table .cart-price-general {
font-weight: bold;
color: #FFF;
}

В style.css
.shopping-cart-table .cart-total-price, .shopping-cart-table tfoot td {
font-size: 18px;
font-weight: bold;
color: #222;
}
измените на
.shopping-cart-table .cart-total-price, .shopping-cart-table tfoot td {
font-size: 18px;
font-weight: bold;
color: #FFF;
}


#5 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 26 Сентябрь 2014 - 07:27

Всё получается. Осталась пара вопросов. Всё на скриншоте.

1. Надо сделать цифры белыми, не могу найти где.

2. При нажатии на крестик. товар удаляется. Появляется фиолетовая полоска на которой написано фиолетовым что товар удалён. Хочется что бы квадрат был чёрным а буквы белыми.

3. Можно ли сделать что бы название товара было по центру

Прикрепленные изображения

  • 3.jpg


#6 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 26 Сентябрь 2014 - 07:37

4. Каталог в шагах заказа не нужен, причём он не кликабелен. можно ли его от туда убрать.

5. Вот эта панель тоже не рабочая. не кликается)

Прикрепленные изображения

  • 9.jpg


#7 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 26 Сентябрь 2014 - 07:40

Просмотр сообщенияA-myshop (26 Сентябрь 2014 - 07:27) писал:

Всё получается. Осталась пара вопросов. Всё на скриншоте.

1. Надо сделать цифры белыми, не могу найти где.

2. При нажатии на крестик. товар удаляется. Появляется фиолетовая полоска на которой написано фиолетовым что товар удалён. Хочется что бы квадрат был чёрным а буквы белыми.

3. Можно ли сделать что бы название товара было по центру

1) В style.css добавляем:
input.input-text.qty {
color: #fff;
}

2) В style.css найдите:

/* Уведомления */
#noty_center_layout_container li {background-image: none !important;-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important;border-radius: 0 !important;}
.noty_bar.noty_type_error {background: #C71585;color: #C71585;border-color: #C71585;}
.noty_bar.noty_type_success {background: #C71585;color: #C71585;border-color: #C71585;}
/* END Уведомления */


и замените на:

/* Уведомления */
#noty_center_layout_container li {background-image: none !important;-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important;border-radius: 0 !important;}
.noty_bar.noty_type_error {background: #000;color: #FFF;border-color: #000;}
.noty_bar.noty_type_success {background: #000;color: #FFF;border-color: #000;}
/* END Уведомления */


3) В style.css найдите:
.shopping-cart-table .good_name {
text-align: left;
vertical-align: top;
}

и замените на:
.shopping-cart-table .good_name {
text-align: center;
vertical-align: top;
}


#8 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 26 Сентябрь 2014 - 08:07

Спасибо за ответ. не получился правда первый пункт. цифра всё так же чёрная. (нужна белая)
по второму пункту всё супер вот только рамка почему то зелёная, можно ли цвет переправить на #C71585

И буду рад если ответите ещё по 4 и 5 пункту.

#9 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 26 Сентябрь 2014 - 11:55

Ребят, помогите пожалуйста... доделать ещё немного осталось...

#10 AnnaM

AnnaM

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 26 Сентябрь 2014 - 15:45

Просмотр сообщенияA-myshop (26 Сентябрь 2014 - 08:07) писал:

Спасибо за ответ. не получился правда первый пункт. цифра всё так же чёрная. (нужна белая)
по второму пункту всё супер вот только рамка почему то зелёная, можно ли цвет переправить на #C71585

И буду рад если ответите ещё по 4 и 5 пункту.
1. в style.css замените
SELECT, input[type="text"], input[type="number"], input[type="password"], input[type="file"], input[type="email"], .inputText {
border: 1px solid #cdcdcd;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
на
SELECT, input[type="text"], input[type="number"], input[type="password"], input[type="file"], input[type="email"], .inputText {
border: 1px solid #cdcdcd;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
}


#11 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 27 Сентябрь 2014 - 00:01

4. Каталог в шагах заказа не нужен, причём он не кликабелен. можно ли его от туда убрать.

5. Вот эта панель тоже не рабочая. не кликается)

Эти вопросы так и остались без ответа.

А за помощь с карзиной большое спасибо)

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Сентябрь 2014 - 05:45

В шаблоне Оформление заказа найдите:
Перейти к следующему шагу
			{% ENDIF %}</button>
		  </div>
		</div>
	</form>
  </div>
</div>
замените на:
Перейти к следующему шагу
			{% ENDIF %}</button>
		  </div>
		</div>
	</form>
  </div>  </div>
</div>


#13 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 27 Сентябрь 2014 - 10:12

Спасибо) Всё заработало.

Начал оформлять заказ и увидел пару моментов которые хотелось бы исправить.

1. Можно ли в указанных под первым пунктом области заменить фон на чёрный.

2. Всю панель подвинуть немного левее.

3. Меню каталогом товаров удалить из разделов "контакты","доставка"

4. В области поменять цвет на чёрный, а шрифт белым.

Прикрепленные изображения

  • 987.jpg


#14 AnnaM

AnnaM

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 27 Сентябрь 2014 - 10:23

Просмотр сообщенияA-myshop (27 Сентябрь 2014 - 10:12) писал:

Спасибо) Всё заработало.

Начал оформлять заказ и увидел пару моментов которые хотелось бы исправить.

1. Можно ли в указанных под первым пунктом области заменить фон на чёрный.

2. Всю панель подвинуть немного левее.

3. Меню каталогом товаров удалить из разделов "контакты","доставка"

4. В области поменять цвет на чёрный, а шрифт белым.
1. в данный момент эти области закрашены черным.
3. в шаблоне HTML замените
{%FOR catalog_full%}
								 {% IF catalog_full.FIRST %}<ul class="accordion" >{% ENDIF %}
								 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
									 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
								 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
								 {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
							 {%ENDFOR%}
на
 {%FOR catalog_full%}
					 {% IF catalog_full.FIRST %}<ul class="accordion" {% IF PAGE_TITLE=Доставка %}style="display:none;"{% ELSEIF PAGE_TITLE=Контакты %}style="display:none;"{% ENDIF %}>{% ENDIF %}
					  <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
						 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
						 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
					{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
						  {%ENDFOR%}


#15 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 27 Сентябрь 2014 - 10:50

ничего не поменялось((

#16 AnnaM

AnnaM

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 27 Сентябрь 2014 - 11:06

Просмотр сообщенияA-myshop (27 Сентябрь 2014 - 10:50) писал:

ничего не поменялось((
Отредактировала инструкцию выше. Произведите изменения повторно.

#17 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 27 Сентябрь 2014 - 11:17

изменений всё так же нет.

#18 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 27 Сентябрь 2014 - 11:37

Просмотр сообщенияA-myshop (27 Сентябрь 2014 - 11:17) писал:

изменений всё так же нет.

Просмотр сообщенияA-myshop (27 Сентябрь 2014 - 11:17) писал:

изменений всё так же нет.
Замените строку:

{% IF catalog_full.FIRST %}<ul class="accordion" {% IF PAGE_TITLE=Доставка %}style="display:none;"{% ELSEIF PAGE_TITLE=Контакты %}style="display:none;"{% ENDIF %}>{% ENDIF %}

на

{% IF catalog_full.FIRST %}<ul class="accordion" {% IF PAGE_TITLE=Доставка (Пример страницы) %}style="display:none;"{% ELSEIF PAGE_TITLE=Связь с администрацией %}style="display:none;"{% ENDIF %}>{% ENDIF %}


#19 AnnaM

AnnaM

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 27 Сентябрь 2014 - 11:38

Просмотр сообщенияA-myshop (27 Сентябрь 2014 - 11:17) писал:

изменений всё так же нет.
замените
{%IFNOT catalog_full_empty%}
						<div class="infoBox infoBoxCategory">
						  <div class="box-heading"><a href="{CATALOG_URL}"></a></div>
						  <div class="infoBoxContents">
						{%FOR catalog_full%}
										 {% IF catalog_full.FIRST %}<ul class="accordion" {% IF PAGE_TITLE=Доставка %}style="display:none;"{% ELSEIF PAGE_TITLE=Контакты %}style="display:none;"{% ENDIF %}>{% ENDIF %}
										  <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
												 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
												 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
										{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
												  {%ENDFOR%}
						  </div>
						</div>
				  {%ENDIF%}
на
{%IFNOT catalog_full_empty%}
						<div {% IF PAGE_TITLE=Связь с администрацией %}style="display:none;"{% ELSEIF PAGE_TITLE=Доставка (Пример страницы) %}style="display:none;"{% ENDIF %} class="infoBox infoBoxCategory">
						  <div class="box-heading"><a href="{CATALOG_URL}"></a></div>
						  <div class="infoBoxContents">
						{%FOR catalog_full%}
										 {% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
										  <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
												 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
												 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
										{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
												  {%ENDFOR%}
						  </div>
						</div>
				  {%ENDIF%}


#20 A-myshop

A-myshop

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 150 сообщений

Отправлено 27 Сентябрь 2014 - 18:03

Dars, спасибо всё получилось. Теперь когда меню товаров убрали осталось много свободного места. Можно ли подвинуть основное окно немного левее.





Темы с аналогичным тегами корзина, дизайн, шаг, заказ

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных