Доброго времени суток!
Нужна помощь! Хочу изменить шапку на сайте, пример желаемого результата на фото:
ЛОГОТИП - ПОИСК - ТЕЛЕФОН - КОРЗИНА
Аккаунт SL-340274
0
В теме одно сообщение
#1
Отправлено 07 Январь 2016 - 00:45
#2
Отправлено 11 Январь 2016 - 20:16
detka61.ru (07 Январь 2016 - 00:45) писал:
Доброго времени суток!
Нужна помощь! Хочу изменить шапку на сайте, пример желаемого результата на фото:
ЛОГОТИП - ПОИСК - ТЕЛЕФОН - КОРЗИНА
Аккаунт SL-340274
Нужна помощь! Хочу изменить шапку на сайте, пример желаемого результата на фото:
ЛОГОТИП - ПОИСК - ТЕЛЕФОН - КОРЗИНА
Аккаунт SL-340274
Здравствуйте! Перед внесением изменений, обязательно создайте бэкап!
Вы не указали, куда необходимо перенести верхнее горизонтальное меню (Доставка, Корзина, Каталог...). Опустим его пока что чуть ниже. Для этого: в шаблоне html после строк:
<!-- /END Хлебные крошки --> <div class="container">вставьте блок кода:
<div class="col-md-9 col-xs-12 col-right"> <!-- Меню навигации в шапке --> <div id="custommenu"> <!-- Каталог в шапке --> <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} --> {% IF MENU_CATALOG %} <ul class="mainnav"> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </ul> {% ELSE %} <!-- Меню в шапке --> <ul class="menunav"> {% 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> {% ENDIF %} </div> <div id="mommenu" class="menu-collapse"> <span class="btn btn-navbar menusidebar collapsed" data-toggle="collapse" data-target="#menu_collapse"> <i class="fa fa-bars"></i> </span> <span class="menu_catalog">Каталог</span> <div class="menu_collapse_wrap"> <div id="menu_collapse" class="mainnav collapse"> <ul> {% IFNOT catalog_full_empty %} {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{% IF catalog_full.ISSET_SUB %}<span class="open-menu {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> </div> <!-- /END Меню навигации в шапке --> </div>
Затем, блок кода:
<div class="col-md-9 col-xs-12"> <!-- Меню навигации в шапке --> <div id="custommenu"> <!-- Каталог в шапке --> <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} --> {% IF MENU_CATALOG %} <ul class="mainnav"> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </ul> {% ELSE %} <!-- Меню в шапке --> <ul class="menunav"> {% 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> {% ENDIF %} </div> <!-- 11116 ВРЕМЯ И ТЕЛЕФОН --> <div class="time-left"><em class="fa fa-clock-o"> </em>с 09:00 до 19:00</div><br> <div class="tel-left"><em class="fa fa-phone"> </em><a href="tel:+7904340-33-77">+7(904)340-33-77</a></div> <br> <div id="mommenu" class="menu-collapse"> <span class="btn btn-navbar menusidebar collapsed" data-toggle="collapse" data-target="#menu_collapse"> <i class="fa fa-bars"></i> </span> <span class="menu_catalog">Каталог</span> <div class="menu_collapse_wrap"> <div id="menu_collapse" class="mainnav collapse"> <ul> {% IFNOT catalog_full_empty %} {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{% IF catalog_full.ISSET_SUB %}<span class="open-menu {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> </div> <!-- /END Меню навигации в шапке -->замените на:
<div class="col-md-9 col-xs-12"> <!-- Поиск --> <div class="header-search"> <a href="javascript:void(0);"></a> <div class="search-hover"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" 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 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> <div class="tel-left"><em class="fa fa-phone"> </em><a href="tel:+7904340-33-77">+7(904)340-33-77</a></div>
Далее в конец шаблона main.css добавьте код:
#header .header-search {margin-top: 35px;} #header .header-search .search-hover .form-search input {margin-top: 1px;position: relative;z-index: 1000;padding: 0;float: left;background: #fff;border: 1px solid #e5e5e5;width: 300px;} input.input-text.search-string {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;} button.fa.fa-search {width: 45px;height: 45px;line-height: 45px;color: #fff;font-size: 16px;background: #09afe7;text-align: center;margin-bottom: 5px;border: 1px solid #fff;} #header i.fa.fa-shopping-cart {margin-top: -50px;float: right;width: 100px;height: 45px;line-height: 45px;color: #fff;font-size: 20px;background: #09afe7;text-align: center;border: 1px solid #fff;} #header .block-cart {position: relative;z-index: 100001;} #header .block-cart .cart-count {display: none;} #header .block-cart.have-items .cart-count {margin-top: -50px;display: block;position: absolute;right: 30px;top: 3px;color: #fff;font-size: 10px;} #header .block-cart.cart-page .cart-count {display: none;} #header .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 .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 .block-cart.cart-page .dropdown-cart {display: none;} #header .dropdown-cart .cart-empty {line-height: 23px;} #header .dropdown-cart .cart-notempty {display: none;line-height: 24px;} #header .dropdown-cart .subtotal {float: left;width: 100%;margin: 15px 0;font-size: 12px;text-transform: uppercase;font-weight: normal;} #header .dropdown-cart .subtotal .total-sum {font-size: 16px;margin-left: 10px;} #header .dropdown-cart .button.products-remove {float: left;} #header .dropdown-cart .button:last-child {float: right;} #header .dropdown-cart .cart-products-list {max-height: 360px;overflow-y: auto;} #header .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 .dropdown-cart .cart-products-list .product-image {display: inline-block;margin-right: 10px;float: left;} #header .dropdown-cart .cart-products-list .product-details {overflow: hidden;position: relative;} #header .dropdown-cart .cart-products-list .product-details .product-name {margin: 0 0 5px 0;} #header .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 .dropdown-cart .cart-products-list .product-details .product-mod {margin: 0 0 5px 0;} #header .dropdown-cart .cart-products-list .product-details .product-mod span {font-size: 12px;line-height: 14px;display: block;} #header .dropdown-cart .cart-products-list .product-remove {float: right;position: relative;} #header .dropdown-cart .cart-products-list .product-details .price {width: auto;font-size: 15px;}
и код:
.tel-left { float: left; position: relative; top: 5px; left: 30px; color: #696c79; font-size: 16px; }замените на:
.tel-left { float: right; position: relative; top: 5px; left: 30px; color: #696c79; font-size: 23px; }
Должно получится так:
Проделайте изменения, и напишите, пожалуйста, как усовершенствовать новую шапку.
Темы с аналогичным тегами Шаблон Спорт шапка, главная
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Веган →
Другое →
Главная Страница Для ЧайниковАвтор Гость_Zhanna_* , 02 марта 2019 главная |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Хамелеон →
Отображение Разделов На Главной Странице, Как В Теме "лето"Автор Гость_Роберт_* , 05 нояб. 2018 главная, лето, разделы, хамелеон и 3 еще... |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лето →
Главная →
Главное МенюАвтор Гость_DiLen-Shop_* , 17 окт. 2018 Меню главное, главная |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Весна →
Изменение общей стилистики →
Изменить Цвет ФонаАвтор Гость_Olivka_* , 14 июня 2018 главная, фон, цвет |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лето →
Главная →
Убрать СлайдерАвтор Гость_medved26_* , 06 июня 2018 слайдер удалить, главная |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных