Страница 1 из 11
Форум про uCoz » Все для вебмастера » Верстальщик » Замена поиска на сайте конструктора uCoz (Нужно поставить и настроить поиск под меню.)
Замена поиска на сайте конструктора uCoz
rekersil
Дата: Среда, 08.02.2017, 22:30 | Сообщение # 1
Проверенные
Сообщений:182
Награды: 1


Здравствуйте. Порылся по шаблонам и на одном из них нашёл интересный для меня поиск.Вытащил с шаблона CSS и HTML поиска. Теперь мне нужно поставить и настроить его в меню.



HTML моего сайта(части сайта):

Код

<!DOCTYPE html>
<html>
<head>
    <title>HomeCinema - Твой домашний кинотеатр!</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div class="wraper">
  <div class="header">
   <div class="hc-logo">
    <a href="http://homecinema.ucoz.org/">
     <i class="icon"></i>
    </a>
   </div>
   <div class="header-menu">
    <ul class="header-menu-list">
     <li>
      <a href="http://homecinema.ucoz.org/">
       Главная
      <a>
     </li>
     <li>
      <a href="/">
       Новинки
      </a>
     </li>
     <li>
                        <a href="/">
       Стол заказов
      </a>
     </li>
     <li>
      <a href="/">
       Помощь
      </a>
     </li>
    </ul>
   </div>
     <input type="text" value="Поиск" class="search" name="search" onblur="if(this.value=='') this.value='Поиск';" onfocus="if(this.value=='Поиск') this.value='';">
  </div>
    </div>
</body>
</html>

CSS

Код

.wraper {
    width: 950px;
    position: relative;
    margin: 0 auto;
}

.header {
    width: 950px;
    height: 50px;
    background: #292929;
}

.hc-logo {
    position: absolute;
    width: 160px;
    height: 50px;
    margin-left: 75px;
}

.hc-logo:hover {
    opacity: 0.9;
}
.icon {
    background: url("images/logo-header.png");
    position: absolute;
    width: 100%;
    height: 100%;

}
.header-menu {
    display: inline-block;
    margin-left: 250px;
}
.header-menu li {
    display: inline-block;
    margin: 0 10px;
    font-size: 16px;
    font-weight: bold;
}

.header-menu-list a{
    color: white;
    text-decoration: none;
}

.header-menu-list a:hover{
    color: #e9e9e9;
}

.search{
    color: #B6B6B6;
    height: 25px;
    width: 240px;
    margin: 0 0 0 17px;
    border: 0;
    border-radius: 4px;
}

.search:focus{
    background-color: #e9e9e9;
}


Вот html поиска,который нужно поставить:

Код

<div class="searchbar radius-3">
<form action="" name="searchform" method="post">
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<input id="story" name="story" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" type="text" class="searchbar-input radius-3" />
<button class="searchbar-btn" type="submit" title="Найти">
<i class="fa fa-search"></i>
</button>
</form>
</div>


CSS

Код

.searchbar {
    height:40px;
    overflow:hidden;
    margin:25px 0 25px 5px;
    position:relative;
    float:left;
    width:250px;
}
.searchbar .searchbar-input {
    height:40px;
    width:100%;
    background:#222933;
    color:#99b1d4;
    line-height:40px;
    border:1px solid #313842;
    padding:0 40px 0 20px;
    font-style: italic;
    font-size: 14px;
}    
.searchbar .searchbar-input:hover {
    background:#304156
}    
.searchbar .searchbar-input:focus {
    color: #99b1d4; outline:0;
    background:#304156
}
.searchbar .searchbar-btn {
    position:absolute;
    top:0;
    right:0;
    padding:9px 15px 9px 10px;
    color:#99b1d4;
    background:none;
    border:none;
    font-size:16px;}
.searchbar .searchbar-btn:hover {
    color: #fff;
}
.searchbar .searchbar-btn:focus {
    outline:0
}
Прикрепления: 7876424.png(3Kb) · 2709280.png(46Kb)
Kosten
Дата: Среда, 08.02.2017, 23:12 | Сообщение # 2
Администраторы
Сообщений:14287
Награды: 47


Не понимаю, а что сами попробовать не можете, так как у вас админ панель и вам легче это сделать.
rekersil
Дата: Среда, 08.02.2017, 23:43 | Сообщение # 3
Проверенные
Сообщений:182
Награды: 1


Kosten, я через текстовый документ запускаю. А сам я пробовал. Не получается.
Kosten
Дата: Среда, 08.02.2017, 23:47 | Сообщение # 4
Администраторы
Сообщений:14287
Награды: 47


rekersil, второй поиск рабочий и поставил на тестовый сайт.



код

Код
<div class="searchbar radius-3">
<form action="" name="searchform" method="post">
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<input id="story" name="story" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" type="text" class="searchbar-input radius-3" />
<button class="searchbar-btn" type="submit" title="Найти">
<i class="fa fa-search"></i>
</button>
</form>
</div>


CSS:

Код
.searchbar {
    height:40px;
    overflow:hidden;
    margin:25px 0 25px 5px;
    position:relative;
    float:left;
    width:250px;
}
.searchbar .searchbar-input {
    height:40px;
    width:100%;
    background:#222933;
    color:#99b1d4;
    line-height:40px;
    border:1px solid #313842;
    padding:0 40px 0 20px;
    font-style: italic;
    font-size: 14px;
}    
.searchbar .searchbar-input:hover {
    background:#304156
}    
.searchbar .searchbar-input:focus {
    color: #99b1d4; outline:0;
    background:#304156
}
.searchbar .searchbar-btn {
    position:absolute;
    top:0;
    right:0;
    padding:9px 15px 9px 10px;
    color:#99b1d4;
    background:none;
    border:none;
    font-size:16px;}
.searchbar .searchbar-btn:hover {
    color: #fff;
}
.searchbar .searchbar-btn:focus {
    outline:0
}
Прикрепления: 7408798.png(2Kb)
Kosten
Дата: Среда, 08.02.2017, 23:51 | Сообщение # 5
Администраторы
Сообщений:14287
Награды: 47


Со свой страницы уберите:

Код
<input type="text" value="Поиск" class="search" name="search" onblur="if(this.value=='') this.value='Поиск';" onfocus="if(this.value=='Поиск') this.value='';">


И поставите тот что выше и посмотрите.
Kosten
Дата: Среда, 08.02.2017, 23:53 | Сообщение # 6
Администраторы
Сообщений:14287
Награды: 47


Также можете дивы убрать, а класс прописать в самом поиске.

Код
<form action="" name="searchform" method="post" class="searchbar radius-3">
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<input id="story" name="story" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" type="text" class="searchbar-input radius-3" />
<button class="searchbar-btn" type="submit" title="Найти">
<i class="fa fa-search"></i>
</button>
</form>
rekersil
Дата: Четверг, 09.02.2017, 15:45 | Сообщение # 7
Проверенные
Сообщений:182
Награды: 1


Цитата Kosten ()
Также можете дивы убрать, а класс прописать в самом поиске.

Kosten, Да я не о том,что он не рабочий,я о том как его правильно встроить в меню.У меня получается только так:

Добавлено (09.02.2017, 15:45)
---------------------------------------------
А нужно что бы заменял поиск который имеется.

Прикрепления: 4497642.png(45Kb)
Форум про uCoz » Все для вебмастера » Верстальщик » Замена поиска на сайте конструктора uCoz (Нужно поставить и настроить поиск под меню.)
Страница 1 из 11
Поиск: