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

[a.korkishko]

Так как в основном все мои клиенты пользуются "Поиском" надо сделать его немного заметнее.
1 Поменять местами поиск и иконки
2 сделать поиск длинее, от логотипа до иконок,

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

• 

[Firefly]

a.korkishko (12 Ноябрь 2015 - 13:15) писал:

Так как в основном все мои клиенты пользуются "Поиском" надо сделать его немного заметнее.
1 Поменять местами поиск и иконки
2 сделать поиск длинее, от логотипа до иконок,

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:

				<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="https://twitter.com/_NaNout_" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="https://vk.com/nanout23" class="fa fa-vk"></a></li>
				</ul>
				<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="inputText search-string" placeholder="Введите коротко модель : 5520">
					<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="inputText search-string" placeholder="Введите коротко модель : 5520">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>
				<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="https://twitter.com/_NaNout_" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="https://vk.com/nanout23" class="fa fa-vk"></a></li>
				</ul>

Максимальный размер поиска по ширине без затрагивания адаптивности составляет 375px, поэтому не рекомендуется увеличивать строку до логотипа.

Чтобы растянуть строку до данных размеров зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText {font-size: 12px;height:auto;line-height:20px;width: 235px;padding: 10px 20px;border: 1px solid #d8d8d8;border-radius: 22px;-webkit-border-radius: 22px;-moz-border-radius: 22px;}
#header .header-right .header-right-inner #search_mini_form .form-search input.inputText:focus {width: 250px;outline:none;}

Замените на:

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText {font-size: 12px;height:auto;line-height:20px;width: 370px;padding: 10px 20px;border: 1px solid #d8d8d8;border-radius: 22px;-webkit-border-radius: 22px;-moz-border-radius: 22px;}
#header .header-right .header-right-inner #search_mini_form .form-search input.inputText:focus {width: 375px;outline:none;}

[a.korkishko]

Спасибо! а как немного выделить форму поиска в цвет шаблона?

[RedHead]

a.korkishko (12 Ноябрь 2015 - 14:41) писал:

Спасибо! а как немного выделить форму поиска в цвет шаблона?

Здравствуйте! В шаблоне main.css найдите строку

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText {font-size: 12px;height:auto;line-height:20px;width: 370px;padding: 10px 20px;border: 1px solid #d8d8d8;border-radius: 22px;-webkit-border-radius: 22px;-moz-border-radius: 22px;}

и перед скобкой "}" добавьте еще одно свойство

 background-color: #e82a2a;

, цвет выбираете на свое усмотрение.