Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Изменить Дизайн Кнопок

Автор hunaland, 09 янв. 2018 11:06

Цвет Кнопки

Авторизуйтесь для ответа в теме

Сообщений в теме: 15

#1 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 09 Январь 2018 - 11:06

Здравствуйте.
1. Как изменить дизайн кнопок в корзину(купить) сделать прямоугольной. Изменить цвет. И цвет шрифта внутри кнопки.
2. Изменить шрифт сайта.

Наверх

#2 Vaccina

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

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

Отправлено 10 Январь 2018 - 07:14

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

input[type="button"], .button, button, .paymentFormTbodySubmitButton, .paymentFormSubmitLink {font-size: 16px;text-transform: none;padding: 6px 20px;-webkit-border-radius: 18px;-moz-border-radius: 18px;border-radius: 18px;color: #666666;border: 1px solid #e9e9e9;background: #FFF;cursor:pointer;}

замените на:

input[type="button"], .button, button, .paymentFormTbodySubmitButton, .paymentFormSubmitLink {font-size: 16px;text-transform: none;padding: 6px 20px;color: #fff;border: 1px solid #e9e9e9;background: #3EB5F1;cursor:pointer;}

За цвет шрифта отвечает стиль color, за цвет фона стиль background.

Далее найдите:

body {margin: 0;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background-color: #ffffff;color: #909090;overflow-x: hidden;position: relative;}

в данной строке измените шрифт на необходимый, размер шрифта font-size, стиль шрифта font-family

Наверх

#3 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 11 Январь 2018 - 06:35

Спасибо большое.

Наверх

#4 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 11 Январь 2018 - 08:34

Vaccina (10 Январь 2018 - 07:14) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

input[type="button"], .button, button, .paymentFormTbodySubmitButton, .paymentFormSubmitLink {font-size: 16px;text-transform: none;padding: 6px 20px;-webkit-border-radius: 18px;-moz-border-radius: 18px;border-radius: 18px;color: #666666;border: 1px solid #e9e9e9;background: #FFF;cursor:pointer;}

замените на:

input[type="button"], .button, button, .paymentFormTbodySubmitButton, .paymentFormSubmitLink {font-size: 16px;text-transform: none;padding: 6px 20px;color: #fff;border: 1px solid #e9e9e9;background: #3EB5F1;cursor:pointer;}

За цвет шрифта отвечает стиль color, за цвет фона стиль background.

Далее найдите:

body {margin: 0;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background-color: #ffffff;color: #909090;overflow-x: hidden;position: relative;}

в данной строке измените шрифт на необходимый, размер шрифта font-size, стиль шрифта font-family

Спасибо большое. Еще вопросы.

1. При наведении мышкой изменить цвет кнопки "в корзине".
2. Кнопка "показать все" изменить цвет
3. Форма кнопок, цвет, цвет шрифта, цвет при наведении мышкой ( Популярные товары, новинки, хиты).
4. Убрать соц. сети в подвале сайта.
5. В каталогах сделать оформление как на главной(т.е. кнопку в корзину убрать вниз, убрать значок корзины и т.д.)

Сообщение отредактировал hunaland: 11 Январь 2018 - 11:28

Наверх

#5 Danil

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

Пользователи
4 645 сообщений

Отправлено 13 Январь 2018 - 13:51

hunaland (11 Январь 2018 - 08:34) писал:

Здравствуйте.
1-2) В main.css найдите код

input[type="button"]:hover, .button:hover, button:hover, .paymentFormTbodySubmitButton:hover, .paymentFormSubmitLink:hover {background-color: #3cabda;color: #FFF;border-color: #3cabda;}

в нем изменяйте цвета на свои.
3) В main.css найдите 2 строки кода

.sns-producttabs .sns-pdt-container .sns-pdt-nav .pdt-nav > li {font-size: 150%;border: 1px solid #e9e9e9;height: 42px;line-height: 42px;padding: 0 32px;display: inline-block;background: #FFF;color: #666666;margin: 0 0 0 5px;float: none;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;}

.sns-producttabs .sns-pdt-container .sns-pdt-nav .pdt-nav > li.tab-nav-actived, .sns-producttabs .sns-pdt-container .sns-pdt-nav .pdt-nav > li:hover {background-color: #3cabda;color: #FFF;border-color: #3cabda;cursor:pointer;}

в первой изменяйте стили кнопок в неактивном состоянии, а во второй при наведении.
4) В шаблоне html найдите и удалите код

			<div class="col-xs-12">
			  <ul class="link-follow">
				<li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com"></a></li>
				<li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com"></a></li>
				<li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki"></a></li>
				<li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com"></a></li>
				<li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com"></a></li>
			  </ul>
			</div>

5) В шаблоне Товары найдите и удалите код

					  <div class="cart-wrap">
						<!--a class="add-cart quick btn-cart button" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}></a-->
						<a class="add-cart btn-cart button" title="В корзину" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>В корзину</a>
					  </div>

Далее найдите код

				  </div>
				</div>
			  </div>
			{% ENDFOR %}
		  </div>
		{% ELSE %}
		  <!-- Вывод товаров Списком -->

и перед ним вставьте

					<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
					  <input type="hidden" name="hash" value="{HASH}" />
					  <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
					  <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
					  <div class="cart-wrap">
						<!--a class="add-cart quick btn-cart button" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}></a-->
						<a class="add-cart btn-cart button" title="В корзину" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>В корзину</a>
					  </div>
					</form>

В main.css найдите код

.products-grid .item .item-inner .item-img .cart-wrap {position: absolute;top: -17px;width: 100%;height: 36px;z-index: 3;text-align: center;}

и замените на

.products-grid .item .item-inner .item-img .cart-wrap {width: 100%;height: 36px;z-index: 3;text-align: center;}

Наверх

#6 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 14 Январь 2018 - 07:35

Danil (13 Январь 2018 - 13:51) писал:

Здравствуйте.
1-2) В main.css найдите код

input[type="button"]:hover, .button:hover, button:hover, .paymentFormTbodySubmitButton:hover, .paymentFormSubmitLink:hover {background-color: #3cabda;color: #FFF;border-color: #3cabda;}

в нем изменяйте цвета на свои.
3) В main.css найдите 2 строки кода

.sns-producttabs .sns-pdt-container .sns-pdt-nav .pdt-nav > li {font-size: 150%;border: 1px solid #e9e9e9;height: 42px;line-height: 42px;padding: 0 32px;display: inline-block;background: #FFF;color: #666666;margin: 0 0 0 5px;float: none;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;}

.sns-producttabs .sns-pdt-container .sns-pdt-nav .pdt-nav > li.tab-nav-actived, .sns-producttabs .sns-pdt-container .sns-pdt-nav .pdt-nav > li:hover {background-color: #3cabda;color: #FFF;border-color: #3cabda;cursor:pointer;}

		 <div class="col-xs-12">
			 <ul class="link-follow">
			 <li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com"></a></li>
			 <li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com"></a></li>
			 <li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki"></a></li>
			 <li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com"></a></li>
			 <li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com"></a></li>
			 </ul>
		 </div>

5) В шаблоне Товары найдите и удалите код

					 <div class="cart-wrap">
					 <!--a class="add-cart quick btn-cart button" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}></a-->
					 <a class="add-cart btn-cart button" title="В корзину" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>В корзину</a>
					 </div>

Далее найдите код

				 </div>
			 </div>
			 </div>
		 {% ENDFOR %}
		 </div>
	 {% ELSE %}
		 <!-- Вывод товаров Списком -->

и перед ним вставьте

				 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
					 <input type="hidden" name="hash" value="{HASH}" />
					 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
					 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
					 <div class="cart-wrap">
					 <!--a class="add-cart quick btn-cart button" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}></a-->
					 <a class="add-cart btn-cart button" title="В корзину" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>В корзину</a>
					 </div>
				 </form>

В main.css найдите код

.products-grid .item .item-inner .item-img .cart-wrap {position: absolute;top: -17px;width: 100%;height: 36px;z-index: 3;text-align: center;}

и замените на

.products-grid .item .item-inner .item-img .cart-wrap {width: 100%;height: 36px;z-index: 3;text-align: center;}

Благодарю..
Еще интересует вот это ( на картинке )
1. Изменить цвет при наведении и прозрачность.
2. изменить цвет цены и размер.
3. перенести хит, новинка, скидка наверх.

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

Наверх

#7 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 14 Январь 2018 - 09:20

еще заметил вот здесь корзина сверху и значок присутствует..нужно изменить под общий стиль.

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

Наверх

#8 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 17 Январь 2018 - 17:12

в горизонтальном меню категорий (каталог на главной) не всё отображается..как сделать, чтобы все отображались ?

Наверх

#9 hunaland

Новичок

Пользователи
7 сообщений

Отправлено 19 Январь 2018 - 12:07

На слайдере нет стрелочек.

Наверх

#10 metry

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

Модераторы
884 сообщений

Отправлено 19 Январь 2018 - 15:18

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:

.ico-product.new {background: #4169E1;left: 18px;}
.ico-product.sale {background: #ffff66;right: 18px;}
.ico-product.best {background: #DC143C;left: 18px;}

замените на:

.ico-product.new {background: #4169E1;left: 18px;bottom:85%;}
.ico-product.sale {background: #ffff66;right: 18px;bottom:85%;}
.ico-product.best {background: #DC143C;left: 18px;bottom:85%;}

далее найдите:

#custommenu ul.mainnav {margin: 0;padding: 10px 0;list-style: none;max-height: 50px;overflow: visible;}

замените на:

#custommenu ul.mainnav {margin: 0;padding: 10px 0;list-style: none;max-height: 100px;overflow: visible;}

далее найдите:

#menu {position: relative;margin: 0 0;max-height: 80px;}

замените на:

#menu {position: relative;margin: 0 0;max-height: 160px;}

далее зайдите в Редактор шаблонов-->HTML и найдите:

<!-- Arrow Left -->

после него вставьте:

		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
		</span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
		</span>

Наверх

#11 Pogranets

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

Пользователи
132 сообщений

Отправлено 17 Май 2018 - 21:41

здравствуйте, как убрать желтый цвет на всех категориях, как на картинке

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

Наверх

#12 RayLi

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

Модераторы
2 864 сообщений

Отправлено 18 Май 2018 - 09:03

Pogranets (17 Май 2018 - 21:41) писал:

здравствуйте, как убрать желтый цвет на всех категориях, как на картинке

Здравствуйте.
В данном случае Вам необходимо в шаблоне main.css найти следующий блок кода:

.selectBox {
	height: 35px;
	background: #FFBA00;
	border: 1px solid #505050;
	color: #000;
	padding: 3px;
}

И заменить его вот этим кодом:

.selectBox {
	height: 35px;
	border: 1px solid #505050;
	color: #000;
	padding: 3px;
}

Наверх

#13 Pogranets

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

Пользователи
132 сообщений

Отправлено 19 Май 2018 - 17:39

RayLi (18 Май 2018 - 09:03) писал:

Здравствуйте.
В данном случае Вам необходимо в шаблоне main.css найти следующий блок кода:

.selectBox {
height: 35px;
background: #FFBA00;
border: 1px solid #505050;
color: #000;
padding: 3px;
}

И заменить его вот этим кодом:

.selectBox {
height: 35px;
border: 1px solid #505050;
color: #000;
padding: 3px;
}

Здравствуйте, изменений не произошло

Наверх

#14 Mr.Nito

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

Модераторы
1 364 сообщений

Отправлено 19 Май 2018 - 19:48

Pogranets (19 Май 2018 - 17:39) писал:

Здравствуйте, изменений не произошло

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

Наверх

#15 Pogranets

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

Пользователи
132 сообщений

Отправлено 20 Май 2018 - 15:55

Mr.Nito (19 Май 2018 - 19:48) писал:

Дело было в Кэше. Спасибо

Наверх

#16 dmz55

Новичок

Пользователи
8 сообщений

Отправлено 27 Май 2019 - 14:45

Здравствуйте! Помогите с проблемкой - кнопка сравнения обрезана и обрезок показывает чуть ниже кнопки с наложением на неё:

Наверх

Обратно в Изменение общей стилистики

Темы с аналогичным тегами Цвет, Кнопки

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Детский → Страница товара → Цвет Кнопок В Карточке Товара Автор Гость_карамелька :)_* , 25 мая 2020 нужнапомощь, кнопки, цветкнопок и 3 еще...	2 Ответов 838 Просмотров	карамелька :) 28 мая 2020
Вопросы работы сервиса StoreLand → Другие вопросы → Как Добавить Активные Кнопки Мессенджеров В Подвале Сайта? Автор Гость_magazin_* , 10 февр. 2019 мессенджеры, вайбер, ватсапп и 3 еще...	Популярная тема 12 Ответов 2 704 Просмотров	Новичок Ю 13 мая 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Изменение общей стилистики → Изменить Цвет Фона Автор Гость_Olivka_* , 14 июня 2018 главная, фон, цвет	1 Ответ 1 929 Просмотров	Vaccina 15 июня 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Ночь → Цвет Шрифтов И Цвета Кнопки Автор Гость_Viola777_* , 15 янв. 2018 шрифт дизайн, цвет	1 Ответ 2 307 Просмотров	metry 15 янв. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Осень → Изменение общей стилистики → Как Поменять Цвет Шапки И Отдельной Части Контейнера. Автор Гость_SOGOOD_* , 08 нояб. 2017 цвет, шапка, главная	8 Ответов 3 630 Просмотров	metry 12 нояб. 2017

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

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

Изменить Дизайн Кнопок

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

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

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

Темы с аналогичным тегами Цвет, Кнопки

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

Войти

Google поиск