Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Панель Сайта, Лого И Меню

Автор mariteks, 11 окт. 2015 13:53

Авторизуйтесь для ответа в теме

Сообщений в теме: 5

#1 mariteks

Продвинутый пользователь

Пользователи
150 сообщений

ГородКиров

Отправлено 11 Октябрь 2015 - 13:53

Здравствуйте, подскажите можно ли в шаблон снег внести изменения в панель логотип и меню, чтобы получилось как в шаблоне Ночь?

Аккаунт SL-312601

Наверх

#2 Danil

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

Пользователи
4 645 сообщений

Отправлено 12 Октябрь 2015 - 15:38

mariteks (11 Октябрь 2015 - 13:53) писал:

Здравствуйте, подскажите можно ли в шаблон снег внести изменения в панель логотип и меню, чтобы получилось как в шаблоне Ночь?
Прикрепленный файл

меню.PNG
Аккаунт SL-312601

Здравствуйте.
Если речь идет о каталоге, который находится под логотипом, то сделайте следующее:
Создайте бэкап сайта.
В шаблоне html найдите код и удалите

		<!-- Каталог товаров -->
						<nav class="sectionblock-container conta">
							{%IFNOT catalog_full_empty%}
								{%FOR catalog_full%}
								{% IF catalog_full.FIRST %}
								<ul {% IF catalog_full.LEVEL = 0 %}class="navSelect menuResp nav myhidden"{% ENDIF %}>
									{% IF catalog_full.LEVEL = 0 %}<li class="conta-one "><a href="/catalog">Каталог товаров</a></li>{% ENDIF %}
								{% ENDIF %}
									<li {% IF catalog_full.HIDE %}style="display:none;" {% ENDIF %}{% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %} >
										<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active selected"{% 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%}
						</nav>
						<!-- /Каталог товаров -->

Далее найдите код

  <!-- /Форма поиска -->
						</div>
					</div>
				</div>

и после него вставьте

