Добрый день, Аккаунт SL-283354
Просим помочь изменить расположение значков корзина, поиска, сравнения и личного кабинета
Изменения должны распространяться НА ЛЮБЫЕ разрешения экрана
Сейчас значки расположены справа страницы.
НУЖНО СДЕЛАТЬ ИХ СВЕРХУ (сразу после информационной сиреневой полосы)
И немного видоизменить значок поиска и личного кабинета.
Значок личного кабинета заменить на надпись "Личный кабинет"
Значок поиска вместо одной лупы сделать поле для ввода с надписью внутри "поиск"
Примерное расположение значков - на скрине.
0
Перенос Значков Корзины, Поиска, Сравнения И Личного Кабинета
Автор Милый Мишка, 18 февр. 2019 18:51
Сообщений в теме: 5
#1
Отправлено 18 Февраль 2019 - 18:51
#2
Отправлено 19 Февраль 2019 - 01:01
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
замените на:
Надписи в мобильном отображении не влезут, уточните какое необходимо отображение в данном случае?
Зайдите в раздел Сайт - Редактор шаблонов - 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
Отправлено 19 Февраль 2019 - 08:57
В мобильной версии просто значки тогда, только у личного кабинета значок можно изменить? Сейчас 3 горизонтальные полосы. Можно надпись ЛК или какой-то иной значок, но более понятный. А то как будто там не личный кабинет, а меню или каталог.
#4
Отправлено 19 Февраль 2019 - 09:07
Спасибо, общее расположение верным получилось.
Только нужно, чтобы эта фиолетовая полоса была НЕ над сиреневой информационной полосой, а ПОД ней.
Т.е. сверху информационная полоса, потом значки, потом шапка.
И почему-то у информационной полосы пропал крестик для ее закрытия пользователем при необходимости.
В итоге:
1. нужно сделать полосу со значками ПОД сиреневой информационной полосой
2. в информационную полосу вернуть крестик, чтобы пользователь мог ее закрыть
3. поиск сделать строкой поиска при тех разрешений, где возможно (позволяет ширина) Т.е. не лупа и выпадающая строка поиска, а сразу строка.
4. значок личного кабинета заменить на надпись "личный кабинет" там, где это позволяет ширина экрана. В мобильной версии, где надпись не убирается - надпись ЛК или значок, но иной (не 3 полосы, а что-то более понятное есть ведь? Контур человека?
Только нужно, чтобы эта фиолетовая полоса была НЕ над сиреневой информационной полосой, а ПОД ней.
Т.е. сверху информационная полоса, потом значки, потом шапка.
И почему-то у информационной полосы пропал крестик для ее закрытия пользователем при необходимости.
В итоге:
1. нужно сделать полосу со значками ПОД сиреневой информационной полосой
2. в информационную полосу вернуть крестик, чтобы пользователь мог ее закрыть
3. поиск сделать строкой поиска при тех разрешений, где возможно (позволяет ширина) Т.е. не лупа и выпадающая строка поиска, а сразу строка.
4. значок личного кабинета заменить на надпись "личный кабинет" там, где это позволяет ширина экрана. В мобильной версии, где надпись не убирается - надпись ЛК или значок, но иной (не 3 полосы, а что-то более понятное есть ведь? Контур человека?
#5
Отправлено 21 Февраль 2019 - 02:39
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
замените на:
далее найдите:
перенесите его и поставьте после:
далее зайдите в main.css - найдите:
замените на:
далее найдите:
замените на:
далее найдите:
после него вставьте:
Зайдите в раздел Сайт - Редактор шаблонов - 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
Отправлено 26 Февраль 2019 - 07:27
Спасибо, все корректно работает
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных