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


Строка Поиска Во Всю Ширину


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

#1 Антон 5554

Антон 5554

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

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

Отправлено 02 Декабрь 2017 - 13:08

Здравствуйте. Помогите сделать строку поиска вовсю ширину шапки от иконки распродажа(%) до логотипа. Спасибо.

#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 02 Декабрь 2017 - 13:55

Просмотр сообщенияАнтон 5554 (02 Декабрь 2017 - 13:08) писал:

Здравствуйте. Помогите сделать строку поиска вовсю ширину шапки от иконки распродажа(%) до логотипа. Спасибо.

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

			<!-- Logo -->
			<div id="logo" class="col-sm-4 col-xs-12">
			  <a title="{SETTINGS_STORE_NAME}" href="{INDEX_PAGE_URL}">
				<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
			  </a>
			
			</div>
				  
			<!-- END: Logo -->
<!--  телефон около лого
 -->
			
			
			
			<div class="header-right col-sm-8 col-xs-12">	 
				 <div class="header-right-inner">

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


			<!-- Logo -->
			<div id="logo" class="col-sm-3 col-xs-12">
			  <a title="{SETTINGS_STORE_NAME}" href="{INDEX_PAGE_URL}">
				<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
			  </a>
			
			</div>
				  
			<!-- END: Logo -->
			
			<div class="header-right col-sm-9 col-xs-12">	 
				 <div class="header-right-inner">


Далее в шаблоне main.css найдите, пожалуйста, следующий код:

#header .header-right .header-right-inner {
	float: right;
	padding-top: 14px;
}

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

#header .header-right .header-right-inner {
	float: left;
	padding-top: 14px;
}


Далее там же найдите, пожалуйста, следующий код:

#header .header-right .header-right-inner .connect-us {
	list-style: none;
	float: left;
	margin: 0 0 10px 25px;
	padding: 0;
}

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

#header .header-right .header-right-inner .connect-us {
	list-style: none;
	float: right;
	margin: 0 0 10px 25px;
	padding: 0;
}


После чего находим данный код:

#header .header-right .header-right-inner {
	float: left;
	padding-top: 14px;
}

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

#header .header-right .header-right-inner {
	float: left;
	padding-top: 14px;
	width: 100%;
}


Теперь в том же шаблоне находим данный код:

#header .header-right .header-right-inner #search_mini_form, #menu .nav-right .block-search #search_mini_form2 {
	margin: 0 0 0 20px;
	float: left;
	line-height: normal;
	position: relative;
}

И заменяем его этим вот кодом:

#header .header-right .header-right-inner #search_mini_form, #menu .nav-right .block-search #search_mini_form2 {
	margin: 0 0 0 20px;
	float: left;
	line-height: normal;
	position: relative;
	width: 650px;
}


После этого найдите, пожалуйста, следующий код:

input.inputText {
	padding: 0px 10px;
	color: #c8c8c8;
	background-color: #fff;
	border: 1px solid #ccc;
	display: inline-block;
	vertical-align: middle;
	height: 30px;
	line-height: 20px;
	width: 240px;
	max-width: 300px;
}

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

input.inputText {
	padding: 0px 10px;
	color: #c8c8c8;
	background-color: #fff;
	border: 1px solid #ccc;
	display: inline-block;
	vertical-align: middle;
	height: 30px;
	line-height: 20px;
	width: 240px;
	max-width: 650px;
}


Далее там же найдите, пожалуйста, данный код:

#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: 16px;
	height: auto;
	line-height: 20px;
	width: 350px;
	padding: 10px 20px;
	border: 1px solid #d8d8d8;
}

И замените этим вот кодом:

#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: 16px;
	height: auto;
	line-height: 20px;
	width: 650px;
	padding: 10px 20px;
	border: 1px solid #d8d8d8;
}


#3 Антон 5554

Антон 5554

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

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

Отправлено 02 Декабрь 2017 - 14:54

Просмотр сообщенияRayLi (02 Декабрь 2017 - 13:55) писал:

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

<!-- Logo -->
<div id="logo" class="col-sm-4 col-xs-12">
<a title="{SETTINGS_STORE_NAME}" href="{INDEX_PAGE_URL}">
<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
</a>

</div>

<!-- END: Logo -->
<!-- телефон около лого
-->

}

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

#4 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 02 Декабрь 2017 - 16:20

Просмотр сообщенияАнтон 5554 (02 Декабрь 2017 - 14:54) писал:

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

Чтобы исправить данный пункт, Вам необходимо в шаблоне main.css найти следующий код:

#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:focus {
	width: 650px;
	outline: none;
}


#5 Антон 5554

Антон 5554

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

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

Отправлено 02 Декабрь 2017 - 16:27

Просмотр сообщенияRayLi (02 Декабрь 2017 - 16:20) писал:

Чтобы исправить данный пункт, Вам необходимо в шаблоне main.css найти следующий код:

#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:focus {
width: 650px;
outline: none;
}


спасибо




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

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