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

[Kapal]

Здравствуйте!

Помогите, пожалуйста сделать как на скрине (шаблон лазурь):

переместить строку поиска, сделать ее длиннее и уже;
переместить картинку лупы влево;
изменить надпись "поиск по магазину".

Если сложно, то хотя бы поэтапно, буду каждый вопрос дублировать.

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

• 

[metry]

Добрый день. Для внесения изменений зайдите Редактор шаблона-->main.css

и найдите строку:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle;}

замените на:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle; 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 .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 #008080;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 .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0;width: 24px;height: 24px;border: none;position: absolute;top: 9px;right: 11px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;}

замените на:

#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: 100%;}
#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;line-height:20px;width: 100%;padding: 10px 50px;border: 1px solid #008080;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: 100%;outline:none;}
#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 5px;background: url('http://a223928.storeland.net/ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}

найдите строку:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle; width:100%;}

замените на:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle;width:100%;margin-bottom: 10px;}

найдите строку:

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: 350px;}

замените на:

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;}

для измениения текста зайдите в HTML и найдите:

<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину...">

замените на:

<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск">

[Kapal]

metry (02 Апрель 2017 - 15:51) писал:

Добрый день. Для внесения изменений зайдите Редактор шаблона-->main.css

и найдите строку:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle;}

замените на:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle; 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 .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 #008080;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 .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0;width: 24px;height: 24px;border: none;position: absolute;top: 9px;right: 11px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;}

замените на:

#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: 100%;}
#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;line-height:20px;width: 100%;padding: 10px 50px;border: 1px solid #008080;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: 100%;outline:none;}
#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 5px;background: url('http://a223928.storeland.net/ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}

найдите строку:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle; width:100%;}

замените на:

#header .header-right .header-right-inner, #header .header-right .header-left-inner {display: inline-block;vertical-align: middle;width:100%;margin-bottom: 10px;}

найдите строку:

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: 350px;}

замените на:

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;}

для измениения текста зайдите в HTML и найдите:

<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину...">

замените на:

<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск">

Спасибо!

Только осталось доделать:

- Строку поиска сдвинуть левее и ниже. Меняю значение рх, при этом строка поиска опускается ниже, но и ширина шапки увеличивается. Ширину шапки менять не нужно.

- Картинка лупы пропала. Установить ее слева.

- Некоторые буквы надписи в строке поиска не входят по высоте(срезаны) и сделать их по ярче.

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

• 

[Mr.Nito]

Kapal (03 Апрель 2017 - 08:56) писал:

Спасибо!

Только осталось доделать:

- Строку поиска сдвинуть левее и ниже. Меняю значение рх, при этом строка поиска опускается ниже, но и ширина шапки увеличивается. Ширину шапки менять не нужно.

- Картинка лупы пропала. Установить ее слева.

- Некоторые буквы надписи в строке поиска не входят по высоте(срезаны) и сделать их по ярче.

Здравствуйте.
Изменения произвёл.
- добавил в main.css

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000;	font-size: 16px;}/*Цвет текста в поиске*/
#header .header-right-inner {margin-top: 20px;}/*Отступ сверху*/
#header .header-right .header-right-inner #search_mini_form {margin-left:0;}
/* Меню в шапке */

-Картинку лупы добавил
-Цвет изменил, также можно настроить размер шрифта
в строке

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000;	font-size: 16px;}/*Цвет текста в поиске*/

[Kapal]

Mr.Nito (03 Апрель 2017 - 11:13) писал:

Здравствуйте.
Изменения произвёл.
- добавил в main.css

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 16px;}/*Цвет текста в поиске*/
#header .header-right-inner {margin-top: 20px;}/*Отступ сверху*/
#header .header-right .header-right-inner #search_mini_form {margin-left:0;}
/* Меню в шапке */

-Картинку лупы добавил
-Цвет изменил, также можно настроить размер шрифта
в строке

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 16px;}/*Цвет текста в поиске*/

Спасибо!

Шрифт надписи уменьшил, все равно не входит по высоте в поле поиска. Дальше уменьшать нет смысла, мелко будет.

Как уменьшить границу отступа снизу и сверху для надписи в поле поиска? Увеличивать ширину  самой строки поиска не хотелось бы.

[Mr.Nito]

Kapal (03 Апрель 2017 - 13:53) писал:

Спасибо!

Шрифт надписи уменьшил, все равно не входит по высоте в поле поиска. Дальше уменьшать нет смысла, мелко будет.

Как уменьшить границу отступа снизу и сверху для надписи в поле поиска? Увеличивать ширину  самой строки поиска не хотелось бы.

-Высота поля

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px;}/*Цвет текста в поиске*/

замените на

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px; height:25px}

-Поправить иконку поиска

#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 2px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}

на

#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 0px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}

[Kapal]

Спасибо!

Странно, никаких изменений не производил, а надпись сейчас выводится корректно.

[Kapal]

Ну и последняя доработка здесь! Вообщем то для этого и производили изменения с поисковой строкой.

- Как внести изменения надписей над поисковой строкой: "Доставка по России", "Удобные способы оплаты", "Гарантия возврата и обмена", также как на скриншоте. Изображения картинок можно оставить прежние.

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

• 

[Kapal]

Kapal (03 Апрель 2017 - 21:41) писал:

Ну и последняя доработка здесь! Вообщем то для этого и производили изменения с поисковой строкой.

- Как внести изменения надписей над поисковой строкой: "Доставка по России", "Удобные способы оплаты", "Гарантия возврата и обмена", также как на скриншоте. Изображения картинок можно оставить прежние.

