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

[Ольга Шнура]

Уважаемая служба поддержки, помогите, пожалуйста. Необходимо в шаблоне Мокко вставить форму поиска по сайту в верхней части вертикального меню. На уровень строки "Вы здесь, каталог товаров" (скриншот под скрепочкой). Как это сделать?

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

• 

[Ирина345]

Ольга Шнура (30 Июнь 2015 - 01:31) писал:

Уважаемая служба поддержки, помогите, пожалуйста. Необходимо в шаблоне Мокко вставить форму поиска по сайту в верхней части вертикального меню. На уровень строки "Вы здесь, каталог товаров" (скриншот под скрепочкой). Как это сделать?

Здравствуйте, найдите в шаблоне HTML

 <div id="leftMenuBlock"> 
	   <!-- Каталог -->
					 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>

и перед данным кодом вставьте

  <!-- Поиск -->
<div id="searchPanel">
<form action="http://{NET_DOMAIN}/search" method="get">
   <p>
   
   <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" />
   <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif?design=mokko" id="submit" name="submit" />
	 </p>
</form>
</div>
<!-- end Поиск -->

далее найдите в файле main.css

#searchPanel {
  position: absolute;
  top: 15px;
  right: 10px;
}

#searchPanel form {
  float: right;
}

замените на

#searchPanel {
/*  position: absolute;*/
/*  top: 15px;*/
/*  right: 10px;*/
}

#searchPanel form {
/*  float: right;*/
}

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

input#keywords {
  margin: 0;
  font-size: 1em;
  padding: 0.25em;
  width: 200px;
  border: 1px solid #CCC;
  color: #333;
}

замените на

input#keywords {
  margin: 0;
  font-size: 1em;
  padding: 0.25em;
  width: 135px;
  border: 1px solid #CCC;
  color: #333;
}

[Ольга Шнура]

Ирина, огромное спасибо за то, что помогли разобраться. Все получилось!

[Egik]

Добрый день.
Помогите внести поправки, пытался сделать по выше указанному примеру, не получилось. Нужно поиск перенести с левого блока вверх.

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

• 

[RedHead]

Egik (11 Февраль 2016 - 12:02) писал:

Добрый день.
Помогите внести поправки, пытался сделать по выше указанному примеру, не получилось. Нужно поиск перенести с левого блока вверх.

Здравствуйте. В шаблоне html найдите и удалите блок кода:

<!-- Поиск -->
	  <h4 class="search">Поиск по сайту</h4>
   <div id="searchPanel">
	<form action="http://{NET_DOMAIN}/search" method="get">
	  <p>
	  
	   <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" />
	   <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
	   </p>
	</form>
   </div>
   <!-- end Поиск -->

Затем, после строки:

<td id="primaryContent">

вставьте:

<!-- Поиск -->
   <div id="searchPanel">
	<form action="http://{NET_DOMAIN}/search" method="get">
	  <p>
	   <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" placeholder="Поиск по магазину..." />
	   <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
	   </p>
	</form>
   </div>
   <!-- end Поиск -->

Далее в шаблоне main.css замените строки:

#searchPanel {
margin-left: 10px;
}

на:

#searchPanel {
float: right;
padding-top: 20px;
}

и строки:

input#keywords {
  margin: 0;
  font-size: 1em;
  padding: 0.25em;
  width: 125px;
  border: 1px solid #5c7fa7;
  color: #333;
}

на:

input#keywords {
  margin: 0;
  font-size: 1em;
  padding: 0.25em;
  width: 205px;
  border: 1px solid #5c7fa7;
  color: #333;
}

[Egik]

Спасибо! возможно сделать так как на скрине?

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

• 

[RedHead]

Egik (11 Февраль 2016 - 14:58) писал:

Спасибо! возможно сделать так как на скрине?

В шаблоне html найдите блок кода

<!-- Поиск -->
   <div id="searchPanel">
		<form action="http://{NET_DOMAIN}/search" method="get">
		  <p>
		   <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" placeholder="Поиск по магазину..." />
		   <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
		   </p>
		</form>
   </div>
   <!-- end Поиск -->

переместите его, вставив перед строкой:

<table id="contentMainTb">

Затем в  main.css замените:

#searchPanel {
float: right;
padding-top: 20px;
}

на:

#searchPanel {
float: right;
padding-top: 10px;
margin-right: 110px;
}

строки:

#breadcrumb {
  margin: 0px;
  padding-top: 20px;
  font-size: 0.9166em;
  line-height: 1.8181em;
  color: #000;
}

на:

#breadcrumb {
  margin: 0px;
  padding-top: 10px;
  font-size: 0.9166em;
  line-height: 1.8181em;
  color: #000;
}

И строки:

input#keywords {
  margin: 0;
  font-size: 1em;
  padding: 0.25em;
  width: 205px;
  border: 1px solid #5c7fa7;
  color: #333;
}

на:

input#keywords {
  margin: 0;
  font-size: 1em;
  padding: 0.25em;
  width: 300px;
  border: 1px solid #5c7fa7;
  color: #333;
}

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

[Egik]

RedHead (11 Февраль 2016 - 15:20) писал:

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

Спасибо! только заметил что левый блок где каталог спустился немного от шапки.

[Firefly]

Egik (11 Февраль 2016 - 16:04) писал:

Спасибо! только заметил что левый блок где каталог спустился немного от шапки.

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

#leftMenuBlockWrap {
  width: 170px;
  padding:1em 0 40px 0;
  vertical-align:top;
}

Замените на:

#leftMenuBlockWrap {
width: 170px;
padding: 0px 0 40px 0;
vertical-align:top;
}