Здравствуйте. Помогите сделать строку поиска вовсю ширину шапки от иконки распродажа(%) до логотипа. Спасибо.
1
Строка Поиска Во Всю Ширину
Автор Антон 5554, 02 дек. 2017 13:08
Сообщений в теме: 4
#1
Отправлено 02 Декабрь 2017 - 13:08
#2
Отправлено 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
Отправлено 02 Декабрь 2017 - 14:54
RayLi (02 Декабрь 2017 - 13:55) писал:
Здравствуйте.
В данном случае Вам необходимо на Вашем сайте произвести следующие изменения:
В шаблоне html найдите, пожалуйста, данный код:
В данном случае Вам необходимо на Вашем сайте произвести следующие изменения:
В шаблоне 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
Отправлено 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
Отправлено 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 анонимных