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


Помогите Изменить Цвета На Сайте


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

#1 Anna.

Anna.

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

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

Отправлено 08 Декабрь 2015 - 21:31

Здравствуйте. Помогите, пожалуйста, выполнить небольшие изменения. Я изменила цвет фона в шаблоне "Ночь" с черного на белый и некоторые кнопки слились с ним. Все, что я хотела бы изменить, подробно показано на скриншотах.
1. Изменить цвет шапки и строки поиска
2. Изменить цвет контура кнопок и шрифта внутри
3. Изменить цвет шрифта и цвет шрифта при наведении курсора
4. Изменить цвет изображений и изменить их цвет при наведении курсора
5. Изменить цвет цены и названия товара

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

  • 2015-12-08 17-31-59 Скриншот экрана.png
  • 2015-12-08 18-29-04 Скриншот экрана.png


#2 Anna.

Anna.

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

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

Отправлено 08 Декабрь 2015 - 21:38

Продолжение.
6. Перенести кнопку "Вверх" на противоположную сторону
7. Изменить цвета(в кнопке "размер" изменить только цвет фона)
8. Изменить цвета самих кнопок, их шрифта и изображений в спокойном состоянии и при наведении курсора
9. Убрать из товаров блок "Способы доставки"
10. Заменить блок "Личный кабинет" на блок "Новости" с отображением 3-х последних новостей
11. Чтобы при наведении курсора на категорию товара не появлялось серое "стеклышко" и белый "глаз"
12. Изменить цвет этой полоски
13. Изменить цвета

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

  • 2015-12-08 18-30-33 Скриншот экрана.png
  • 2015-12-08 18-30-58 Скриншот экрана.png
  • 2015-12-08 18-36-32 Скриншот экрана.png


#3 Anna.

Anna.

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

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

Отправлено 08 Декабрь 2015 - 21:47

И еще, подскажите пожалуйста, как изменить цвет подвала

#4 Vaccina

Vaccina

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

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

Отправлено 09 Декабрь 2015 - 01:55

В main.css найдите:
#footer-middle {
	background: #343434;
	border: 1px solid #3F3F3F;
	padding: 30px 0px;
	margin-top: 20px;
	color: #CDCDCD;
}

в данном блоке измените значение стиля background

#5 Anna.

Anna.

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

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

Отправлено 09 Декабрь 2015 - 11:31

Спасибо, а по остальным вопросам не поможете?

#6 Firefly

Firefly

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

  • Модераторы
  • 3 796 сообщений

Отправлено 09 Декабрь 2015 - 12:28

Просмотр сообщенияAnna. (08 Декабрь 2015 - 21:31) писал:

Здравствуйте. Помогите, пожалуйста, выполнить небольшие изменения. Я изменила цвет фона в шаблоне "Ночь" с черного на белый и некоторые кнопки слились с ним. Все, что я хотела бы изменить, подробно показано на скриншотах.
1. Изменить цвет шапки и строки поиска
2. Изменить цвет контура кнопок и шрифта внутри
3. Изменить цвет шрифта и цвет шрифта при наведении курсора
4. Изменить цвет изображений и изменить их цвет при наведении курсора
5. Изменить цвет цены и названия товара

Здравствуйте.
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#header-top {background: #3f3f3f;height: 42px;}
Измените код цвета #3f3f3f на необходимый.

Найдите код:
#search_mini_form input {background: #232323;color: #ccc;border: none;border-radius: 25px;height: 25px;float: right;font-size: 12px;margin-top: 9px;width: 200px;padding-left: 10px;padding-right: 30px;}
Измените код цвета #232323 на необходимый.

2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {border: 1px solid #929292;border-radius: 25px;}
Измените код цвета #929292 на необходимый.

#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #fff;border: 1px solid transparent;margin: 0 0 10px 0;}
Измените код цвета #fff (цвет шрифта) на необходимый.

3.  Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#topsl .policy_shop .policy .ca-content .ca-main {color: #535353;margin-bottom: 15px;-webkit-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;}
#topsl .policy_shop .policy:hover .ca-content .ca-main {color: #fff;-webkit-animation: smallToBig 300ms ease;-o-animation: smallToBig 300ms ease;animation: smallToBig 300ms ease;}
#535353 - цвет в обычном виде.
#fff - цвет при наведении

4. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
topsl .policy_shop .policy .fa {border: 1px solid #5b5b5b;background: #2a2a2a;font-size: 30px;transition: all 400ms linear 0s;width: 75px;height: 75px;border-radius: 50%;margin-bottom: 20px;color: #e4e4e4;}
#topsl .policy_shop .policy .fa:before {height: 100%;left: 0;line-height: 75px;position: absolute;top: 0;width: 100%;color: #707070;}
#topsl .policy_shop .policy:hover .fa {background: #707070;border-color: #707070;}
#topsl .policy_shop .policy:hover .fa:before {color: #fff;-webkit-animation: moveFromBottom 300ms ease;-o-animation: moveFromBottom 300ms ease;animation: moveFromBottom 300ms ease;}
#2a2a2a - цвет заливки вокруг иконки без наведения
#707070 (в третьей строке) - цвет заливки вокруг иконки при наведении
#707070 (во второй строке кода) - цвет иконки без наведения
#fff - цвет иконки при наведении

Для блока Товары на главной, Новинки, Хиты продаж:
Найдите код:
.sns-producttabs .sns-pdt-head .sns-pdt-nav .pdt-nav .item-nav.tab-nav-actived span, .sns-producttabs .sns-pdt-head .sns-pdt-nav .pdt-nav .item-nav span:hover {color: #fff;}
#fff - цвет при наведении и в активном состоянии.

Найдите код:
.sns-producttabs .sns-pdt-head .sns-pdt-nav .pdt-nav .item-nav span {cursor: pointer;color: #9d9d9d;text-transform: uppercase;font-weight: bold;}
#9d9d9d - цвет без наведения в неактивном состоянии.

5. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.price {font-weight: bold;color: #e4e4e4;white-space: nowrap;}
#e4e4e4 - цвет цены.

Найдите код:
a {color: #bbb;text-decoration:none;cursor:pointer;}
a:hover, a:active {outline:0;color: #fff;text-decoration:none;}
#bbb - цвет всех ссылок на сайте, в том числе название товара в плитке;
#fff - цвет всех ссылок на сайте при наведении.

#7 Anna.

Anna.

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

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

Отправлено 09 Декабрь 2015 - 14:46

Спасибо. И подскажите пожалуйста еще по 6-13 пунктам.

#8 Firefly

Firefly

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

  • Модераторы
  • 3 796 сообщений

Отправлено 09 Декабрь 2015 - 16:40

Просмотр сообщенияAnna. (09 Декабрь 2015 - 14:46) писал:

Спасибо. И подскажите еще пожалуйста по 6-13 пунктам. Больше беспокоить не буду, честно))

6. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#back-top {background: #3f3f3f;bottom: 20px;color: #fff;position: fixed;right: 25px;z-index: 50;padding: 8px 16px;cursor: pointer;}

Замените на:
#back-top {background: #3f3f3f;bottom: 20px;color: #fff;position: fixed;left: 25px;z-index: 50;padding: 8px 16px;cursor: pointer;}

7. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
h1, h2, h3, h4, h5, h6 {font-weight: bold;text-rendering: optimizelegibility;font-family: inherit;text-transform: uppercase;line-height: 1.1;margin:0;padding:0;color: #e4e4e4;}
Измените код цвета #e4e4e4.

Найдите код:
.product-shop .goodsDataMainModificationArtNumber span, .product-shop .goodsDataMainModificationAvailable span {color: #e4e4e4;}
Измените код цвета #e4e4e4.

Цвет цены изменяется для всего магазина (см. пункт 5)

Найдите код:
.selectBox {height: 35px;background: #2a2a2a;border: 1px solid #505050;color: #fff;padding: 3px;}
Измените код цвета #2a2a2a и границы #505050 при необходимости.

8. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.product-shop .wrap-qty .qty-set .quantity-minus, .product-shop .wrap-qty .qty-set .quantity-plus {width: 26px;height: 26px;line-height: 24px;border: 1px solid #505050;background: #2a2a2a;border-radius: 50%;text-align: center;z-index: 10;cursor: pointer;}
.product-shop .wrap-qty .qty-set .quantity-minus:hover, .product-shop .wrap-qty .qty-set .quantity-plus:hover {background: #707070;border: 1px solid #707070;color: #fff;}

#2a2a2a - цвет заливки без наведения
#505050 - цвет границы без наведения

#707070 - цвет заливки при наведении
#707070 - цвет границы при наведении
#fff - цвет значков "+" и "-" при наведении.

Цвет меняется сразу для всех кнопок:

Найдите код:
.button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {font-family: PT Sans;position: relative;display: -moz-inline-stack;display: inline-block;padding: 7px 15px;border: 1px solid #505050;background: #2a2a2a;cursor: pointer;white-space: normal;text-transform: uppercase;text-align: center;-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;border-radius: 0;}

#2a2a2a - цвет без наведения для кнопок
#505050 - цвет границы без наведения для кнопок

Найдите код:
.product-shop .add-to-cart .add-cart {border: 1px solid #505050;height: 32px;padding: 0 20px;margin: 0 10px 0 0;-webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;}
.product-shop .add-to-cart .add-cart:hover {background: #707070;border: 1px solid #707070;}

#505050 - цвет границы только для кнопок купить (в корзину) без наведения

#707070 - цвет кнопки купить (в корзину и быстрый заказ) при наведении
#707070 - цвет границы кнопки купить (в корзину и быстрый заказ) при наведении.

Для кнопок "сравнение" и "в избранное":
Найдите код:
.product-shop .add-to-links a {display: block;width: 32px;height: 32px;background: #2a2a2a;border: 1px solid #505050;line-height: 30px;font-size: 13px;text-align: center;overflow: hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}

#2a2a2a - код цвета заливки кнопок
#505050 - цвет границы кнопок

Найдите код:
.product-shop .add-to-links a:hover, .product-shop .add-to-links a.added {border: 1px solid #707070;background: #707070;color: #fff;}

#707070 - код цвета заливки при наведении
#707070 - код цвета границы кнопок при наведении
#fff - код цвета самих иконок при наведении.

9. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар, найдите и удалите код:
<!-- Условия доставки -->
{% IFNOT goods_delivery_empty %}
	 <div id="content_3" class="tab-content" style="display: none;">
	 {% FOR goods_delivery %}
		 <div class="delivery">
		 <h5>Вариант {goods_delivery.index}: {goods_delivery.NAME}</h5>
		 <p>{goods_delivery.DESC}</p>
		 {% IF goods_delivery.rules_empty %}
			 {% IF goods_delivery.PRICE=0 %}
			 <span>Стоимость доставки: <strong>{goods_delivery.PRICE | money_format}</strong></span>
			 {% ELSE %}
			 <span>Стоимость доставки: <strong>{goods_delivery.PRICE | money_format}</strong></span>
			 {% ENDIF %}
		 {% ELSE %}
			 <h6>Стоимость доставки зависит от суммы заказа</h6>
			 {% FOR rules %}
			 <div>Для заказов больше <strong>{goods_delivery.rules.SUM_MORE_PRICE | money_format}</strong> - доставка <strong>{goods_delivery.rules.PRICE | money_format}</strong></div>
			 {% ENDFOR %}
			 <div>Для заказов меньше <strong>{goods_delivery.SUM_LESS_PRICE | money_format}</strong> - доставка <strong>{goods_delivery.PRICE | money_format}</strong></div>
		 {% ENDIF %}
		 </div>
	 {% ENDFOR %}
	 </div>
{% ENDIF %}

10. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар, найдите код:
		 <div class="clear-resp"></div>
		 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 column">
			 <h5>Личный кабинет</h5>
			 <ul>
				 {% IFNOT CLIENT_IS_LOGIN %}
				 <li><a href="{USER_LOGIN_URL}" title="Вход в личный кабинет">Вход</a></li>
				 <li><a href="{USER_REGISTER_URL}" title="Регистрация">Регистрация</a></li>
				 {% ELSE %}
				 <li><a href="{USER_SETTINGS_URL}" title="Личный кабинет">Мой кабинет</a></li>
				 <li><a href="{USER_HISTORY_LIST_URL}" title="История заказов">История</a></li>
				 <li><a href="{FAVORITES_URL}" title="Избранные товары">Избранное</a></li>
				 <li><a href="{COMPARE_URL}" title="Сравнение">Сравнение</a></li>
				 <li><a href="{USER_LOGOUT_URL}" title="Выход">Выход</a></li>
				 {% ENDIF %}
			 </ul>
		 </div>

Замените на:
		 <div class="clear-resp"></div>
	 {% IFNOT news_list_shop_empty && TARIFF_FEATURE_NEWS %}
		 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 column">
			 <h5>Новости</h5>
	 <!-- Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
		 <ul class="footer_links">
			 {% FOR news_list_shop %}
			 <li><a href="{news_list_shop.URL}" title="Перейти к странице &laquo;{news_list_shop.TITLE}&raquo;" {% IF news_list_shop.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_shop.TITLE}</a></li>
			 {% ENDFOR %}
		 </ul>
		 </div>
	 {% ENDIF %}
	 <!-- /Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->

11. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите и удалите код:
.categories .item:hover .image:before {right: 50%;background-color: #000;opacity: 0.3;z-index: 1;}
.categories .item:hover .image:after {left: 50%;background-color: #000;opacity: 0.3;}

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.categories .item .image i {color: #fff;display: block;font-size: 30px;left: 0;right: 0;margin: auto;line-height: 40px;opacity: 0;position: absolute;text-align: center;top: 40%;width: 40px;height: 40px;-webkit-transition: all 0.4s ease 0.3s;-o-transition: all 0.4s ease 0.3s;transition: all 0.4s ease 0.3s;z-index: 2;}

Замените на:
.categories .item .image i {color: #fff;display: none;font-size: 30px;left: 0;right: 0;margin: auto;line-height: 40px;opacity: 0;position: absolute;text-align: center;top: 40%;width: 40px;height: 40px;-webkit-transition: all 0.4s ease 0.3s;-o-transition: all 0.4s ease 0.3s;transition: all 0.4s ease 0.3s;z-index: 2;}

12. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#breadcrumbs {min-height: 20px;margin: 0 0 20px;border-bottom: 1px solid #3f3f3f;border-top: 1px solid #3f3f3f;background: #343434;padding: 12px 0;}
Измените цвет заливки #343434 и при необходимости границы #3f3f3f.

13. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.col-left .block-title span {color: #e4e4e4;position: relative;}
Измените код цвета #e4e4e4.

Остальные пункты меню и ссылки изменят свой цвет после выполнения 2 части 5-ого пункта.

#9 Anna.

Anna.

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

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

Отправлено 09 Декабрь 2015 - 21:25

Спасибо)
Подскажите еще
1. Цвет кнопок «Избранное», «Корзина» и «Сравнение» изменился только когда товар открываешь, а в блоке «Вы смотрели» и на главной, цвет кнопок не изменился.
2. Как поменять цвет текста в подвале
3. Как изменить цвет иконок соц. сетей в подвале при наведении и без наведения курсора
4. Как изменить цвет иконок «Меню пользователя», «Сравнение» и «Корзина» в шапке шаблона при наведении и без
5. Как изменить цвет текста в хлебных крошках без наведения курсора, но только чтобы нигде больше цвет не поменялся
6. Можно ли изменить цвет категории товара, когда ее открываешь? А то текст сливается с фоном
7. Как изменить цвет блоков в корзине
8. Как изменить цвет конечной общей суммы
Получается, что цвет самих иконок «+» и «-» нельзя изменить без наведения курсора? Помогите пожалуйста. Больше беспокоить не буду, честно)

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

  • 2015-12-09 19-26-43 Скриншот экрана.png
  • 2015-12-09 19-47-04 Скриншот экрана.png
  • 2015-12-09 20-49-28 Скриншот экрана.png


#10 RedHead

RedHead

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

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

Отправлено 10 Декабрь 2015 - 12:31

Просмотр сообщенияAnna. (09 Декабрь 2015 - 21:25) писал:

Спасибо)
Подскажите еще
1. Цвет кнопок «Избранное», «Корзина» и «Сравнение» изменился только когда товар открываешь, а в блоке «Вы смотрели» и на главной, цвет кнопок не изменился.
2. Как поменять цвет текста в подвале
3. Как изменить цвет иконок соц. сетей в подвале при наведении и без наведения курсора
4. Как изменить цвет иконок «Меню пользователя», «Сравнение» и «Корзина» в шапке шаблона при наведении и без
5. Как изменить цвет текста в хлебных крошках без наведения курсора, но только чтобы нигде больше цвет не поменялся
6. Можно ли изменить цвет категории товара, когда ее открываешь? А то текст сливается с фоном
7. Как изменить цвет блоков в корзине
8. Как изменить цвет конечной общей суммы
Получается, что цвет самих иконок «+» и «-» нельзя изменить без наведения курсора? Помогите пожалуйста. Больше беспокоить не буду, честно)

Здравствуйте!
1.1) На главной:
найдите строку
.product-grid .item .item-inner .actions a {width: 32px;height: 32px;display: inline-block;margin: 0 1px;text-align: center;border: 1px solid #505050;background: #2a2a2a;color: #b5b5b5;font-size: 14px;line-height: 20px;border-radius: 50%;z-index: 1;position: absolute;overflow: hidden;opacity: 0;filter: alpha(opacity=0);}
измените цвет border, background и color

далее в строке
.product-grid .item .item-inner .action-bot .wrap-addtocart .add-cart:hover, .product-grid .item .item-inner .action-bot .actions a:hover, .product-grid .item .item-inner .action-bot .actions a.added {color: #fff;background: #707070;border-color: #707070;}
аналогичные изменения

1.2) Недавно просмотренные
измените цвета в строке
.viewed .block-content .item .actions .add-to-links > div a, .viewed .block-content .item .actions .add-cart {display: inline-block;text-shadow: none;padding: 0;width: 32px;height: 32px;color: #666;background: #2a2a2a;overflow: hidden;border: 1px solid #505050;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}

и

.viewed .block-content .item .actions .add-to-links > div a:hover, .viewed .block-content .item .actions .add-cart:hover, .viewed .block-content .item .actions .add-to-links > div a.added {color: #fff;background: #707070;border-color: #707070;}

1.3) Отображение товаров списком
измените аналогично цвета в строках
.product-list .item .product-info .actions .add-wishlist, .product-list .item .product-info .actions .add-compare {margin-left: 3px;text-shadow: none;width: 32px;height: 32px;color: #666;background: #2a2a2a;overflow: hidden;border: 1px solid #505050;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}

и

.product-list .item .product-info .actions .add-wishlist:hover, .product-list .item .product-info .actions .add-compare:hover, .product-list .item .product-info .actions a.added {background: #707070;color: #fff;border-color: #707070;}

2.1) Цвет при наведении и без измените в строках
#footer-middle a, #footer-middle p {color: #a5a5a5;}
и
#footer-middle a:hover {color: #fff;padding-left: 5px;}

2.2) цвет контактов
в строке
#footer-middle {background: #ab8e73;border: 1px solid #3f3f3f;padding: 30px 0;margin-top: 20px;color: #cdcdcd;}
измените цвет color

2.3) в блоке обратный звонок
в строках
button, input, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"]
{font-size: 100%;color: #b5b5b5;border: 1px solid #505050;outline:none;background-color: transparent;}
измените значение color

3) найдите строки
#footer-middle ul.sns-social li .fa {width: 32px;height: 32px;border: 1px solid #9d9d9d;border-radius: 50%;line-height: 32px;text-align: center;display: block;position: relative;padding: 0px;}
измените значение border

и строку

#footer-middle ul.sns-social li .fa:hover {color: #fff;border: 1px solid #707070;background: #707070;padding: 0px;}
измените  color, border и background

4) Найдите строку
.header-tools .myaccount:hover .fa-user, .header-tools .mycart:hover .fa-shopping-cart .header-tools .mycompare:hover .fa-retweet {color: #fff;}
замените на
.header-tools .myaccount:hover .fa-user, .header-tools .mycart:hover .fa-shopping-cart .header-tools .mycompare:hover .fa-retweet {color: #fff;}
.header-tools .myaccount:hover .fa-user {color: black;}
black замените на нужный цвет

в самый конец шаблона добавьте

.myaccount {
  color: red;
}
.tongle a {color: red;}
.tongle a:hover {color: black;}
замените цвета

5) Найдите строки
.breadcrumbs li strong {color: #fff;}
измените color

далее строку

.breadcrumbs li {display: inline-block;padding: 0 15px 0 20px;background: url("{ASSETS_IMAGES_PATH}arrow-bread.png?design=dark") no-repeat left center;}
замените на
.breadcrumbs li {display: inline-block;padding: 0 15px 0 20px;background: url("{ASSETS_IMAGES_PATH}arrow-bread.png?design=dark") no-repeat left center;color: red;}
где color замените на нужный

далее после строки
/*** Хлебные крошки ***/
вставьте
#breadcrumbs li a span {color: red;}
цвет измените на нужный.

6) Найдите строку
.block-menu-content ul li a.active {color: #fff;}
замените color

7) Найдите строку
.table-box thead td, .table-box tfoot td {background-color: rgba(0, 0, 0, 0.4);border: 1px solid #e1e1e1;line-height: 18px;padding: 12px;text-align: center;color: #fff;}
замените background-color

8) Найдите строку
.cartTable .TotalSum {text-align: right;color: #e4e4e4;}
замените color

#11 Anna.

Anna.

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

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

Отправлено 10 Декабрь 2015 - 15:43

Большое спасибо)

#12 Anna.

Anna.

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

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

Отправлено 10 Декабрь 2015 - 16:47

:rolleyes: :rolleyes:  А подскажите еще, пожалуйста, по нескольким вопросам.
1.Как изменить цвет количества товара в корзине
2.Как изменить цвет количества товара, когда он открыт
3.Как изменить цвет самих иконок «+» и «-» при наведении и без наведения курсора
4.Как изменить цвет текста «в корзину» и «быстрый заказ» при наведении и без наведения курсора
5.Как в открытом товаре изменить цвет самих иконок «избранное» и «сравнение» при наведении и без наведения курсора
6.Как на главной изменить цвет теста «в корзину» без наведения курсора
Спасибо :rolleyes:

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

  • 2015-12-10 16-07-23 Скриншот экрана.png
  • 2015-12-10 15-46-49 Скриншот экрана.png
  • 2015-12-10 16-10-59 Скриншот экрана.png


#13 RedHead

RedHead

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

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

Отправлено 10 Декабрь 2015 - 17:32

Просмотр сообщенияAnna. (10 Декабрь 2015 - 16:47) писал:

:rolleyes: :rolleyes:  А подскажите еще, пожалуйста, по нескольким вопросам.
1.Как изменить цвет количества товара в корзине
2.Как изменить цвет количества товара, когда он открыт
3.Как изменить цвет самих иконок «+» и «-» при наведении и без наведения курсора
4.Как изменить цвет текста «в корзину» и «быстрый заказ» при наведении и без наведения курсора
5.Как в открытом товаре изменить цвет самих иконок «избранное» и «сравнение» при наведении и без наведения курсора
6.Как на главной изменить цвет теста «в корзину» без наведения курсора
Спасибо :rolleyes:

Здравствуйте! В шаблоне main.css найдите строки:

1)
button, input, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"]
{font-size: 100%;color: #F0F0F0;border: 1px solid #505050;outline:none;background-color: transparent;}
и замените на
button, input, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"]
{font-size: 100%;color: #F0F0F0;border: 1px solid #505050;outline:none;background-color: transparent;}
input[type="number"]
{font-size: 100%;color: red;border: 1px solid #505050;outline:none;background-color: transparent;}
цвет замените на нужный

2) найдите строку
.product-shop .wrap-qty .qty-set input[type="text"] {max-width: 60px;display: inline-block;text-align: center;margin: 5px;}
замените на
.product-shop .wrap-qty .qty-set input[type="text"] {max-width: 60px;display: inline-block;text-align: center;margin: 5px;color:red;}
цвет замените на нужный

3) найдите строки
.product-shop .wrap-qty .qty-set .quantity-minus:before {content: "\f068";}
.product-shop .wrap-qty .qty-set .quantity-plus:before {content: "\f067";}
замените на
.product-shop .wrap-qty .qty-set .quantity-minus:before {content: "\f068";color:red;}
.product-shop .wrap-qty .qty-set .quantity-plus:before {content: "\f067";color:red;}
цвет замените на нужный

4) найдите строку
.product-shop .add-to-cart .add-cart {border: 1px solid #505050;height: 32px;padding: 0 20px;margin: 0 10px 0 0;-webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;}
замените на
.product-shop .add-to-cart .add-cart {color:red;border: 1px solid #505050;height: 32px;padding: 0 20px;margin: 0 10px 0 0;-webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;}
цвет замените на нужный

5) найдите строку
.product-shop .add-to-links a {display: block;width: 32px;height: 32px;background: #695746;border: 1px solid #505050;line-height: 30px;font-size: 13px;text-align: center;overflow: hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}
замените на
.product-shop .add-to-links a {display: block;width: 32px;height: 32px;background: #695746;border: 1px solid #505050;line-height: 30px;font-size: 13px;text-align: center;overflow: hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%; color:green;}

затем в самый конец шаблона добавьте
.product-shop .add-to-links a:hover {color: black;}
цвета замените на нужные

6) найдите строку
.product-grid .item .item-inner .action-bot .wrap-addtocart .add-cart {padding: 0 20px;width: 100%;height: 32px;line-height: 30px;border-radius: 25px;}
замените на
.product-grid .item .item-inner .action-bot .wrap-addtocart .add-cart {padding: 0 20px;width: 100%;height: 32px;line-height: 30px;border-radius: 25px; color:green;}
цвет замените на нужный

#14 Anna.

Anna.

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

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

Отправлено 10 Декабрь 2015 - 22:12

Спасибо огромное)))

#15 Anna.

Anna.

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

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

Отправлено 13 Декабрь 2015 - 16:29

Добрый вечер. Подскажите, пожалуйста по вопросикам :rolleyes:
1. Как изменить цвет текста при введении его во все поля «Формы оформления заказа» в корзине.
2. Как изменить цвет этих блоков.
3. Изменить цвет текста при введении его в поля при входе в ЛК и при регистрации.
4. Изменить цвет кнопок и текста внутри при входе в ЛК и при регистрации (при наведении курсора и без наведения).
5. Изменить цвет кнопки и текста «показать все» при наведении курсора и без.
6. Изменить цвет суммы товара и текста.
7. Изменить цвет кнопок и текста «продолжить покупки» и «перейти в корзину» при наведении курсора и без.
8. Изменить цвет кнопок и текста внутри при наведении курсора и без.
9. Изменить цвет цены.
10. Изменить цвет кнопок и текста внутри при наведении курсора и без.
11. Изменить цвет кнопки и текста «отправить» при наведении курсора.
12. Изменить цвет названия категорий (сливается с фоном) при наведении и без.
13. Изменить цвет текста в блоке «описание», «отзывы», «характеристики» (сливается с фоном) при наведении курсора и без.
14. В браузерах Safari и Google Chrome эта иконка открывается в нормальном размере, а в Mozilla Firefox и Internet Explorer вот такая вот большая. Помогите пожалуйста это исправить.
15. Как изменить цвет кнопки и шрифта внутри «оформить заказ» в корзине (при наведении курсора и без).
16. И как изменить цвет заливки и самих иконок  «+» и «-» на главной (при наведении и без).
Заранее большое спасибо)

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

  • 1.png
  • 1, 2.png
  • 3, 4.png
  • 3,4.png
  • 5.png
  • 6, 7.png
  • 8.png
  • 9, 10.png
  • 11.png
  • 12.png
  • 13.png
  • 14.png
  • 15.png
  • 16.png


#16 RedHead

RedHead

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

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

Отправлено 13 Декабрь 2015 - 18:28

Просмотр сообщенияAnna. (13 Декабрь 2015 - 16:29) писал:

Добрый вечер. Подскажите, пожалуйста по вопросикам :rolleyes:

Здравствуйте! Перед внесением изменений, создайте бэкап. В шаблоне man.css (цвета везде измените на необходимые) :

1) Найдите строку
.customer .input-box .inputText {margin: 0;}
замените на
.customer .input-box .inputText {margin: 0; color: green;}

2) строку
.delivery .orderStageDeliveryListTable .cell1 {background: rgba(0, 0, 0, 0.4);padding: 0 5px;}
замените на
.delivery .orderStageDeliveryListTable .cell1 {background: green; padding: 0 5px;}

3) После строк
input[type="number"]
{font-size: 100%;color: gray;border: 1px solid #505050;outline:none;background-color: transparent;}
вставьте:
input[type="text"]
{font-size: 100%;color: gray;border: 1px solid #505050;outline:none;background-color: transparent;}

4) Найдите строку:
.account .buttons p {margin-top: -5px;margin-bottom: 0;}
после нее вставьте:
.account .button {background: green; border: 1px solid red;}
.account .buttons a {color:red;}
.account .buttons a:hover {color:black;}

5) строку
.viewed .action .showAllRecent {max-width:150px;margin: 0 auto;display: block}
замените на
.viewed .action .showAllRecent {max-width:150px;margin: 0 auto;display: block;color: red;background: green;}
.viewed .action .showAllRecent:hover {color: green;background: red;}

6) найдите строку
.cart-ajax .cart-product .cart-product-info .cart-product-price .price {font-weight: bold;font-size: 120%;margin-left: 5px;}
замените на
.cart-ajax .cart-product .cart-product-info .cart-product-price .price {font-weight: bold;font-size: 120%;margin-left: 5px;color:white;}

строку
.cart-ajax .cart-txt h5 {text-transform: none;font-weight: normal;}
заменить на
.cart-ajax .cart-txt h5 {text-transform: none;font-weight: normal;color:white;}

7) Найдите строки
.ajax-buttons .button:first-child {float: left;}
.ajax-buttons .button:last-child {float: right;}
после них вставьте
.fancybox-skin .ajax-buttons .button {background: red; color: black;}
.fancybox-skin .ajax-buttons .button:hover {background: green; color: white;}

8) строку
.compare-info .buttons .button {margin: 0 10px 10px 0;padding: 7px 12px;}
заменить на
.compare-info .buttons .button {margin: 0 10px 10px 0;padding: 7px 12px;color: red;background: green;}
.compare-info .buttons .button:hover {color: green;background: red;}

затем в самый конец шаблона добавьте
.compare-td.compare-td-1 .button {color: green; background: red;}
.compare-td.compare-td-1 .button:hover {color: red; background: green;}
.compare-td.compare-td-2 .button {color: green; background: red;}
.compare-td.compare-td-2 .button:hover {color: red; background: green;}

9) в конец шаблона добавьте строку
.cart_block_price .price {color:red;}

10) найдите строки:
#header-top .header-tools .content a {color: #a0a0a0;}
#header-top .header-tools .content a:hover, #header-top .header-tools .content a:hover i {color: #fff;}
замените на
#header-top .header-tools .content a {color: red;}
#header-top .header-tools .content a:hover, #header-top .header-tools .content a:hover i {color: green;}

далее строки
.header-tools .mycart .content .cart_block_list .bottom-action .button {text-align:center;padding: 0 15px;margin: 0;}
.header-tools .mycart .content .cart_block_list .bottom-action .button:hover {color: #fff;background-color: #707070;}
замените на
.header-tools .mycart .content .cart_block_list .bottom-action .button {text-align:center;padding: 0 15px;margin: 0;background-color:green;}
.header-tools .mycart .content .cart_block_list .bottom-action .button:hover {color: #fff;background-color:red;}


11) найдите строку
#footer-middle .column .callbackForm .button {margin: 0 auto;display: block;}
замените на
#footer-middle .column .callbackForm .button {margin: 0 auto;display: block;background:red; color:black;}
#footer-middle .column .callbackForm .button:hover {background: green; color:red;}

12) строку
.categories .item .title {background: rgba(255, 255, 255, 0.3);text-transform: uppercase;color: #fff;font-size: 20px;font-weight: bold;display: block;width: 100%;max-width: 260px;max-height: 50px;overflow: hidden;line-height: 50px;}
заменить на
.categories .item .title {background: rgba(255, 255, 255, 0.3);text-transform: uppercase;color: green;font-size: 20px;font-weight: bold;display: block;width: 100%;max-width: 260px;max-height: 50px;overflow: hidden;line-height: 50px;}

13) найдите строки
.tab_products .tabs li a {color: #bebebe;font-weight: bold;text-transform: uppercase;font-size: 123%;padding: 8px 35px 15px 0;position: relative;display: -moz-inline-stack;display: inline-block;zoom: 1;}
.tab_products .tabs li a.active, .tab_products .tabs li a:hover {color: #fff;}
замените на
.tab_products .tabs li a {color: red;font-weight: bold;text-transform: uppercase;font-size: 123%;padding: 8px 35px 15px 0;position: relative;display: -moz-inline-stack;display: inline-block;zoom: 1;}
.tab_products .tabs li a.active, .tab_products .tabs li a:hover {color: green;}

15) строку
.cartTable .buttons .button {float: right;margin: 0 3px;}
заменить на:
.cartTable .buttons .button {float: right;margin: 0 3px;background:red;color:green;}
.cartTable .buttons .button:hover {background:green;color:red;}

16) строку
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn {cursor: pointer;position: relative;border: 1px solid #8b8b8b;border-radius: 50%;background: none !important;color: #7d7d7d;width: 38px;height: 38px;line-height: 38px;padding: 0px;}
заменить на
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn {cursor: pointer;position: relative;border: 1px solid red;border-radius: 50%;background: none !important;color: green;width: 38px;height: 38px;line-height: 38px;padding: 0px;}

строку
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn:hover {background: #707070 !important;border-color: #707070;color: #fff;}
на
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn:hover {background: green !important;border-color: red;color: red;}

На вопрос по поводу браузеров, Вам ответят чуть позже.

#17 Anna.

Anna.

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

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

Отправлено 13 Декабрь 2015 - 22:27

Спасибо)

#18 Юля123

Юля123

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

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

Отправлено 14 Декабрь 2015 - 10:05

Просмотр сообщенияAnna. (13 Декабрь 2015 - 22:27) писал:

Спасибо)

Здравствуйте, по поводу отображения в разных браузерах, в main.css после кода:

.Firefox img {width: 100%;}


добавьте код:
.Firefox .payment-logo img {width: auto;}


далее после кода:

.IE img.logo {width: auto;}

добавьте код:

.IE .payment-logo img {width: auto;}


#19 Anna.

Anna.

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

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

Отправлено 14 Декабрь 2015 - 21:38

Сасибо)

#20 Anna.

Anna.

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

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

Отправлено 15 Декабрь 2015 - 01:52

Подскажите пожалуйста, как изменить цвета кнопок и шрифта 1 и 2 при наведении курсора и без

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

  • 2015-12-15 01-24-12 Скриншот экрана.png
  • 2015-12-15 01-33-48 Скриншот экрана.png





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

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