ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4810
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

[TUTORIAL] Caixa de busca elegante para PunBB & PhpBB2

em Dom 10 Fev - 20:16


Edição de templates


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




- 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>


- 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. Beleza!


  • 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
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum