[TUTORIAL] Caixa de busca elegante para PunBB & PhpBB2
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Caixa de busca elegante para PunBB & PhpBB2
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
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>
- 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>
- 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;
}
- 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 |
Tópicos semelhantes
» [TUTORIAL] Estatísticas de PHPBB3 no formato de Punbb
» [TUTORIAL] Imagem com título do tópico nos subfóruns (PUNBB & PHPBB2)
» [TUTORIAL] Modo Fade in nas caixas de respostas rápidas (PHPBB3 E PUNBB)
» Tema ESTAÇÃO para fóruns PunBB + templates
» [TUTORIAL] Caixa de fãs do Facebook com lightbox
» [TUTORIAL] Imagem com título do tópico nos subfóruns (PUNBB & PHPBB2)
» [TUTORIAL] Modo Fade in nas caixas de respostas rápidas (PHPBB3 E PUNBB)
» Tema ESTAÇÃO para fóruns PunBB + templates
» [TUTORIAL] Caixa de fãs do Facebook com lightbox
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|