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


Перенос Значков Корзины, Поиска, Сравнения И Личного Кабинета


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

#1 Милый Мишка

Милый Мишка

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

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

Отправлено 18 Февраль 2019 - 18:51

Добрый день, Аккаунт SL-283354

Просим помочь изменить расположение значков корзина, поиска, сравнения и личного кабинета
Изменения должны распространяться НА ЛЮБЫЕ разрешения экрана

Сейчас значки расположены справа страницы.

НУЖНО СДЕЛАТЬ ИХ СВЕРХУ (сразу после информационной сиреневой полосы)

И немного видоизменить значок поиска и личного кабинета.
Значок личного кабинета заменить на надпись "Личный кабинет"
Значок поиска вместо одной лупы сделать поле для ввода с надписью внутри "поиск"

Примерное расположение значков - на скрине.

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

  • Значки ТАК СДЕЛАТЬ- сверху, а не сбоку.png


#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 19 Февраль 2019 - 01:01

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/* Иконки Меню, Поиска, Корзины */
#header-right {position: fixed;top: 90px;right: 0;z-index: 99;text-align: right;}
#header-right .fa {display: block;width: 45px;height: 45px;line-height: 45px;color: #fff;font-size: 18px;background: #660066;text-align: center;margin-bottom: 5px;border: 1px solid #fff;}
/* Меню */
#header-right .header-link .top-menu {background: #fff;position: absolute;right: 45px;width: 272px;padding: 10px;border: 1px solid #e5e5e5;padding-bottom: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-link:hover .top-menu {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-link .top-menu ul {top: 100%;right: 0;z-index: 9;list-style: none;padding: 0px;margin: 0;min-width: 140px;}
#header-right .header-link .top-menu ul li a {padding: 11px 7px;display: block;text-transform: uppercase;font-weight: 700;font-size: 12px;color: #696969;text-align: left;min-width: 145px;line-height: 1;}
#header-right .header-link .top-menu ul li a:before {content: "\f0da";display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: 12px;color: #696969;float: left;margin-right: 10px;line-height: 1;}
#header-right .header-link .top-menu ul li a:hover, #header-right .header-link .top-menu ul li a:hover:before {color: #e05a00;}
#header-right .header-link .top-menu .dropit-top-menu {display: none;}
/* Сравнение */
#header-right .header-compare {position: relative;}
#header-right .header-compare .compare-title .compare-count {display: none;}
#header-right .header-compare .block-compare.have-items .compare-title .compare-count {display: block;position: absolute;right: 10px;top: 3px;color: #fff;font-size: 10px;}
#header-right .header-compare .compare-content {background: #fff;position: absolute;right: 45px;top: 0;width: 272px;padding: 15px;border: 1px solid #e5e5e5;padding-bottom: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-compare .block-compare.have-items:hover .compare-content {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-compare .compare-content #compare-items {top: 100%;right: 0;z-index: 9;padding: 0 10px 0 0px;margin: 0;min-width: 140px;text-align: left;}
#header-right .header-compare .compare-content #compare-items li {position: relative;margin-bottom: 10px;}
#header-right .header-compare .compare-content #compare-items li .product-name {margin: 0 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#header-right .header-compare .compare-content #compare-items li .dataid {display: none;}
#header-right .header-compare .compare-content #compare-items li .compare-remove {position: absolute;top: 0px;right: -20px;}
#header-right .header-compare .compare-content .button {float: none;margin: 10px auto 0;width: 210px;display: block;}
#header-right .header-compare .compare-content #compare-items li:before {content: "\f0da";display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: 12px;color: #696969;float: left;margin-right: 10px;line-height: 18px;}
#header-right .header-compare .compare-content #compare-items li:hover:before {color: #e05a00;}
/* Поиск */
#header-right .header-search {position: relative;clear: both;}
#header-right .header-search .search-hover {position: absolute;top: 0;right: 45px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-search:hover .search-hover {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-search .search-hover .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 300px;}
#header-right .header-search .search-hover .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 300px;height: 43px;line-height: 43px;padding-right: 60px;}
#header-right .header-search .search-hover .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
#header-right .header-search .search-hover .form-search .fa-search {font-size: 16px;color: #333744;line-height: 43px;padding: 0 17px;width: 50px;background: transparent;float: right;margin-bottom: 0;border: 0;}
#header-right .header-search .search-hover .form-search .fa-search:hover {color: #fff;background: #e05a00;cursor: pointer;}
/* Корзина */
#header-right .block-cart {position: relative;z-index: 100001;}
#header-right .block-cart .cart-count {display: none;}
#header-right .block-cart.have-items .cart-count {display: block;position: absolute;right: 10px;top: 3px;color: #fff;font-size: 10px;}
#header-right .block-cart.cart-page .cart-count {display: none;}
#header-right .block-cart .dropdown-cart {width: 272px;position: absolute;top: 0;right: 45px;border: 1px solid #e5e5e5;background: #fff;padding: 10px;text-align: left;font-size: 13px;color: #696969;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .block-cart:hover .dropdown-cart {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .block-cart.cart-page .dropdown-cart {display: none;}
#header-right .dropdown-cart .cart-empty {line-height: 23px;}
#header-right .dropdown-cart .cart-notempty {display: none;line-height: 24px;}
#header-right .dropdown-cart .subtotal {float: left;width: 100%;margin: 15px 0;font-size: 12px;text-transform: uppercase;font-weight: normal;}
#header-right .dropdown-cart .subtotal .total-sum {font-size: 16px;margin-left: 10px;}
#header-right .dropdown-cart .button.products-remove {float: left;}
#header-right .dropdown-cart .button:last-child {float: right;}
#header-right .dropdown-cart .cart-products-list {max-height: 360px;overflow-y: auto;}
#header-right .dropdown-cart .cart-products-list li.cart-item {float: left;width: 98%;margin: 0 0 10px;padding: 0 0 10px;border-bottom: 1px solid #e5e5e5;}
#header-right .dropdown-cart .cart-products-list .product-image {display: inline-block;margin-right: 10px;float: left;}
#header-right .dropdown-cart .cart-products-list .product-details {overflow: hidden;position: relative;}
#header-right .dropdown-cart .cart-products-list .product-details .product-name {margin: 0 0 5px 0;}
#header-right .dropdown-cart .cart-products-list .product-details .product-name a {font-size: 14px;text-transform: capitalize;font-weight: 600;max-height: 36px;display: block;overflow: hidden;word-wrap: break-word;}
#header-right .dropdown-cart .cart-products-list .product-details .product-mod {margin: 0 0 5px 0;}
#header-right .dropdown-cart .cart-products-list .product-details .product-mod span {font-size: 12px;line-height: 14px;display: block;}
#header-right .dropdown-cart .cart-products-list .product-remove {float: right;position: relative;}
#header-right .dropdown-cart .cart-products-list .product-details .price {width: auto;font-size: 15px;}


