[Tutorial] Barra de busca no estilo IPB

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Sex Set 30, 2016 12:41 pm

Informações:
Autor:
Desconhecido
Funcionalidade: Todas as Versões




Acesse:
Painel de Controle Visualização Templates Geral Overall_Header
E Adicione esse código:
Código:
<div id="search" class="attach">
<form method="get" action="/search?search_where=11" id="search-box">
<fieldset>
<label for="main_search" class="hide"></label>
<a href="/search" title="Busca avançada" accesskey="4" rel="search" id="adv_search" class="attach"></a>
<span id="search_wrap">
<input type="text" name="search_keywords" id="main_search" maxlength="128" value="Search..." onclick="if (this.value == 'Buscar...') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar...';">
<span class="choice ipbmenu clickable" id="search_options" style="">Forum</span>
<input type="submit" class="submit_input clickable" value=""></span>
</fieldset>
</form>
</div>

Painel de Controle Visualização Imagens eCores Cores Folha de Estilo CSS
E Adicione esse código:
Código:
.attach{float: right;}
.hide{display: none;}
#adv_search{width: 16px;
height: 16px;
background: url(http://community.invisionpower.com/filestore/public/style_images/master/advanced_search.png) no-repeat right 50%;
text-indent: -3000em;
display: inline-block;
margin: 4px 0 4px 4px;}
#search_wrap{position: relative;
background: white;
display: block;
padding: 0 26px 0 4px;
height: 26px;
line-height: 25px;
-moz-border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
min-width: 230px;}
#main_search {margin-top: 5px;
font-size: 12px;
border: 0;
padding: 0;
background: transparent;
width: 130px;
outline: 0;}
#search_options {font-size: 10px;
height: 20px;
line-height: 20px;
margin: 3px 3px 3px 0;
padding: 0 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #EAEAEA;
display: inline-block;
float: right;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;}
#search .submit_input {background: #7BA60D url(http://community.invisionpower.com/filestore/public/style_images/master/search_icon.png) no-repeat 50%;
text-indent: -3000em;
padding: 0;
border: 0;
border: 1px solid #7BA60D;
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
-webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);}

Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum