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


Изменить Шапку - Шаблон Спорт

Шаблон Спорт шапка главная

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

#1 detka61.ru

detka61.ru

    Новичок

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

Отправлено 07 Январь 2016 - 00:45

Доброго времени суток!
Нужна помощь! Хочу изменить шапку на сайте, пример желаемого результата на фото:
bandicam 2016-01-07 00-37-26-082.jpg

ЛОГОТИП - ПОИСК - ТЕЛЕФОН - КОРЗИНА

Аккаунт SL-340274

#2 RedHead

RedHead

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

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

Отправлено 11 Январь 2016 - 20:16

Просмотр сообщенияdetka61.ru (07 Январь 2016 - 00:45) писал:

Доброго времени суток!
Нужна помощь! Хочу изменить шапку на сайте, пример желаемого результата на фото:
ЛОГОТИП - ПОИСК - ТЕЛЕФОН - КОРЗИНА
Аккаунт 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">&nbsp;</em>с 09:00 до 19:00</div><br>
			 <div class="tel-left"><em class="fa fa-phone">&nbsp;</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">&nbsp;</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">&nbsp;</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;
}

Должно получится так:
1.jpg

Проделайте изменения, и напишите, пожалуйста, как усовершенствовать новую шапку.





Темы с аналогичным тегами Шаблон Спорт шапка, главная

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

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