Caixa de pesquisa

Qual é minha questão:
Olá, vocês poderiam me proporcionar o código de pesquisa parecido ou igual a esse:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]?

Local: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Agradeço.

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

O código do botão:

Código:

<div class="toggle-search active"><i class="fa fa-search"></i></div>

Código da caixa de pesquisa:

Código:

<div class="search-expand" style="display: none;">
                     <div class="search-expand-inner">
                        <form method="get" class="searchform themeform" action="/search">
   <div>
      <input type="text" class="search" name="search_keywords" onblur="if(this.value=='')this.value='Para pesquisar digite e aperte Enter';" onfocus="if(this.value=='Para pesquisar digite e aperte Enter')this.value='';" value="Para pesquisar digite e aperte Enter">
   </div>
</form>                     </div>
                  </div>

CSS:

Código:

.toggle-search {
background: url(https://cdn1.iconfinder.com/data/icons/customicondesign-mini-lightcolour-png/16/Search.png) no-repeat;
color: #fff;
font-size: 18px;
line-height: 24px;
cursor: pointer;
padding: 13px 20px;
display: block;
position: absolute;
right: 0;
top: -50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1);
}
.search-expand {
background: #26272b;
position: absolute;
top: 0;
right: 0;
width: 340px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}
.search-expand-inner {
background: rgba(0,0,0,0.15);
padding: 15px;
}
.themeform.searchform div {
position: relative;
}
.themeform.searchform div input {
padding-left: 26px;
line-height: 20px;
}
.search-expand .themeform input {
width: 100%;
border: 2px solid #e2e2e2;
border-radius: 0;
}
.themeform input[type="text"] {
background: #fff;
border: 2px solid #ddd;
color: #777;
display: block;
max-width: 100%;
outline: none;
padding: 7px 8px;
}
.themeform input {
font-size: 14px;
font-family: "Ubuntu", Arial, sans-serif;
-moz-appearance: none;
-webkit-appearance: none;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.themeform div {
background: url(https://cdn2.iconfinder.com/data/icons/humano2/16x16/actions/old-zoom-original.png) no-repeat;
}

Código JS:

Código:

$(function() {
$('.toggle-search').click(function() {
 $('.search-expand').fadeToggle();
});
});

Até!

Daemon escreveu:O código do botão:

Código:

<div class="toggle-search active"><i class="fa fa-search"></i></div>

Código da caixa de pesquisa:

Código:

<div class="search-expand" style="display: none;">
                     <div class="search-expand-inner">
                        <form method="get" class="searchform themeform" action="/search">
   <div>
      <input type="text" class="search" name="search_keywords" onblur="if(this.value=='')this.value='Para pesquisar digite e aperte Enter';" onfocus="if(this.value=='Para pesquisar digite e aperte Enter')this.value='';" value="Para pesquisar digite e aperte Enter">
   </div>
</form>                     </div>
                  </div>

Até!

onde que eu coloco os dois primeiros? Não consegui...

Podes adicionar onde quiser, creio que no caso você queira adicionar ao menu, basta adicionar ao template "overall_header", em "primary_nav".


Até!

@NandoIDB10,

Use à busca do fórum para procurar a skin desejada, ou vá na secção das skin's.

Até Mais!

A função funcionou após alteração simples no código.

Eu gostaria de deixa-lo na barra de menu, idêntico aos demais (com a "sombra quando passa o link").

E seria possivel que, quando clicasse, a barra de navegação (nav_bar) se expandisse suavemente, mostrando assim a caixa de pesquisa centralizada?

Código:

                                        <li id="nav_app_forums" class="left active"><a href="/forum" title="Ir para Fórum">Ínicio</a></li>
                                         <li id="nav_app_portal" class="left "><a href="http://victoryroad.forumeiros.com/h1-loja" title="Loja">Loja</a></li>
                                         <li id="nav_app_members" class="left "><a href="/memberlist" title="Ir para Membros">Membros</a></li>
                                         <li id="nav_app_groups" class="left "><a href="/groups" title="Ir para Grupos">Grupos</a></li>
                                         <li id="nav_app_calendar" class="left "><a href="/calendar" title="Ir para Calendário">Calendário</a></li>
                                         <li id="toggle-search" class="toggle-search active"><i class="fa fa-search"></i></li>
                <div class="search-expand" style="display: none;">
                     <div class="search-expand-inner">
                        <form method="get" class="searchform themeform" action="/search">
   <div>
      <input type="text" class="search" name="search_keywords" onblur="if(this.value=='')this.value='Para pesquisar digite e aperte Enter';" onfocus="if(this.value=='Para pesquisar digite e aperte Enter')this.value='';" value="Para pesquisar digite e aperte Enter">
 

up