Question

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

Answer 1

Для начала находим у себе в шаблоне системную переменную отвечающую за вывод формы поиска и удаляем ее:

Получить код

$SEARCH_FORM$

Вместо нее теперь устанавливаем следующий html код формы поиска:

Получить код

<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >  
  <input class="poick_pole" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>  
  <input class="poick_knopka" type="submit" value="Найти" />  
  <input type="hidden" name="t" value="0" />  
  </form>

Шаг 2 - Установка CSS

Теперь придаем нашей форме поиска ucoz красоты и соответствующего цвета, выбирайте нужный. А вставлять стиль нужно: П.У - Дизайн - Управление дизайном(CSS) и в самый низ.

Оранжевая кнопка поиска

Получить код

/* Форма поиска оранжевая кнопка ----------*/  
  .poick_os {  
  float:left;  
  padding:4px;  
  width:300px;  
  background:#fff;  
  border: 1px solid #A0A8AC;  
  }  

  .poick_os input {  
  float:left;  
  margin:0px;  
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;  
  }  

  .poick_pole {  
  color:#555;  
  width:220px;  
  height:15px;  
  border:none;  
  padding:6px 4px;  
  }  
   
  .poick_knopka {  
  text-shadow: 1px 1px 1px #865520;  
  width:70px;  
  height:27px;  
  cursor:pointer;  
  background:#e1954a;  
  border:1px solid #c97639;  
  color:#fff; font-weight: bold!important;  
  }  
   
  .poick_knopka:hover {background:#d48347;}  

  .poick_os,  
  .poick_knopka {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  }

Редактируйте под себя.

Comments

а как допустим сделать так же, только чтобы текстовое поле было сверху определенных параметров, а снизу посередине была как раз кнопка "найти"? В моем случае как раз так и нужно, а не в одной строчке.

---

Это
.poick_os input {  
  float:left;  
  margin:0px;  
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;  
  }  
Заменить на это
.poick_os input {
float:left;  
    margin: 5px 250px;
    vertical-align: middle;
    font: 11px Verdana,Arial,Helvetica,sans-serif;
    width: 100px;
Если будут проблемы попробуйте удалить float:left;

---

Большое спасибо Юрий, я попробую и потом напишу результаты.

---

Буду ждать ваших результатов.

---

В принципе теперь стало немного понятнее,но не до конца, я сделал текстовое поле,внизу кнопка найти стандартная ровно посередине. Но теперь для моего случая мне необходимо поступить так: 1) Текстовое поле сделать голубым цветом; 2) текстовое поле продлить максимально в ширину 3,5 см и в высоту 0,8 см; 3) Кнопку "найти" сделать следующим образом: она должна выглядеть также как и остальные мои анимированные голубые кнопки(материал с анимацией для этого уже сделан),которые при наведении мышкой подсвечиваются другим цветом. Анимированная кнопка такая у меня уже есть,как теперь её применить для кнопки "найти" внизу под текстовым полем,какой код заменить нужно,чтобы вместо стандартной кнопки "найти",появилась моя анимированная кнопка "найти"?

---

Щас намутим xD
Не обещаю что помогу но попробую.

---

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

---

https://yadi.sk/i/is9Oa1w6eMsdL
Вот ссылка,там я кратко изложил что нужно сделать.

---

Вставить в блок:

<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.ru/news/">
<input type="text" name="query" class="s_field"/>
<input type="submit" class="button" name="sfSbm" value="Поиск!"/>
<input type="hidden" name="a" value="14" />
</form>
</div>

Вставить таблицу стилей css:

div.searchForm {
text-align: center!important;
}

Дальше сами сможете?

1. http://site.ucoz.ru/news/ - раздел поиска на вашем сайте, там где пользователи будут искать.
1. class="s_field" - стиль самой формы поиска.
2. class="button" - стиль кнопки поиска.
3. value="Поиск!" - текст на кнопке поиска.

---

Я попробую и потом напишу сообщение, спасибо вам Юрий.

---

Сделал по центру строго,настроил ссылку, теперь главный финал, как задать стиль поля поиска и сделать стиль для кнопки(вставить за место кнопки мою кнопку),какой код нужен?
http://lpsnr.international/ - мой сайтик

---

Это в блоке

<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.ru/news/">
<input type="text" name="query" class="s_field"/>
<input type="submit" class="button" name="sfSbm" value="Поиск!"/>
<input type="hidden" name="a" value="14" />
</form>
</div>

Замените на это

<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.ru/news/">
<input type="text" name="query" class="s_field"/>
<input type="submit" class="button" name="sfSbm" value="Поиск!" style="background: #05FFFF;
border: 0px;
height: 30px;"/>
<input type="hidden" name="a" value="14" />
</form>
</div>