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

[Danil]

Stas_Y (18 Сентябрь 2015 - 07:27) писал:

Рядом с иконкой "поиск", написать слово поиск

Пришлите скриншот, с обозначением необходимых изменений.

[Stas_Y]

Danil (18 Сентябрь 2015 - 15:02) писал:

Пришлите скриншот, с обозначением необходимых изменений.

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

• 

[Stas_Y]

Актуально !!!+
Подтянуть слайдер к хедеру

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

• 

[Danil]

Stas_Y (19 Сентябрь 2015 - 18:31) писал:

Нужно немного отредактировать изображение ico-search.png, т.е. добавить рядом с "лупой" текст "поиск"(изображение находится в разделе Сайт - Редактор шаблонов - "Изображения").
После в main.css найдите код

.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 52px;height: 42px;cursor:pointer;}

изменяйте width(ширина блока с "лупой"), чтобы вместилась надпись "поиск".

Stas_Y (22 Сентябрь 2015 - 06:32) писал:

Актуально !!!+
Подтянуть слайдер к хедеру

В конец main.css добавьте

@media only screen and (min-width: 1201px) {
#content {
top: 50px;
}
}

[Stas_Y]

Сейчас слово "поиск" высвечивается снизу, а мне надо справа. + При наведении значок поиска почему то двоится - нужно убрать это.
+ анимацию раскрытия поиска убрать

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

• 

[Vaccina]

Как понимаю положение поиска при наведении должно быть постоянным, изменения ниже сделают постоянное отображение строки для ввода.

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

/* Поиск */
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}

замените на:

/* Поиск */
.header-top .header-top-right #search_mini_form {width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: center center;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form .form-search #search {width: 200px;}
.searchword{display:none;}

[Stas_Y]

Я бы ооочень хотел чтобы при нажатии на значок поиск, он выглядел вот так:
рис в приложении
http://www.pullandbear.com/ru/ru/

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

• 

[Vaccina]

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

<!-- Поиск -->
			  <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
				<div class="form-search">
				  <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				  <button type="submit" title="Искать" class="button search-submit"></button>
				</div>
			  </form>

замените на:

<!-- Поиск -->
			  <div class="search_head">
	 <div class="hide_search"></div>
	 <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
				<div class="form-search">
				  <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				  <button type="submit" title="Искать" class="button search-submit"></button>
				</div>
			  </form>
	 </div>

далее в шаблоне main.css найдите:

/* Поиск */
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}

замените на:

/* Поиск */
.hide_search{float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form2{display:none;}
.header-top .header-top-right #search_mini_form2.active{display:block;}
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}

В конец main.js пропишите:

$(function(){
$('.hide_search').click(function(){
  $(this).children('.search_mini_form2').toggleClass('active');
});
});

на вид должно получиться нечто ужасное, но пока это накиданная структура и функция скрытия\отображения при клике, необходимо пронаблюдать результат =)

[Stas_Y]

Нуу)))) не все ужасно, просто на клик не откликается)

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

• 

[Vaccina]

Простите, не тот блок изменила.
В шаблоне HTML найдите:

<div class="search_head">
		 <div class="hide_search"></div>
		 <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
								<div class="form-search">
								  <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
								  <button type="submit" title="Искать" class="button search-submit"></button>
								</div>
						  </form>
		 </div>

замените на:

<!-- Поиск -->
						  <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
								<div class="form-search">
								  <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
								  <button type="submit" title="Искать" class="button search-submit"></button>
								</div>
						  </form>

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

<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				  <div class="form-search">
					<input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
					<div class="searchword">Поиск</div>
				  </div>
				 
				</form>

замените на:

<div class="search_head">
<div class="hide_search"></div>
<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				  <div class="form-search">
					<input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>
		 </div>

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

/* Поиск */
.hide_search{float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form2{display:none;}
.header-top .header-top-right #search_mini_form2.active{display:block;}
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}

замените на:

/* Поиск */
.hide_search{float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form{display:none;}
.header-top .header-top-right #search_mini_form.active{display:block;}
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}

В main.js

$(function(){
$('.hide_search').click(function(){
  $(this).children('.search_mini_form2').toggleClass('active');
});
});

замените на:

$(function(){
$('.hide_search').click(function(){
  $(this).children('.search_mini_form').toggleClass('active');
});
});

[Stas_Y]

Все встало на место, но не работает((

[Vaccina]

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

$(function(){
$('.hide_search').click(function(){
  $(this).children('.search_mini_form').toggleClass('active');
});
});

замените на:

$(function(){
$('.search_head .hide_search').click(function(){
  $('.search_head #search_mini_form').toggleClass('active');
});
});

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

/* Поиск */
.hide_search{float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form{display:none;}
.header-top .header-top-right #search_mini_form.active{display:block;}
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 42px;position: relative;background-color: #34495E;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 60px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}

замените на:

/* Поиск */
.search_head{float: right;}
.hide_search{background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 42px;height: 42px;cursor:pointer;}
.header-top .header-top-right #search_mini_form{display:none;}
.header-top .header-top-right #search_mini_form.active{display:block;}
.header-top .header-top-right #search_mini_form {width: 100%;height: 42px;position: absolute;background-color: #fff;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: center center;width: 20%;height: 42px;cursor:pointer;border-radius:0;border-left:10x solid #fff;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 80%;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}

[Stas_Y]

Доброго времени суток)) вот так получилось.
А нужно по стилистике как в 27 посту)

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