замените на:
/* Иконки Меню, Поиска, Корзины */
body {padding-top: 40px;}
#header-right {position: fixed;top: 0;width: 100%;background-color: #660066;border-bottom: 1px solid #fff;text-align: center;}
#header-right .header-right-mob > div {display: inline-block;position: relative;border-right: 1px solid #fff;padding: 0 15px;}
#header-right .header-right-mob > div:last-child {border-right: 0}
#header-right .fa {display: block;width: 45px;height: 45px;line-height: 45px;color: #fff;font-size: 18px;background: #660066;text-align: center;}
/* Меню */
#header-right .header-link .top-menu {background: #fff;position: absolute;left: 0;width: 272px;padding: 10px;border: 1px solid #e5e5e5;padding-bottom: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-link:hover .top-menu {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-link .top-menu ul {top: 100%;right: 0;z-index: 9;list-style: none;padding: 0px;margin: 0;min-width: 140px;}
#header-right .header-link .top-menu ul li a {padding: 11px 7px;display: block;text-transform: uppercase;font-weight: 700;font-size: 12px;color: #696969;text-align: left;min-width: 145px;line-height: 1;}
#header-right .header-link .top-menu ul li a:before {content: "\f0da";display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: 12px;color: #696969;float: left;margin-right: 10px;line-height: 1;}
#header-right .header-link .top-menu ul li a:hover, #header-right .header-link .top-menu ul li a:hover:before {color: #e05a00;}
#header-right .header-link .top-menu .dropit-top-menu {display: none;}
/* Сравнение */
#header-right .header-compare {position: relative;}
#header-right .header-compare .compare-title .compare-count {display: none;}
#header-right .header-compare .block-compare.have-items .compare-title .compare-count {display: block;position: absolute;right: 10px;top: 3px;color: #fff;font-size: 10px;}
#header-right .header-compare .compare-content {background: #fff;position: absolute;right: 45px;top: 0;width: 272px;padding: 15px;border: 1px solid #e5e5e5;padding-bottom: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-compare .block-compare.have-items:hover .compare-content {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-compare .compare-content #compare-items {top: 100%;right: 0;z-index: 9;padding: 0 10px 0 0px;margin: 0;min-width: 140px;text-align: left;}
#header-right .header-compare .compare-content #compare-items li {position: relative;margin-bottom: 10px;}
#header-right .header-compare .compare-content #compare-items li .product-name {margin: 0 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#header-right .header-compare .compare-content #compare-items li .dataid {display: none;}
#header-right .header-compare .compare-content #compare-items li .compare-remove {position: absolute;top: 0px;right: -20px;}
#header-right .header-compare .compare-content .button {float: none;margin: 10px auto 0;width: 210px;display: block;}
#header-right .header-compare .compare-content #compare-items li:before {content: "\f0da";display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: 12px;color: #696969;float: left;margin-right: 10px;line-height: 18px;}
#header-right .header-compare .compare-content #compare-items li:hover:before {color: #e05a00;}
/* Поиск */
#header-right .header-search {position: relative;clear: both;}
#header-right .header-search .search-hover {position: absolute;top: 100%;right: 0;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-search:hover .search-hover {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-search .search-hover .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 300px;}
#header-right .header-search .search-hover .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 300px;height: 43px;line-height: 43px;padding-right: 60px;}
#header-right .header-search .search-hover .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
#header-right .header-search .search-hover .form-search .fa-search {font-size: 16px;color: #333744;line-height: 43px;padding: 0 17px;width: 50px;background: transparent;float: right;margin-bottom: 0;border: 0;}
#header-right .header-search .search-hover .form-search .fa-search:hover {color: #fff;background: #e05a00;cursor: pointer;}
/* Корзина */
#header-right .block-cart {position: relative;z-index: 100001;}
#header-right .block-cart .cart-count {display: none;}
#header-right .block-cart.have-items .cart-count {display: block;position: absolute;right: 10px;top: 3px;color: #fff;font-size: 10px;}
#header-right .block-cart.cart-page .cart-count {display: none;}
#header-right .block-cart .dropdown-cart {width: 272px;position: absolute;top: 100%;left: 0;border: 1px solid #e5e5e5;background: #fff;padding: 10px;text-align: left;font-size: 13px;color: #696969;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .block-cart:hover .dropdown-cart {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .block-cart.cart-page .dropdown-cart {display: none;}
#header-right .dropdown-cart .cart-empty {line-height: 23px;}
#header-right .dropdown-cart .cart-notempty {display: none;line-height: 24px;}
#header-right .dropdown-cart .subtotal {float: left;width: 100%;margin: 15px 0;font-size: 12px;text-transform: uppercase;font-weight: normal;}
#header-right .dropdown-cart .subtotal .total-sum {font-size: 16px;margin-left: 10px;}
#header-right .dropdown-cart .button.products-remove {float: left;}
#header-right .dropdown-cart .button:last-child {float: right;}
#header-right .dropdown-cart .cart-products-list {max-height: 360px;overflow-y: auto;}
#header-right .dropdown-cart .cart-products-list li.cart-item {float: left;width: 98%;margin: 0 0 10px;padding: 0 0 10px;border-bottom: 1px solid #e5e5e5;}
#header-right .dropdown-cart .cart-products-list .product-image {display: inline-block;margin-right: 10px;float: left;}
#header-right .dropdown-cart .cart-products-list .product-details {overflow: hidden;position: relative;}
#header-right .dropdown-cart .cart-products-list .product-details .product-name {margin: 0 0 5px 0;}
#header-right .dropdown-cart .cart-products-list .product-details .product-name a {font-size: 14px;text-transform: capitalize;font-weight: 600;max-height: 36px;display: block;overflow: hidden;word-wrap: break-word;}
#header-right .dropdown-cart .cart-products-list .product-details .product-mod {margin: 0 0 5px 0;}
#header-right .dropdown-cart .cart-products-list .product-details .product-mod span {font-size: 12px;line-height: 14px;display: block;}
#header-right .dropdown-cart .cart-products-list .product-remove {float: right;position: relative;}
#header-right .dropdown-cart .cart-products-list .product-details .price {width: auto;font-size: 15px;}