<div id="custommenu">
			  <ul class="mainnav">
				{%IFNOT catalog_full_empty%}
				  {%FOR catalog_full%}
					{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="wrap_submenu {% 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 %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></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 id="mommenu" class="menu-offcanvas">
			  <span class="btn-navbar"> <i class="fa fa-align-justify"></i> <span class="overlay"></span></span>
			  <div id="menu_offcanvas" class="offcanvas">
				<div class="canvas-title">
				  <i class="fa fa-bars"></i>
				  <span class="title">Каталог</span>
				  <i class="fa fa-times"></i>
				</div>
				<ul class="mainnav">
				{% 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>

В main.css найдите

/* menu */
.menuResp {
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	word-spacing: -0.25em;
}
.menuResp li {
	display: inline-block;
	/*display: inline;*/
	padding: 0;
	text-align: left;
	vertical-align: top;
	position: relative;
	word-spacing: normal;
	/* zoom: 1; */
}
.menuResp .open {
	z-index: 1;
}
.menuResp .conta-one {
	display: none;
}
.menuResp a {
	color: #666;
	display: inline-block;
	font-size: 14px;
	line-height: 1.1em;
	padding: 10px 10px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}
.menuResp .open > a {
}
.navSelect .rarr {
	display: none;
}
.menuResp a:hover, .menuResp .open > a,ul.head li a.selected, nav.footer-menu li a.selected {
	background: #f7f7f7;
	color: #000;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
}
.menuResp .active {
	background: #f7f7f7;
	color: #000;
}
.menuResp ul {
	background: #fff;
	border: 1px solid #dbdbdb;
	display: none;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	z-index: 1000;
}
.menuResp ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.menuResp ul a {
	display: block;
	white-space: nowrap;
}
.menuResp ul ul {
	display: none;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	z-index: 2;
}
.arrow-up {
	border-bottom: 5px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0;
	left: 10px;
	position: absolute;
	top: -4px;
	width: 0;
	z-index: 1;
}
.arrow-up2 {
	border-bottom: 5px solid #c2c2c2;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0;
	left: 10px;
	position: absolute;
	top: -5px;
	width: 0;
	z-index: 0;
}
.arrow-left {
	border-bottom: 5px solid transparent;
	border-right: 5px solid #fff;
	border-top: 5px solid transparent;
	height: 0;
	left: -4px;
	position: absolute;
	top: 0;
	width: 0;
	z-index: 1;
}
.arrow-left2 {
	border-bottom: 5px solid transparent;
	border-right: 5px solid #c2c2c2;
	border-top: 5px solid transparent;
	height: 0;
	left: -5px;
	position: absolute;
	top: 0;
	width: 0;
	z-index: 0;
}
.toLeft .arrow-left {
	border-left: 5px solid #fff;
	border-right: 0;
	left: auto;
	right: -4px;
}
.toLeft .arrow-left2 {
	border-left: 5px solid #c2c2c2;
	border-right: 0;
	left: auto;
	right: -5px;
}
.arrow-down {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #666;
	display: inline;
	display: inline-block;
	height: 0;
	margin: 5px 0 0 5px;
	vertical-align: top;
	width: 0;
	zoom: 1;
}
.arrow-right {
	border-bottom: 4px solid transparent;
	border-left: 4px solid #666;
	border-top: 4px solid transparent;
	display: inline;
	display: inline-block;
	height: 0;
	margin: 3px 0 0 5px;
	vertical-align: top;
	width: 0;
	zoom: 1;
}
.btnNav {
	background: #ccc;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
	cursor: pointer;
	display: none;
	float: right;
	margin: 0 0 5px;
	padding: 7px 10px;
	position: relative;
	z-index: 99;
}
.btnNav:hover {
	opacity: 1 !important;
}
.btnNavIcon {
	background: #F5F5F5;
	border-radius: 1px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	display: block;
	height: 2px;
	margin: 3px auto;
	width: 18px;
}
.menu_select {
	display: none;
	font-size: 13px;
	height: 32px;
	line-height: 27px;
	margin: 0 auto;
	padding: 4px;
	vertical-align: top;
	width: 100%;
}
.menu_select option {
	color: #6DA3BD;
	cursor: pointer;
}
.menu_select .opt_1 {
	color: #000000;
}
.rarr {
	font-size: 13px;
}
@media screen and (min-width: 980px) {
	.menuResp {
		display: block !important;
	}
	.rarr {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.btnNav {
		display: block;
	}
	.menuResp {
		clear: both;
		display: none;
	}
	.menuResp li,.menuResp a {
		display: block;
		white-space: normal;
	}
	.menuResp .active {
		background: #ddd;
	}
	.menu_select {
		display: block;
	}
	.menuResp ul {
		background: none;
		border: 0;
		box-shadow: none;
		display: block !important;
		position: static;
	}
	.menuResp ul li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.menuResp ul a {
		display: block;
		white-space: normal;
	}
	.menuResp ul ul {
		display: block;
		position: static;
	}
	.arrow-up,.arrow-up2,.arrow-left,.arrow-left2,.toLeft .arrow-left,.toLeft .arrow-left2,.arrow-right {
		display: none;
	}
	.arrow-down {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid #666;
		display: inline;
		display: inline-block;
		height: 0;
		margin: 5px 0 0 5px;
		vertical-align: top;
		width: 0;
		zoom: 1;
	}
	.arrow-right {
		border-bottom: 4px solid transparent;
		border-left: 4px solid #666;
		border-top: 4px solid transparent;
		display: inline;
		display: inline-block;
		height: 0;
		margin: 3px 0 0 5px;
		vertical-align: top;
		width: 0;
		zoom: 1;
	}
	.mediaIndicator {
		z-index: 1 !important;
	}
	.rarr {
		display: inline-block;
		padding: 0 2px 0 0;
	}
}

/* END menu */

и замените на

/* Нижняя часть шапки Меню */
#menu {z-index: 1;}
#menu .container > .inner {position: relative;}
#custommenu ul.mainnav {margin-bottom: 20px;text-align: center;}
#custommenu ul.mainnav:before, #custommenu ul.mainnav:after {content: " ";display: table;}
#custommenu ul.mainnav li.level0 {border: none;position: relative;display: inline-block;text-align: left;}
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #000;border: 1px solid transparent;margin: 0 0 10px 0;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {border: 1px solid #929292;border-radius: 25px;}
#custommenu ul.mainnav li.level0 > .wrap_submenu {position: absolute;min-width: 255px;padding: 0;top: 120%;left: 0;background: #2a2a2a;border: 1px solid #505050;border-bottom: 0;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);z-index: 100;display: block;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#custommenu ul.mainnav li.level0:hover > .wrap_submenu {overflow: visible;opacity: 1;filter: alpha(opacity=100);top: 100%;-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1.parent .wrap_submenu {position: absolute;min-width: 255px;padding: 0;top: 0%;left: 98%;background: #2a2a2a;border: 1px solid #505050;border-bottom: 0;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);margin-top: 5px;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.7);-ms-transform: scale(0.7);-o-transform: scale(0.7);transform: scale(0.7);-webkit-transform-origin: top left;-moz-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;-webkit-transition: all 0.25s ease-out;-o-transition: all 0.25s ease-out;transition: all 0.25s ease-out;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1 {position: relative;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1 a {border-bottom: 1px solid #444;color: #a0a0a0;display: block;padding: 8px 15px;font-size: 14px;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1 a:hover {color: #fff;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1.parent:after {position: absolute;top: 50%;right: 10px;font-size: 14px;margin-top: -7px;content: "\f105";width: 14px;height: 14px;text-align: center;line-height: 14px;display: inline-block;color: #8f8f8f;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1.parent:hover .wrap_submenu {z-index: 100;overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top left;-moz-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;-webkit-transition: all 0.25s ease-out 0.2s;-o-transition: all 0.25s ease-out 0.2s;transition: all 0.25s ease-out 0.2s;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1.parent:hover .wrap_submenu.hide-cat {display:none !important;}
/* Адаптивное меню */
#mommenu {display:none;margin: 10px 0 0px;}
#mommenu .btn-navbar {padding: 0 20px;border: 0;display: -moz-inline-stack;display: inline-block;vertical-align: middle;zoom: 1;height: 30px;line-height: 30px;cursor: pointer;}
#mommenu .btn-navbar i {font-size: 25px;line-height: 25px;}
#mommenu .btn-navbar .overlay {content: "";display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;background: #000;opacity: 0.2;filter: alpha(opacity=20);cursor: pointer;}
#mommenu #menu_offcanvas {position: fixed;top: 0;opacity: 0;filter: alpha(opacity=0);left: -250px;height: 100%;overflow: auto;width: 250px;background: #222;color: #b9b9b9;z-index: 9999;}
#mommenu #menu_offcanvas.active {left: 0;opacity: 1;filter: alpha(opacity=100);}
#mommenu #menu_offcanvas .mainnav li {position: relative;padding: 0 0px;}
#mommenu #menu_offcanvas .mainnav li a {display: block;color: #b9b9b9;font-size: 14px;margin: 0;line-height: 45px;padding: 0 20px;font-weight: 500;letter-spacing: 0.3px;text-align: left;text-transform: capitalize;outline: medium none;border-bottom: 1px solid #565656;}
#mommenu #menu_offcanvas .mainnav li a:hover, #mommenu #menu_offcanvas .mainnav li a.active {color: #fff;}
#mommenu #menu_offcanvas .mainnav li ul.sub {display: none;padding-left: 15px;}
#mommenu #menu_offcanvas .mainnav li.active > ul.sub {display: block;}
#mommenu #menu_offcanvas .mainnav li a .open-menu {cursor: pointer;float: right;position: absolute;right: 10px;top: 4px;padding: 0 10px;color: #fff;}
#mommenu #menu_offcanvas .mainnav li a .open-menu:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
#mommenu #menu_offcanvas .mainnav li.active a .open-menu.active:before {content: "\f068";color: #707070;}
#mommenu .canvas-title {background-color: #1f1f1f;padding: 13px 20px 8px;font-size: 20px;cursor: pointer;color: #FFFFFF;border-bottom: 1px solid #565656;}
#mommenu .canvas-title .title {margin-left: 10px;text-transform: uppercase;}
#mommenu .canvas-title i.fa-times {float: right;}
.show-sidebar #wrapper {left: 250px;}
#custommenu ul.mainnav li.level0 .wrap_submenu .level1.parent:after,
.product-grid .item .item-inner .actions a:before
{display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;font-size: inherit;line-height: 100%;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#custommenu ul.mainnav li.level0 > div,
#custommenu ul.mainnav li.level0 > .wrap_submenu,
#mommenu #menu_offcanvas,
.product-grid .item .item-inner,
.product-grid .item .item-inner .actions a,
.product-list .item .product-info .actions .add-wishlist,
.box-up-sell .block-title .navigation a .fa,
.product-shop .add-to-cart .add-cart
{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

Наверх

#3 mariteks

Продвинутый пользователь

Пользователи
150 сообщений

ГородКиров

Отправлено 12 Октябрь 2015 - 16:04

Danil (12 Октябрь 2015 - 15:38) писал:

Здравствуйте.
Если речь идет о каталоге, который находится под логотипом, то сделайте следующее:
Создайте бэкап сайта.

Спасибо, а верхнюю панель можно сделать как в шаблоне ночь?

Наверх

#4 Vaccina

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

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

Отправлено 13 Октябрь 2015 - 06:05

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

Наверх

#5 mariteks

Продвинутый пользователь

Пользователи
150 сообщений

ГородКиров

Отправлено 13 Октябрь 2015 - 11:32

Vaccina (13 Октябрь 2015 - 06:05) писал:

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

Да, поиск и корзину перенести и сделать меню пользователя (если это возможно) как в шаблоне ночь и убрать розовую полосу.
Заранее спасибо

Наверх

#6 Vaccina

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

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

Отправлено 14 Октябрь 2015 - 06:56

Ну чтож, пробуем =)

В main.css найдите:

nav.head {
overflow: hidden;
background-color: #719D00;
max-width: 100%;
}

замените на:

nav.head {
overflow: hidden;
background-color: #719D00;
max-width: 100%;
width: auto;
display: inline-block;
}

В шаблоне HTML найдите:

<!-- Блок навигации -->
				 {% IFNOT menu_empty %}
					 <nav class="head">
						 <ul class="head">
							 {% FOR menu %}
								 {% FOR header %}
									 {% FOR links %}
										 <li>
											 <a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
										 </li>
									 {% ENDFOR %}
								 {% ENDFOR %}
							 {% ENDFOR %}
							
						 </ul>
						 <a href="#" class="pull">Меню</a><!-- Появляется только при маленьких разрешениях экрана -->
					 </nav>
				 {% ENDIF %}
				 <!-- /Блок навигации -->

после него вставьте:

<div class="header-col-right right">
		 <!-- Поиск -->
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину">
			 <div class="form-search">
			 <input id="search" type="text" name="q" value="" class="input-text search-string" placeholder="Поиск по магазину...">
			 <button type="submit" title="Искать" class="button search-submit fa"></button>
			 </div>
		 </form>
		 <div class="header-tools">
			 <!-- Меню пользователя -->
			 <div class="myaccount">
			 <div class="tongle" title="Меню пользователя"><i class="fa fa-user"></i></div>
			 <div class="content">
				 <ul class="links">
				 {% IFNOT CLIENT_IS_LOGIN %}
				 <li><a href="{USER_LOGIN_URL}" title="Вход в личный кабинет"><i class="fa fa-sign-in"></i>Вход</a></li>
				 <li><a href="{USER_REGISTER_URL}" title="Регистрация"><i class="fa fa-user-plus"></i>Регистрация</a></li>
				 <li><a href="{CART_URL}" title="Корзина"><i class="fa fa-shopping-cart"></i>Корзина</a></li>
				 {% ELSE %}
				 <li><a href="{USER_SETTINGS_URL}" title="Личный кабинет"><i class="fa fa-user"></i>Мой кабинет</a></li>
				 <li><a href="{USER_HISTORY_LIST_URL}" title="История заказов"><i class="fa fa-history"></i>История</a></li>
				 <li><a href="{FAVORITES_URL}" title="Избранные товары"><i class="fa fa-heart"></i>Избранное</a></li>
				 <li><a href="{COMPARE_URL}" title="Сравнение"><i class="fa fa-retweet"></i>Сравнение</a></li>
				 <li><a href="{USER_LOGOUT_URL}" title="Выход"><i class="fa fa-sign-out"></i>Выход</a></li>
				 {% ENDIF %}
				 </ul>
			 </div>
			 </div>
			 <!-- Сравнение -->
			 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
			 <div class="mycompare {% IF COMPARE_GOODS_COUNT > 0 %}have-items{% ENDIF %}">
			 <div class="tongle">
				 <a href="{COMPARE_URL}" title="Перейти к сравнению">
				 <i class="fa fa-retweet"></i><span class="compare-num">{COMPARE_GOODS_COUNT}</span>
				 </a>
			 </div>
			 <ul id="compare-items" class="content">
				 {% FOR compare_goods %}
				 <li class="item" {% IF compare_goods.index > 6 %}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="remove-compare fa fa-close" title="Убрать товар из списка сравнения"></a>
				 <div class="product-name"><a href="{compare_goods.URL}" class="title" title="{compare_goods.NAME}">{compare_goods.NAME}</a></div>
				 <a href="#" class="dataid">{compare_goods.ID}</a>
				 </li>
				 {% ENDFOR %}
			 </ul>
			 </div>
			 {% ENDIF %}
			 <!-- Корзина -->
			 <div class="mycart {% IFNOT CART_COUNT_TOTAL = 0 %}have-items{% ENDIF %} {% IF MOD_LNAME = cart %}cart-page{% ENDIF %}">
			 <div class="tongle cart-status">
				 <a href="{CART_URL}" title="Перейти в корзину">
				 <i class="fa fa-shopping-cart"></i><span class="cart-count">{CART_COUNT_TOTAL}</span>
				 </a>
			 </div>
			 <div class="content dropdown-cart">
				 <div class="cart_block_list">
				 {% IF cart_count_empty %}
				 <p class="cart_block_no_products">Ваша корзина пуста</p>
				 {% ELSE %}
				 <ul id="cart-sidebar" class="products">
					 {% FOR cart_items %}
					 <li class="cart-item">
					 <a class="cart-images" href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}">
						 <img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=dark{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon">
					 </a>
					 <div class="cart-block-info">
						 <div class="product-name">
						 <a class="cart_block_product_name" href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}">{cart_items.GOODS_NAME}</a>
						 {% IFNOT cart_items.distinctive_properties_empty %}<span class="cart_block_product_mod">({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %}
						 </div>
						 <div class="cart_block_price">
						 <span class="quantity-formated"><span class="quantity">{cart_items.ORDER_LINE_QUANTITY}</span>&nbsp;x</span>
						 <span class="price {CURRENCY_CHAR_CODE}" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW}</span>
						 </div>
					 </div>
					 <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove">&nbsp;</a>
					 </li>
					 {% ENDFOR %}
				 </ul>
				 {% ENDIF %}
				 <div class="bottom-action actions">
					 {% FOR cart_sum %}
					 <div class="cart-prices">
						 <span>Итого:</span>
						 <span class="total-sum">{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}</span>
					 </div>
					 {% ENDFOR %}
					 <a class="button remove-products" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}">Очистить</a>
					 <a class="button" href="{CART_URL}" title="Перейти к оформлению заказа" >В корзину</a>
				 </div>
				 </div>
			 </div>
			 </div>
		 </div>
		 </div>

Далее в main.css найдите:

.sectionblock-inner-header,.inner-center {
position: relative;
z-index: 4;
float: left;
clear: both;
overflow: hidden;
width: 100%;
background-color: #FF9D73;color:#fff;
}
.footer-inner-header {
border-bottom: 0
}

после него вставьте:

#header-top .header-col-right {line-height: 40px;float:right;}
#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;}
#search_mini_form {float: left;position: relative;}
#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;}
#search_mini_form input:focus {width: 250px;}
#search_mini_form button.button {width: 32px;height: 32px;background: none;border: none;font-size: 11px;margin: 0;padding: 0;position: absolute;right: 2px;top: 5px;}
#search_mini_form button.button:before {content: "\f002";font-family: FontAwesome;width: 32px;height: 32px;text-align: center;line-height: 32px;color: #fff;}
#search_mini_form button.button:hover:before {color: #707070;}
.header-tools {display: -moz-inline-stack;display: inline-block;vertical-align: middle;zoom: 1;float: left;position: relative;margin-left: 10px;}
.header-tools .myaccount, .header-tools .mycart, .header-tools .mycompare {display: -moz-inline-stack;display: inline-block;vertical-align: middle;zoom: 1;}
.header-tools .myaccount:hover .fa-user, .header-tools .mycart:hover .fa-shopping-cart .header-tools .mycompare:hover .fa-retweet {color: #fff;}
.header-tools .myaccount .tongle, .header-tools .mycart .tongle, .header-tools .mycompare .tongle {font-size: 16px;}
.header-tools .myaccount .tongle .fa:before, .header-tools .mycart .tongle .fa:before, .header-tools .mycompare .tongle .fa:before {display: block;width: 16px;height: 28px;line-height: 28px;text-align: center;}
.header-tools .myaccount .tongle .fa:before {width: 32px;}
.header-tools .myaccount .content, .header-tools .mycart .content, .header-tools .mycompare .content {position: absolute;right: 0;min-width: 170px;margin-top: 0px;z-index: 9999;padding: 5px 15px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);text-align: left;top: 100%;background: #2a2a2a;border: 1px solid #505050;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.header-tools .myaccount:hover .content, .header-tools .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .myaccount .content:before, .header-tools .mycart .content:before, .header-tools .mycompare .content:before {content: '';display: block;width: 100%;height: 15px;position: absolute;bottom: 100%;left: 0;}
.header-tools .myaccount .content ul li, .header-tools .mycart .content ul li {padding: 4px 0;line-height: 20px;}
.header-tools .myaccount .content ul.links {padding: 5px 0;}
.header-tools .myaccount .content ul.links li i {margin-right: 10px;width: 16px}
.header-tools .mycompare #compare-items {max-width: 300px;padding: 5px;}
.header-tools .mycompare #compare-items li {float: left;width: 100%;margin: 5px 0;padding: 0px 10px;border-bottom: 1px solid #464646;line-height: 20px;}
.header-tools .mycompare #compare-items li:last-child, .header-tools .mycompare #compare-items li:nth-child(6) {border: 0;margin-bottom: 0;}
.header-tools .mycompare #compare-items li .remove-compare {float: right;line-height: 20px;}
.header-tools .mycompare #compare-items li .product-name {display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 90%;}
.header-tools .mycompare #compare-items li .dataid {display: none;}
.header-tools .mycompare #compare-items .button {display: block;margin: 0 auto;max-width: 170px;}
.header-tools .mycart.have-items.cart-page:hover .content {display: none;}
.header-tools .mycart .cart-count, .header-tools .mycompare .compare-num {background: #fff;color: #3c3c3c;position: relative;display: inline-block;right: 0;top: -10px;line-height: 15px;font-size: 12px;width: 16px;height: 16px;border-radius: 50%;border: 0px;text-align: center;}
.header-tools .mycart.cart-page .cart-count, .header-tools .mycompare.compare-page .compare-num {display: none;}
.header-tools .mycart:hover .cart-count, .header-tools .mycompare:hover .compare-num {background: #898989;color: #fff;}
.header-tools .mycart .content {min-width: 300px;padding: 5px;}
.header-tools .mycart .content .bottom-action {text-transform: uppercase;text-align: left;padding-right: 15px;margin-top: 10px;border-top: 1px solid #505050;}
.header-tools .mycart .content .cart_block_list {padding: 15px 0 15px 15px;}
.header-tools .mycart .content .cart_block_list ul.products {margin: 0;max-height:350px;overflow-y: auto;padding-right:15px;}
.header-tools .mycart .content .cart_block_list ul.products li {font-weight: normal;overflow: hidden;padding: 0;position: relative;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #505050;}
.header-tools .mycart .content .cart_block_list ul.products li:last-child {border: 0;margin-bottom: 0;}
.header-tools .mycart .content .cart_block_list ul.products .cart-images {border-color: #505050;float: left;margin-right: 20px;border: 1px solid #dfdfdf;max-width: 100px;}
.header-tools .mycart .content .cart_block_list ul.products .cart-block-info {overflow: hidden;position: relative;padding-right: 20px;}
.header-tools .mycart .content .cart_block_list ul.products .cart-block-info .product-name {padding-bottom: 5px;margin-top: -4px;font-size: 14px;line-height: 18px;}
.header-tools .mycart .content .cart_block_list ul.products .cart-block-info .product-name a {display: inline-block;max-height: 36px;overflow: hidden;}
.header-tools .mycart .content .cart_block_list ul.products .cart-block-info .quantity-formated {display: inline-block;color: #9c9b9b;text-transform: uppercase;font-size: 10px;padding-right: 5px;}
.header-tools .mycart .content .cart_block_list ul.products .cart-block-info .quantity-formated .quantity {font-size: 15px;}
.header-tools .mycart .content .cart_block_list .product-remove {position: absolute;right: 0;bottom: 50%;margin-top: -20px;color: #666;display: block;background: #dfdfdf;width: 18px;height: 18px;border-radius: 50%;text-align: center;}
.header-tools .mycart .content .cart_block_list .product-remove:hover {color: #fff;background: #707070;}
.header-tools .mycart .content .cart_block_list .product-remove:before {display: block;content: "\f00d";font-family: "FontAwesome";font-size: 10px;line-height: 18px;}
.header-tools .mycart .content .cart_block_list .cart_block_no_products {margin: 0;padding: 0 0 20px;display: none;}
.header-tools .mycart .content .cart_block_list .total-sum {float: right;}
.header-tools .mycart .content .cart_block_list .bottom-action .cart-prices {font-weight: bold;padding: 0 0 10px;}
.header-tools .mycart .content .cart_block_list .bottom-action .cart-prices .cart-prices-line {line-height: 180%;margin: 10px 0;}
.header-tools .mycart .content .cart_block_list .bottom-action .cart-prices .cart-prices-line .total-sum {color: #e4e4e4;}
.header-tools .mycart .content .cart_block_list .bottom-action .button + .button {float: right;}
.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;}
.sectionblock-inner-header, .searchForm {
display: none !important;
}

После необходимо подключить иконочные шрифты, то есть в Редактор шаблонов загружаем прикрепленные файлы из архива:

Downloads.zip 426,14К 54 Количество загрузок:

А в шаблоне HTML после:

<link href="{ASSETS_STYLES_PATH}main.css?design=snow" rel="stylesheet" />

вставьте:

<link rel="stylesheet" type="text/css" href="/design/font-awesome.css">

Наверх

Обратно в Изменение общей стилистики

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

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

Панель Сайта, Лого И Меню

#1 mariteks

#2 Danil

#3 mariteks

#4 Vaccina

#5 mariteks

#6 Vaccina

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

Войти

Google поиск