Отключен JavaScript

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

0

Заменить Поиск

Автор Сергей Иванов, 18 нояб. 2015 19:26

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

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

#1 Сергей Иванов

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

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

Отправлено 18 Ноябрь 2015 - 19:26

Подскажите как поменять станд поиск на такой: http://ruseller.com/...p?id=1503&rub=2

Наверх

#2 Vaccina

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

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

Отправлено 19 Ноябрь 2015 - 05:20

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

.form-search {
	float: right;
	position: relative;
	padding: 0px 7px;
	line-height: 47px;
}

замените на:

.form-search {
	float: right;
	position: relative;
	padding: 0px 7px;
	line-height: 47px;
	background: rgba(0,0,0, 0.6);
	border-radius: 10px;
}

далее найдите:

.form-search input.search-string {
	height: 26px;
	line-height: 26px;
	font-size: 12px;
	border: 1px solid #DDD;
	background: #FFF;
	min-width: 200px;
	color: #6F6F6F;
	padding: 0px 10px;
	border-radius: 20px;
	margin-bottom: 5px;
	vertical-align: middle;
}

замените на:

.form-search input.search-string {
	height: 26px;
	line-height: 26px;
	font-size: 12px;
	background: #FFF;
	min-width: 200px;
	color: #000;
	padding: 0px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
	vertical-align: middle;
}

далее найдите:

.form-search button.search-submit {
	position: absolute;
	right: 12px;
	top: -1px;
	background:none;
	border: medium none;
	font-size: 12px;
	line-height: inherit;
	padding: 1px 6px;
}

замените на:

.form-search button.search-submit {
	position: absolute;
	right: 6px;
	top: 10px;
	background: #F06257;
	border: medium none;
	font-size: 12px;
	line-height: 10px;
	padding: 1px 6px;
	border-radius: 0 5px 5px 0;
	height: 26px;
	color: #fff;
}

Наверх

#3 Сергей Иванов

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

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

Отправлено 19 Ноябрь 2015 - 05:25

Поменялось только цветное оформление) а я то думал там будет слово "искать" с красным блоком и поле

Наверх

#4 Vaccina

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

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

Отправлено 19 Ноябрь 2015 - 05:40

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

<button type="submit" title="Искать" class="button search-submit"><i class="fa fa-search"></i></button>

замените на:

<button type="submit" title="Искать" class="button search-submit">Искать</button>

Наверх

#5 Сергей Иванов

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

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

Отправлено 19 Ноябрь 2015 - 05:46

А можно сделать вот просто так как нарисунке без черного фона вокруг

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

Наверх

#6 Vaccina

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

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

Отправлено 19 Ноябрь 2015 - 07:03

.form-search {
		float: right;
		position: relative;
		padding: 0px 7px;
		line-height: 47px;
		background: rgba(0,0,0, 0.6);
		border-radius: 10px;
}

замените на:

.form-search {
		float: right;
		position: relative;
		padding: 0px 7px;
		line-height: 47px;
		background: none;
}

Наверх

#7 Сергей Иванов

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

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

Отправлено 20 Ноябрь 2015 - 12:17

Требуется поиск убрать в центр

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

Наверх

#8 Юля123

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

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

Отправлено 20 Ноябрь 2015 - 13:22

Сергей Иванов (20 Ноябрь 2015 - 12:17) писал:

Требуется поиск убрать в центр

Здравствуйте, в шаблоне HTML найдите код:

<!-- Поиск -->
						  <div class="form-search">
								<div class="search-title rhombus">
								  <i class="fa fa-search" title="Поиск по магазину">&nbsp;</i>
								</div>
								<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
								  <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="button search-submit"><i class="fa fa-search"></i></button>
								</form>
						  </div>

и перенесите его после кода:

<!-- Меню пользователя -->
			  <div class="block-account">
				<div class="user-title rhombus">
				  <a href="{USER_LOGIN_URL}" title="Вход в личный кабинет"><i class="fa fa-user" title="Меню пользователя">&nbsp;</i></a>
				</div>
				<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>
				  {% 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>

в main.css найдите код:

.form-search {float: right;position: relative;padding: 0 7px;line-height: 47px;}

и замените на код:

.form-search {display: block;  margin-left: auto;margin-right: auto;max-width: 245px;padding: 0 7px;line-height: 47px;}

найдите и удалите код:

.header_nav ~ div {
margin: 5px 0;
}

найдите код:

.rhombus {
		position: relative;
		width: 30px;
		height: 30px;
		background-color: #ffffff;
		text-align: center;
		margin: 7.55px 0;
		line-height: 22px;
		z-index: 0;
		border: solid 1px #dbdbdb;
		border-radius: 50%;
		padding-top: 4px;
}

и замените на код:

.rhombus {
		position: relative;
		width: 30px;
		height: 30px;
		background-color: #ffffff;
		text-align: center;
		margin: 15.55px 0;
		line-height: 22px;
		z-index: 0;
		border: solid 1px #dbdbdb;
		border-radius: 50%;
		padding-top: 4px;
}

найдите код:

.form-search button.search-submit {position: absolute;right: 12px;top: -1px;background: none;border: none;font-size: 12px;line-height: inherit;padding: 1px 6px;}

и замените на код:

.form-search button.search-submit {	background: none;border: none;font-size: 12px;line-height: inherit;padding: 1px 6px; transform: translate(-37px)}

Наверх

#9 Сергей Иванов

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

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

Отправлено 20 Ноябрь 2015 - 13:52

Помогите сделать меню с каталогом в одну строку

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

Наверх

#10 Юля123

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

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

Отправлено 20 Ноябрь 2015 - 13:59

Сергей Иванов (20 Ноябрь 2015 - 13:52) писал:

Помогите сделать меню с каталогом в одну строку

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

#custommenu {z-index:1;position: static;width: 69%;float: left;}

и замените его на код:

#custommenu {z-index:1;position: static;width: 90%;float: left;}

Наверх

#11 Сергей Иванов

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

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

Отправлено 20 Ноябрь 2015 - 14:02

А их можно рассредоточить по всей области равномерно?

Наверх

#12 Сергей Иванов

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

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

Отправлено 20 Ноябрь 2015 - 14:11

2) увеличить поле поиска в длину и сделать более квадратным

Наверх

#13 Юля123

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

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

Отправлено 20 Ноябрь 2015 - 15:53

Сергей Иванов (20 Ноябрь 2015 - 14:02) писал:

А их можно рассредоточить по всей области равномерно?

в main.css найдите код:

#custommenu {z-index:1;position: static;width: 90%;float: left;}

замените на код:

#custommenu {z-index:1;position: static;width: 100%;float: left;}

затем найдите код:

#custommenu ul.mainnav li.level0 {
		display: inline-block;
		float: left;
		border: medium none;
		height: 38px;
}

и замените на код:

#custommenu ul.mainnav li.level0 {
		display: inline-block;
		float: left;
		border: medium none;
		height: 38px;
		mirgin-right: 3%
}

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

#custommenu ul.mainnav li.level0:last-child {margin-right: 0 !important}

Сергей Иванов (20 Ноябрь 2015 - 14:11) писал:

2) увеличить поле поиска в длину и сделать более квадратным

Найдите в main.css код:

.form-search input.search-string {height: 26px;line-height: 26px;font-size: 12px;border: 1px solid #dddddd;background: #fff;min-width: 200px;color: #6f6f6f;padding: 0 10px;border-radius: 20px;margin-bottom: 5px;vertical-align: middle;}

в этом коде свойство border-radius: 20px; - закругление, уменьшайте до нужного вам значения.

Наверх

#14 Сергей Иванов

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

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

Отправлено 20 Ноябрь 2015 - 18:46

Все ок, только меню каталога в шапке все равно не распределяется по всей длине равномерно(((

Наверх

#15 Vaccina

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

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

Отправлено 21 Ноябрь 2015 - 01:13

Попробуйте следующее, в main.css найдите:

.catalog_head {
background-color: #FFF;
margin: 0px 6.4%;
width: 87%;
border-radius: 10px;
}

замените на:

.catalog_head {
border-radius: 10px;
margin: 40px auto 0;
float: none !important;
clear: both;
background: #1f0f04;
}

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

<div class="catalog_head col-right col-sm-10 col-xs-3" style="background: #1f0f04;">
												 <!-- BEGIN: Main Navigation -->
												 <div id="custommenu">

замените на:

<div class="catalog_head col-right col-sm-10 col-xs-3 container">
												 <!-- BEGIN: Main Navigation -->
												 <div id="custommenu">

результат должен быть следующим:

Наверх

#16 RgShop

Пользователь

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

ГородСамара

Отправлено 03 Декабрь 2015 - 19:55

я тоже присоединись с проблемой поиска,
подскажите на моем примере SL-16016

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

Наверх

#17 Vaccina

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

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

Отправлено 04 Декабрь 2015 - 04:37

В шаблоне HTML перед:

<!-- Каталог -->
			{% IFNOT catalog_full_empty %}
			<div class="block menu">
			  <div class="block-title">
				<a href="{CATALOG_URL}"><h5><span>Каталог</span></h5></a></div>
				<div class="block-menu-content">
				  <ul>
					{% FOR catalog_full %}
					  {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %}
						<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% 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}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% 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 %}
				  </ul>
				</div>

вставьте:

<!-- Поиск -->
		<div class="search_in_cat">
			<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск среди 7000 позицийу" 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>

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

/* Поиск */
#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: #09afe7;cursor: pointer;}

замените на:

/* Поиск */
#header-right .header-search {display:none;}
.search_in_cat .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 100%;margin-bottom: 10px;}
.search_in_cat .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 100%;height: 43px;line-height: 43px;padding-right: 60px;}
.search_in_cat .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
.search_in_cat .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;}
.search_in_cat .form-search .fa-search:hover {color: #fff;background: #09afe7;cursor: pointer;}

Наверх

#18 kirussian

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

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

Отправлено 13 Апрель 2017 - 16:32

Vaccina (04 Декабрь 2015 - 04:37) писал:

В шаблоне HTML перед:

<!-- Каталог -->
		 {% IFNOT catalog_full_empty %}
		 <div class="block menu">
			 <div class="block-title">
			 <a href="{CATALOG_URL}"><h5><span>Каталог</span></h5></a></div>
			 <div class="block-menu-content">
				 <ul>
				 {% FOR catalog_full %}
					 {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %}
					 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% 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}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% 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 %}
				 </ul>
			 </div>

вставьте:

<!-- Поиск -->
	 <div class="search_in_cat">
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск среди 7000 позицийу" 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>

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

/* Поиск */
#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: #09afe7;cursor: pointer;}

замените на:

/* Поиск */
#header-right .header-search {display:none;}
.search_in_cat .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 100%;margin-bottom: 10px;}
.search_in_cat .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 100%;height: 43px;line-height: 43px;padding-right: 60px;}
.search_in_cat .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
.search_in_cat .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;}
.search_in_cat .form-search .fa-search:hover {color: #fff;background: #09afe7;cursor: pointer;}

Он не сказал, а я скажу - спасибо, все работает)