Надписи в мобильном отображении не влезут, уточните какое необходимо отображение в данном случае?

#3 Милый Мишка

Милый Мишка

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

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

Отправлено 19 Февраль 2019 - 08:57

В мобильной версии просто значки тогда, только у личного кабинета значок можно изменить? Сейчас 3 горизонтальные полосы. Можно надпись ЛК или какой-то иной значок, но более понятный. А то как будто там не личный кабинет, а меню или каталог.

#4 Милый Мишка

Милый Мишка

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

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

Отправлено 19 Февраль 2019 - 09:07

Спасибо, общее расположение верным получилось.

Только нужно, чтобы эта фиолетовая полоса была НЕ над сиреневой информационной полосой, а ПОД ней.

Т.е. сверху информационная полоса, потом значки, потом шапка.

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

В итоге:
1. нужно сделать полосу со значками ПОД сиреневой информационной полосой
2. в информационную полосу вернуть крестик, чтобы пользователь мог ее закрыть
3. поиск сделать строкой поиска при тех разрешений, где возможно (позволяет ширина) Т.е. не лупа и выпадающая строка поиска, а сразу строка.
4. значок личного кабинета заменить на надпись "личный кабинет" там, где это позволяет ширина экрана. В мобильной версии, где надпись не убирается - надпись ЛК или значок, но иной (не 3 полосы, а что-то более понятное есть ведь? Контур человека?

#5 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 21 Февраль 2019 - 02:39

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
		 <div class="header-right-mob">
		 <!-- Меню -->
		 <div class="header-link">
				 <a href="javascript:void(0);"><em class="fa fa-bars"></em></a>
				 <div class="top-menu">
                
замените на:
		 <div class="header-right-mob">
		 <!-- Меню -->
		 <div class="header-link">
				 <a href="javascript:void(0);"><em class="fa fa-user"></em></a>
				 <div class="top-menu">
                
далее найдите:
<!-- Меню, Корзина, Поиск -->
<div id="header-right">

		 <div class="header-right-mob">
		 <!-- Меню -->
		 <div class="header-link">
				 <a href="javascript:void(0);"><em class="fa fa-user"></em></a>
				 <div class="top-menu">
				 <ul class="dropit-top-menu">
						 {% FOR menu %}
						 {% FOR header %}
								 {% FOR links %}
								 <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
								 {% ENDFOR %}
						 {% ENDFOR %}
						 {% ENDFOR %}
				 </ul>
				 <ul class="dropit-top-user-menu">
						 {% 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>
						 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}" title="Сравнение">Сравнение</a></li>{% ENDIF %}
						 <li><a href="{USER_LOGOUT_URL}" title="Выход">Выход</a></li>
						 {% ENDIF %}
				 </ul>
				 </div>
		 </div>
		 <!-- Корзина -->
		 <div class="header-cart">
				 <div class="block-cart {% IFNOT CART_COUNT_TOTAL = 0 %}have-items{% ENDIF %} {% IF MOD_LNAME = cart %}cart-page{% ENDIF %}">
				 <div class="cart-title">
						 <a href="{CART_URL}"><i class="fa fa-shopping-cart"></i></a>
						 <span class="cart-count" data-count="{CART_COUNT_TOTAL}">{CART_COUNT_TOTAL}</span>
				 </div>
				 <div class="dropdown-cart">
						 <div class="cart-content">
						 {% IF cart_count_empty %}
						 <div class="cart-empty">Ваша корзина пуста</div>
						 {% ELSE %}
						 <ul class="cart-products-list">
								 {% FOR cart_items %}
								 <li class="cart-item">
								 <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove"></a>
								 <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-image"><img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=sport{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"></a>
								 <div class="product-details">
										 <p class="product-name"><a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}">{cart_items.GOODS_NAME}</a></p>
										 {% IFNOT cart_items.distinctive_properties_empty %}<p class="product-mod"><span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span></p>{% ENDIF %}
										 <strong class="qty">{cart_items.ORDER_LINE_QUANTITY}</strong> x
										 <span class="price {CURRENCY_CHAR_CODE}" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span>
								 </div>
								 </li>
								 {% ENDFOR %}
						 </ul>
						 {% FOR cart_sum %}
								 <div class="subtotal">Итого: <span class="total-sum">{cart_sum.NOW | money_format}</span></div>
						 {% ENDFOR %}
								 <a class="button products-remove" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}">Очистить</a>
								 <a class="button" title="Перейти к оформлению заказа" href="{CART_URL}">В корзину</a>
						 {% ENDIF %}
						 </div>
				 </div>
				 </div>
		 </div>
		 <!-- Сравнение -->
		 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
		 <div class="header-compare">
				 <div class="block-compare {% IFNOT COMPARE_GOODS_COUNT = 0 %}have-items{% ENDIF %}">
				 <div class="compare-title">
						 <a href="{COMPARE_URL}"><i class="fa fa-retweet"></i></a>
						 <span class="compare-count">{COMPARE_GOODS_COUNT}</span>
				 </div>
				 <div class="compare-content">
						 <ul id="compare-items">
						 {% FOR compare_goods %}
						 <li class="item" {% IF compare_goods.index > 5 %}style="display:none;"{% ENDIF %}>
								 <a data-href="{COMPARE_DELETE_URL}?id={compare_goods.MIN_PRICE_NOW_ID}" data-goods-mod-id="{compare_goods.MIN_PRICE_NOW_ID}" class="compare-remove" title="Убрать товар из списка сравнения"></a>
								 <p class="product-name"><a href="{compare_goods.URL}" title="{compare_goods.NAME}">{compare_goods.NAME}</a></p>
								 <a href="#" class="dataid">{compare_goods.ID}</a>
						 </li>
						 {% ENDFOR %}
						 </ul>
						 <a href="{COMPARE_URL}" class="button">Перейти к Сравнению</a>
				 </div>
				 </div>
		 </div>
		 {% ENDIF %}
		 <!-- Поиск -->
		 <div class="header-search">
				 <a href="javascript:void(0);"><em class="fa fa-search"></em></a>
				 <div class="search-hover">
				 <form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
						 <div class="form-search">
						 <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину...">
						 <input type="hidden" name="goods_search_field_id" value="0">
						 <button type="submit" title="Искать" class="fa fa-search"></button>
						 </div>
				 </form>
				 </div>
		 </div>
		 </div>
