[TUTORIAL] Caixa de busca elegante para PunBB & PhpBB2

Os fóruns de versão PunBB e PhpBB2 não contém uma caixa de pesquisar e você procura como adicioná-las? Neste tutorial vamos aplicar uma pequena e elegante caixa de busca em seu fórum.

--> Tutoriais <--
Caixa de busca elegante para PunBB & PhpBB2

1º - Template Geral:
Vamos acessar o painel de controle do seu fórum e procurar o template overall_header, responsável pelo Topo do fórum.
Painel de controle > Visualização > Templates > Geral > Overall_header >

Procure pelo seguinte trecho:
PunBB:

Código:

              <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                    </ul>
                  </div>
              </div>

PhpBB2:

Código:

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
              <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
              </tr>
            </table>

Abaixo do termo indicado, adicione o seguinte código HTML:

Código:

                                <div id='search' class='right'>
  <form id="search-box" method="post" action="/search">

        <label for='main_search' class='esconder'>Pesquisar</label>
        <a href='/search' title='Busca avançada' accesskey='4' rel="search" id='adv_search' class='right'>Avançar</a>
        <span id='search_wrap' class='right'>
        <input type="text" tabindex="6" size="17" class="" name="search_keywords" id="main_search" placeholder="Pesquisar...">
        <input type='submit' class='submit_input clickable' value='Search' />
        </span>
  </form>
                                    </div>

2º - Css personalizado:
Vamos adicionar o CSS personalizado em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS >

Código:

#search {
    margin: 20px 0;
}
#main_search {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 12px;
    outline: 0 none;
    padding: 0;
    width: 130px;
    margin-top: 5px;
    color: #65A5D1;
}
.esconder {
    display: none;
}

#search_wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #326AC5;
    border-radius: 3px 4px 4px 3px;
    display: block;
    height: 26px;
    line-height: 25px;
    min-width: 200px;
    padding: 0 26px 0 4px;
    position: relative;
}

#adv_search {
    background: url("http://i32.servimg.com/u/f32/14/52/65/41/advanc10.png") no-repeat scroll 50% 50% #85A4B9;
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    height: 28px;
    margin-left: 3px;
    text-indent: -3000em;
    width: 28px;
}
#adv_search:hover {
    background-color: #7494AA;
}

#search .submit_input {
    background: url("http://i32.servimg.com/u/f32/14/52/65/41/search13.png") no-repeat scroll 50% center #114D77;
    border-color: #063B5F #063B5F #063B5F;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
    border-radius: 0 3px 3px 0;
    bottom: -1px;
    display: block;
    height: 28px;
    padding: 0;
    position: absolute;
    right: -1px;
    text-indent: -3000em;
    top: -1px;
    width: 28px;
}
#search .submit_input:hover {
    background-color: #1D5D8A;
}

Feito isso, agora basta publicar o template e salvar o seu CSS e ver o resultado.

• Resultado:
  
  

---

© ShiftActif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Caixa de busca elegante para PunBB & PhpBB2