• 

[Vaccina]

Только не забывайте, поиск у нас не динамический, при введении слова\фразы молниеносной выдачи не будет.
В main.css найдите:

.header-top .header-top-right {
	padding: 0px;
	float: right;
}

замените на:

.header-top .header-top-right {
	padding: 0px;
	float: right;
	position: inherit;
}

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

.header-top .header-top-right #search_mini_form {
	width: 100%;
	height: 42px;
	position: absolute;
	background-color: #FFF;
}

замените на:

.header-top .header-top-right #search_mini_form {
	width: 100%;
	height: 42px;
	position: absolute;
	background-color: #FFF;
	left: 0;
	top: 42px;
}

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

.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: center center;width: 20%;height: 42px;cursor:pointer;border-radius:0;border-left:10x solid #fff;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 80%;font-size: 100%;}

замените на:

.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: center center;width: 10%;height: 42px;cursor:pointer;border-radius:0;border-left:10x solid #fff;}
.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 90%;font-size: 100%;}

[Stas_Y]

Да это ничего)) обнаружил печальку в виде того что: поиск работает только на главной, на других нет

[Vaccina]

В main.js у вас код:

$(function(){
$('.search_head .hide_search').click(function(){
  $('.search_head #search_mini_form').toggleClass('active');
});
});

стоит не в самом низу, перенесите его, поставив после 2085 строки

[Stas_Y]

О)) работает! А где можно взять анимированные иконки поиск, личный кабинет и корзина вы не знаете?))

Вот что нужно
1) продлить белое поле по примеру с выпадающим меню
2)Поменять оранжевый цвет на белый
3) Написать "Искать", ниже как искать
4) Сделать крестик чтоб закрыть можно было)

Должно получиться как на рисунке)))

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

• 

[Vaccina]

Если вы имеете ввиду смену иконки при наведении, то достаточно иметь на каждую кнопку 2 статичных иконки, первую вставить как статичный фон, вторую иконку назначить фоном при наведении.

Как например, кнопка поиска у вас имеет следующий фон с иконкой в блоке стилей:

.hide_search{background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 42px;height: 42px;cursor:pointer;}

достаточно добавить после него блок стилей при наведении на данный элемент с другой иконкой, пример:

.hide_search{background-image: url('{ASSETS_IMAGES_PATH}ico-search2.png?design=orange') no-repeat center center;}

В добавленном коде ico-search2.png выступает в роли иконки появляющийся взамен старой при наведении, саму иконку необходимо загрузить в раздел Редактор шаблонов.

[Stas_Y]

Спасибо)) и вопросик выше))

[Vaccina]

Stas_Y (25 Сентябрь 2015 - 05:20) писал:

1) продлить белое поле по примеру с выпадающим меню
2)Поменять оранжевый цвет на белый
3) Написать "Искать", ниже как искать
4) Сделать крестик чтоб закрыть можно было)

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

.header-top .header-top-right #search_mini_form .form-search #search {
	float: left;
	height: 42px;
	border: 7px solid #F79242;
	width: 80%;
	font-size: 100%;
}

замените на:

.header-top .header-top-right #search_mini_form .form-search #search {
	float: left;
	height: 42px;
	border: 7px solid #fff;
	width: 90%;
	font-size: 100%;
}

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

<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
								  <div class="form-search">
										<input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
										<button type="submit" title="Искать" class="button search-submit"></button>
								  </div>
								</form>

замените на:

<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
								  <div class="form-search">
										<input id="search" type="text" name="q" value="" class="search-string" placeholder="Искать...">
										<button type="submit" title="Искать" class="button search-submit"></button>
										<div class="clearfix"></div>
								  </div>
		  <p>Чтобы начать поиск, введите описание или артикул</p><div class="close">x</div>
								</form>

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

.header-top .header-top-right #search_mini_form{display:none;}
.header-top .header-top-right #search_mini_form.active{display:block;}
.header-top .header-top-right #search_mini_form {width: 100%;height: 42px;position: absolute;background-color: #fff;left: 0;
		top: 42px;}

замените на:

.header-top .header-top-right #search_mini_form {width: 100%;height: 82px;position: absolute;background-color: #fff;left: 0;		top: 42px;display:none;}
.header-top .header-top-right #search_mini_form.active{display:block;}
.header-top .header-top-right #search_mini_form p {
	clear: both;
	margin: 10px !important;
	display: block;
	width: 50%;
}
.header-top .header-top-right #search_mini_form .close {
	float: right;
	width: 10%;
	text-align: center;
	text-transform: uppercase;
	margin-top: -20px;
	font-size: 20px;
	cursor:pointer;
}

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

$(function(){
$('.search_head .hide_search').click(function(){
  $('.search_head #search_mini_form').toggleClass('active');
});
});

замените на:

$(function(){
$('.search_head .hide_search, .search_head .close').click(function(){
  $('.search_head #search_mini_form').toggleClass('active');
});
});