</div>
<!-- /END Меню, Корзина, Поиск -->

перенесите его и поставьте после:
<div class="announcement-bar">
		<div class ="text">При заказе от 2 500 рублей по предоплате <span>БЕСПЛАТНАЯ доставка по России</span>. <a href="{CATALOG_URL}" title="Перейти к покупкам">Перейти к покупкам</a></div>
		 <div class="close"><i class="icon-close"></i></div>
	  </div>
      
далее зайдите в main.css - найдите:
body {padding-top: 40px;}
#header-right {position: fixed;top: 0;width: 100%;background-color: #660066;border-bottom: 1px solid #fff;text-align: center;}

замените на:
#header-right {width: 100%;background-color: #660066;border-bottom: 1px solid #fff;text-align: center;}

далее найдите:
#header-right .header-search {position: relative;clear: both;}
#header-right .header-search .search-hover {position: absolute;top: 100%;right: 0;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-search:hover .search-hover {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-right .header-search .search-hover .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 300px;}
#header-right .header-search .search-hover .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 300px;height: 43px;line-height: 43px;padding-right: 60px;}
#header-right .header-search .search-hover .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
#header-right .header-search .search-hover .form-search .fa-search {font-size: 16px;color: #333744;line-height: 43px;padding: 0 17px;width: 50px;background: transparent;float: right;margin-bottom: 0;border: 0;}
#header-right .header-search .search-hover .form-search .fa-search:hover {color: #fff;background: #e05a00;cursor: pointer;}

замените на:
#header-right .header-search {position: relative;clear: both;vertical-align: bottom;}
#header-right .header-search > a {display: none;}
#header-right .header-search .search-hover .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 300px;}
#header-right .header-search .search-hover .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 300px;height: 43px;line-height: 43px;padding-right: 60px;}
#header-right .header-search .search-hover .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
#header-right .header-search .search-hover .form-search .fa-search {font-size: 16px;color: #333744;line-height: 43px;padding: 0 17px;width: 50px;background: transparent;float: right;margin-bottom: 0;border: 0;}
#header-right .header-search .search-hover .form-search .fa-search:hover {color: #fff;background: #e05a00;cursor: pointer;}

далее найдите:
.col-xs-1{width:8.33333333%}
@media all and (max-width: 767px) {

после него вставьте:
#header-right .header-search > a {display: block;}
#header-right .header-search .search-hover {position: absolute;top: 100%;right: 0;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-right .header-search:hover .search-hover {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}


#6 Милый Мишка

Милый Мишка

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

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

Отправлено 26 Февраль 2019 - 07:27

Спасибо, все корректно работает




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

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