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


Добавить Картинку В Дизайн

Автор lleshiy, 15 нояб. 2012 15:08

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

#1 lleshiy

lleshiy

    Пользователь

  • Пользователи
  • PipPip
  • 21 сообщений
  • ГородТверь

Отправлено 15 Ноябрь 2012 - 15:08

Столкнулись с проблемой, что большой процент покупателей не видит кнопку "оплатить" после оформления заказа. Как можно вставить туда картинку стрелочки (как в примере)?

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

  • 000ddx2t-300x149.jpg

#2 Koderhan

Koderhan

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

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

Отправлено 15 Ноябрь 2012 - 16:12

Наверно лучше будет изменить цвет данной кнопки.
Это можно сделать в Панели Администратора Сайт->Редактор тем.
Открыть файл main.csstemplate.
Добавить код в конец файла:
#oformit {
  cursor:pointer;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
  vertical-align: baseline;
  background-color: #8EC023;
  border-top: 1px solid #72AF40;
  border-right: 1px solid #65A32E;
  border-bottom: 1px solid #6B9A20;
  border-left: 1px solid #65A32E;
  color: white!important;
  font: 100% "Open Sans","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif,sans-serif;

  text-align: center;
  text-shadow: 0 -1px 1px #4E9409;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c")";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c");
  background-image: -o-linear-gradient(#75b600, #9bdc27);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #75b600), color-stop(1, #9bdc27));
  background-image: -moz-linear-gradient(center bottom, #75b600 0%, #9bdc27 100%);
  background-image: linear-gradient(top, #75b600, #9bdc27);
  -webkit-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -o-transition: none 0.3s ease-in-out;
  -webkit-transition: none 0.3s ease-in-out;
  -moz-transition: none 0.3s ease-in-out;
}

#oformit:hover {
	background: #1f8cf1;
	background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
	background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
	background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1");  
	border: 1px solid #1560a6;
	border-top: 1px solid #1560a6;
	border-bottom: 1px solid #1560a6;
	-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
	text-shadow:0px -1px 1px 0 #5c3c01;
	-o-transition: none 0.3s ease-in-out;
	-webkit-transition: none 0.3s ease-in-out;
	-moz-transition: none 0.3s ease-in-out;
	border-image: initial;
}

Открыть файл "Оформление заказа".
Найти код:
<button type="submit"  name="tonext" class="whtblue" >{% IF ORDER_STAGE_NUM=4%}Оформить заказ{% ELSE %}Перейти далее{% ENDIF %}</button>
Заменить на:
<button{% IF ORDER_STAGE_NUM=4%} id="oformit" {% ENDIF %} type="submit"  name="tonext" class="whtblue" >{% IF ORDER_STAGE_NUM=4%}Оформить заказ{% ELSE %}Перейти далее{% ENDIF %}</button>

В случае если вы захотите сделать все кнопки перейти далее то в этом случае код для замены будет такой.
<button id="oformit" type="submit"  name="tonext" class="whtblue" >{% IF ORDER_STAGE_NUM=4%}Оформить заказ{% ELSE %}Перейти далее{% ENDIF %}</button>

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

  • ScreenShot 56.jpg

#3 Koderhan

Koderhan

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

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

Отправлено 15 Ноябрь 2012 - 16:44

Изменения кнопки "перейти к оплате".
В файле main.csstemplate.
Найти код:
.whtblue, input[type=submit].paymentFormTbodySubmitButton { border:1px solid #d0d0d0 !important; background:url({ASSETS_IMAGES_PATH}whtblue-nor.jpg) center top repeat-x; padding:5px 15px; font:normal 12px Verdana, Geneva, sans-serif; color:#504f4f; height:27px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; outline:none; }

Заменить на:
.whtblue { border:1px solid #d0d0d0 !important; background:url({ASSETS_IMAGES_PATH}whtblue-nor.jpg) center top repeat-x; padding:5px 15px; font:normal 12px Verdana, Geneva, sans-serif; color:#504f4f; height:27px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; outline:none; }

Найти код:
.whtblue:hover, input[type=submit].paymentFormTbodySubmitButton:hover { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center top repeat; border:1px solid #5fa8c4; color:#3e3e3e; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);  }
  .whtblue:active, input[type=submit].paymentFormTbodySubmitButton:active { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center bottom repeat; border:1px solid #5fa8c4; }
Заменить на:
.whtblue:hover { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center top repeat; border:1px solid #5fa8c4; color:#3e3e3e; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);  }
  .whtblue:active, input[type=submit].paymentFormTbodySubmitButton:active { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center bottom repeat; border:1px solid #5fa8c4; }

Добавить в конец файла код:
.paymentFormTbodySubmitButton {
  cursor:pointer;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
  vertical-align: baseline;
  background-color: #8EC023;
  border-top: 1px solid #72AF40;
  border-right: 1px solid #65A32E;
  border-bottom: 1px solid #6B9A20;
  border-left: 1px solid #65A32E;
  color: white!important;
  font: 100% "Open Sans","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif,sans-serif;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #4E9409;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c")";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c");
  background-image: -o-linear-gradient(#75b600, #9bdc27);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #75b600), color-stop(1, #9bdc27));
  background-image: -moz-linear-gradient(center bottom, #75b600 0%, #9bdc27 100%);
  background-image: linear-gradient(top, #75b600, #9bdc27);
  -webkit-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -o-transition: none 0.3s ease-in-out;
  -webkit-transition: none 0.3s ease-in-out;
  -moz-transition: none 0.3s ease-in-out;
}

.paymentFormTbodySubmitButton:hover {
	background: #1f8cf1;
	background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
	background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
	background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1");  
	border: 1px solid #1560a6;
	border-top: 1px solid #1560a6;
	border-bottom: 1px solid #1560a6;
	-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
	text-shadow:0px -1px 1px 0 #5c3c01;
	-o-transition: none 0.3s ease-in-out;
	-webkit-transition: none 0.3s ease-in-out;
	-moz-transition: none 0.3s ease-in-out;
	border-image: initial;
}
Должно получиться примерно так.

Изображение

При наведение на кнопку.

Изображение

#4 Svet-lana

Svet-lana

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

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

Отправлено 13 Январь 2013 - 01:42

Столкнулась с такой же проблемой - нужно менять цвета кнопок  " Перейти далее".
Есть чем заняться завтра...

#5 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 13 Январь 2013 - 12:15

Просмотр сообщенияSvet-lana (13 Январь 2013 - 01:42) писал:

Столкнулась с такой же проблемой - нужно менять цвета кнопок  " Перейти далее".
Есть чем заняться завтра...

В шаблоне Оформление заказа (Сайт->Редактор тем) найдите примерно следующую строчку кода:
<button type="submit" name="tonext" class="whtblue" >Перейти далее</button>
и вставьте в нее идентификатор, то есть должно получится примерно следующее:
<button type="submit" name="tonext" class="whtblue" id="dalee">Перейти далее</button>

В файле main.csstemplate найдите следующий код:
.paymentFormTbodySubmitButton {
  cursor:pointer;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
  vertical-align: baseline;
  background-color: #8EC023;
  border-top: 1px solid #72AF40;
  border-right: 1px solid #65A32E;
  border-bottom: 1px solid #6B9A20;
  border-left: 1px solid #65A32E;
  color: white!important;
  font: 100% "Open Sans","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif,sans-serif;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #4E9409;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c")";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c");
  background-image: -o-linear-gradient(#75b600, #9bdc27);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #75b600), color-stop(1, #9bdc27));
  background-image: -moz-linear-gradient(center bottom, #75b600 0%, #9bdc27 100%);
  background-image: linear-gradient(top, #75b600, #9bdc27);
  -webkit-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -o-transition: none 0.3s ease-in-out;
  -webkit-transition: none 0.3s ease-in-out;
  -moz-transition: none 0.3s ease-in-out;
}
.paymentFormTbodySubmitButton:hover {
		background: #1f8cf1;
		background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
		background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
		background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1"); 
		border: 1px solid #1560a6;
		border-top: 1px solid #1560a6;
		border-bottom: 1px solid #1560a6;
		-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
		-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
		box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
		text-shadow:0px -1px 1px 0 #5c3c01;
		-o-transition: none 0.3s ease-in-out;
		-webkit-transition: none 0.3s ease-in-out;
		-moz-transition: none 0.3s ease-in-out;
		border-image: initial;
}

и замените его на:
#dalee, .paymentFormTbodySubmitButton {
  cursor:pointer;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
  vertical-align: baseline;
  background-color: #8EC023;
  border-top: 1px solid #72AF40;
  border-right: 1px solid #65A32E;
  border-bottom: 1px solid #6B9A20;
  border-left: 1px solid #65A32E;
  color: white!important;
  font: 100% "Open Sans","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif,sans-serif;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #4E9409;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c")";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aae251", endColorstr="#6ba80c");
  background-image: -o-linear-gradient(#75b600, #9bdc27);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #75b600), color-stop(1, #9bdc27));
  background-image: -moz-linear-gradient(center bottom, #75b600 0%, #9bdc27 100%);
  background-image: linear-gradient(top, #75b600, #9bdc27);
  -webkit-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 0 #a6e95b inset,0 1px 2px 0 rgba(0,0,0,0.2);
  -o-transition: none 0.3s ease-in-out;
  -webkit-transition: none 0.3s ease-in-out;
  -moz-transition: none 0.3s ease-in-out;
}
#dalee:hover, .paymentFormTbodySubmitButton:hover {
		background: #1f8cf1;
		background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
		background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
		background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1"); 
		border: 1px solid #1560a6;
		border-top: 1px solid #1560a6;
		border-bottom: 1px solid #1560a6;
		-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
		-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
		box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
		text-shadow:0px -1px 1px 0 #5c3c01;
		-o-transition: none 0.3s ease-in-out;
		-webkit-transition: none 0.3s ease-in-out;
		-moz-transition: none 0.3s ease-in-out;
		border-image: initial;
}

#6 Svet-lana

Svet-lana

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

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

Отправлено 13 Январь 2013 - 21:00

Спасибо!
Обратно в Оформление заказа


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Пластик
  5. → Оформление заказа
  6. Privacy Policy