Если проблематично, то оставить в одну строчку, как сейчас, только картинки и буквы сделать крупнее. Картинки должны быть крупнее букв.

[metry]

Добрый вечер. Для внесения изменений зайдите Редактор шаблона-->main.css и найдите:

.header-left-inner span {
	 color: #4682B4;
	 font-size: 13px;
	 word-spacing: 1px;
	 margin-left:15px;
}

замените на:

.header-left-inner span {
	 color: #4682B4;
	 font-size: 16px;
	 word-spacing: 1px;
	 margin-left:15px;
}

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

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

замените на:

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size: 20px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

[Kapal]

metry (06 Апрель 2017 - 18:47) писал:

Добрый вечер. Для внесения изменений зайдите Редактор шаблона-->main.css и найдите:

.header-left-inner span {
	 color: #4682B4;
	 font-size: 13px;
	 word-spacing: 1px;
	 margin-left:15px;
}

замените на:

.header-left-inner span {
	 color: #4682B4;
	 font-size: 16px;
	 word-spacing: 1px;
	 margin-left:15px;
}

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

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

замените на:

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size: 20px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

Такого кода нет: .fa{display:inline-block;font:normal normal normal 14px/1FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

Картинки привязаны к надписям.

[Kapal]

Mr.Nito (03 Апрель 2017 - 16:25) писал:

-Высота поля

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px;}/*Цвет текста в поиске*/

замените на

#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px; height:25px}

-Поправить иконку поиска

#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 2px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}

на

#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 0px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}

Надпись не входит(обрезается) в поле поиска только в браузере Мозила, почему то.

При данном решении вопроса строка поиска увеличивается по ширине, не красиво получается.
Что бы оставить ширину поиска как сейчас и сделать, чтобы текст не обрезался в поле поиска, я просил помочь:

В самом поле поиска уменьшить границу от краев, чтобы для текста больше места стало и при этом ширина поля поиска не увеличивалась.

А коротко: Как сделать, так, чтобы ширину поля поиска и шрифт надписи оставить как сейчас, но при этом, чтобы надпись в поле поиска не обрезалась!

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

• 

[metry]

Kapal (06 Апрель 2017 - 20:15) писал:

Такого кода нет: .fa{display:inline-block;font:normal normal normal 14px/1FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

Картинки привязаны к надписям.

Добрый день. Чтобы увеличить размер картинок зайдите в Редактор шаблонов-->HTML и найдите строку:

			  <div class="header-left-inner">
				 <span><i class="fa fa-plane"></i> Доставка по России</span>
				 <span><i class="fa fa-credit-card"></i> Удобные способы оплаты</span>
				 <span><i class="fa fa-exchange"></i> Гарантия возврата и обмена </span>
			  </div>

замените ее на:

			  <div class="header-left-inner">
				 <span><i class="fa fa-plane" style="font-size:20px;"></i> Доставка по России</span>
				 <span><i class="fa fa-credit-card" style="font-size:20px;"></i> Удобные способы оплаты</span>
				 <span><i class="fa fa-exchange" style="font-size:20px;"></i> Гарантия возврата и обмена </span>
			  </div>  

[Kapal]

Спасибо! А надписи выравнять по центру картинок можно?

[Mr.Nito]

Kapal (07 Апрель 2017 - 09:44) писал:

Спасибо! А надписи выравнять по центру картинок можно?

В main.css после

.header-left-inner span:first-child {margin-left:0;}

добавил

#header .header-right i.fa {
	vertical-align: bottom;
}

[Kapal]

Спасибо!

А по раннему вопросу что-то можно сделать или все же придется менять ширину поисковой строки по указанной инструкции?

Дублирую:


-Высота поля


#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px;}/*Цвет текста в поиске*/
замените на


#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px; height:25px}
-Поправить иконку поиска


#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 2px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}
на


#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 0px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}


Надпись не входит(обрезается) в поле поиска только в браузере Мозила, почему то.

При данном решении вопроса строка поиска увеличивается по ширине, не красиво получается.
Что бы оставить ширину поиска как сейчас и сделать, чтобы текст не обрезался в поле поиска, я просил помочь:

В самом поле поиска уменьшить границу от краев, чтобы для текста больше места стало и при этом ширина строки поиска не увеличивалась.

А коротко: Как сделать, так, чтобы ширину строки поиска и шрифт надписи оставить как сейчас, но при этом, чтобы надпись в поле поиска не обрезалась!

[MikDark]

Kapal (07 Апрель 2017 - 14:56) писал:

Спасибо!

А по раннему вопросу что-то можно сделать или все же придется менять ширину поисковой строки по указанной инструкции?

Дублирую:


-Высота поля


#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px;}/*Цвет текста в поиске*/
замените на


#header .header-right .header-right-inner #search_mini_form .form-search input.inputText {color:#000; font-size: 12px; height:25px}
-Поправить иконку поиска


#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 2px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}
на


#header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0 ;width: 24px;height: 24px;border: none;position: absolute;top: 0px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;float: left;left: 10px;}


Надпись не входит(обрезается) в поле поиска только в браузере Мозила, почему то.

При данном решении вопроса строка поиска увеличивается по ширине, не красиво получается.
Что бы оставить ширину поиска как сейчас и сделать, чтобы текст не обрезался в поле поиска, я просил помочь:

В самом поле поиска уменьшить границу от краев, чтобы для текста больше места стало и при этом ширина строки поиска не увеличивалась.

А коротко: Как сделать, так, чтобы ширину строки поиска и шрифт надписи оставить как сейчас, но при этом, чтобы надпись в поле поиска не обрезалась!

Здравствуйте. Вы можете добавить в main.css код:

.form-search input {height:26px;}