Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 Diskete

avatar
Membro
Olá, Convidado@!
Esse é um tutorial básico com um código que eu desenvolvi para alguns fóruns.
Lembre-se de que essa caixa de Login é para a versão PhpBB3.
Ela pode funcionar em algumas outras versões, mas ficará bugada!

Tutorial
--> Caixa de Buscar <--

1) Entendendo o código:
O código que será utilizado é bem simples, porém, algumas partes você não deve alterar.

2) Aplicando o código:
Para aplicarmos o código, devemos ir até o CSS

Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Aba ' Folha de Estilo CSS '
Agora devemos aplicar o código:

#search-box {
position: center;
bottom: 55px;
height: 30px;
width: 190px;
right: -150px;
display: inline;
background-color: #ffffff;
border: 1px solid #d6d6d6;
background-image: url('http://i76.servimg.com/u/f76/17/71/75/73/001_3810.gif');
background-position: right;
background-repeat: no-repeat;
-moz-box-shadow: 0 0 5px #d8d8d8;
-webkit-box-shadow: 0 0 5px#d8d8d8;
box-shadow: 0 0 5px #d8d8d8;
-moz-border-radius: 7px; /* Para Firefox */
-webkit-border-radius:7px; /*Para Safari e Chrome */
border-radius: 7px; /* Para Opera 10.5 */
}
Vermelho: Será a cor do fundo da caixa, você pode mudá-la para outra cor.

Agora devemos utilizar o ' display ' para que o botão de busca não apareça! (Essa caixa não precisa do botão)

#search-box input.button2 {
display: none;
}


Agora vamos as partes importantes!

Para que a caixa fique de um estilo mais moderno vamos utilizar:

#search-box {
padding-bottom: 5px !important;
}
Azul: Você pode mudar para mais ou menos o padding! (É aconselhaveu a deixar do jeito que está)

Agora você deve adicionar:
#search-box #keywords {
width: 122px;
color: #a6a6a6;
font-family: Verdana;
font-size: 16px;
font-style: italic;
font-weight: italic;
background: transparent;
}
Amarelo: Você pode mudar para mais ou menos width!
Vermelho: Você pode mudar a cor!
Verde: Você pode mudar o estilo da fonte de, pode colocar Arial, Tahoma, etc!
Azul: Você pode mudar o tamanho da fonte!

Adicione também:
#search-box input {
border: none !important;
background: none;
-moz-box-shadow: 0 0 0px #06aefe !important;
-webkit-box-shadow: 0 0 0px#06aefe !important;
box-shadow: 0 0 0px #06aefe !important;
-moz-border-radius: 0px !important; /* Para Firefox */
-webkit-border-radius:0px !important; /*Para Safari e Chrome */
border-radius: 0px !important; /* Para Opera 10.5 */
}
#search-box input.search {
background: none;
margin-left: 0px;
margin-top: 5px;
}
E agora o nosso querido hover:

Código:
#search-box:hover {
    position: center;
    bottom: 55px;
    height: 30px;
    width: 190px;
    right: -150px;
    display: inline;
    background-color: #ffffff; border: 1px solid #06aefe;
    background-image: url('http://i76.servimg.com/u/f76/17/71/75/73/001_3810.gif');
    background-position: right;
    background-repeat: no-repeat;
}
Você não precisa mudar nada no hover, mas caso queira, pode mudar o background-color e o border;

Pronto!
Espero que gostem! =)


Código já pronto:
Código:
/*Caixa de busca por Diskete*/
#search-box{
    position: center;
    bottom: 55px;
    height: 30px;
    width: 190px;
    right: -150px;
    display: inline;
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    background-image: url('http://i76.servimg.com/u/f76/17/71/75/73/001_3810.gif');
    background-position: right;
    background-repeat: no-repeat;
  -moz-box-shadow: 0 0 5px #d8d8d8;
  -webkit-box-shadow: 0 0 5px#d8d8d8;
  box-shadow: 0 0 5px #d8d8d8;
  -moz-border-radius: 7px; /* Para Firefox */
  -webkit-border-radius:7px; /*Para Safari e Chrome */
  border-radius: 7px; /* Para Opera 10.5 */
}
#search-box input.button2 {
    display: none;
}
#search-box {
    padding-bottom: 5px !important;
}
#search-box
#keywords {
    width: 122px;
    color: #a6a6a6;
    font-family: Verdana;
    font-size: 16px;
    font-style: italic;
    font-weight: italic;
    background: transparent;
}
#search-box input {
    border: none !important;
    background: none;
  -moz-box-shadow: 0 0 0px #06aefe !important;
  -webkit-box-shadow: 0 0 0px#06aefe !important;
  box-shadow: 0 0 0px #06aefe !important;
    -moz-border-radius: 0px  !important; /* Para Firefox */
    -webkit-border-radius:0px  !important; /*Para Safari e Chrome */
  border-radius: 0px  !important; /* Para Opera 10.5 */
}
#search-box input.search {
    background: none;
    margin-left: 0px;margin-top: 5px;
}
#search-box:hover {
    position: center;
  bottom: 55px;
    height: 30px;
    width: 190px;
    right: -150px;
    display: inline;
    background-color: #ffffff;
  border: 1px solid #06aefe;
  background-image: url('http://i76.servimg.com/u/f76/17/71/75/73/001_3810.gif');
    background-position: right;
    background-repeat: no-repeat;
}
/* Fim da caixa de busca por Diskete */


--> Resultado Final <--


Desenvolvido por Extreme (Diskete) | (S)Imple - Index
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 BielZinho

avatar
Membro
poderia postar o resultado?
Ver perfil do usuário

#3
 Diskete

avatar
Membro
Ja editei e coloquei o resultado.
Ver perfil do usuário

#4
 D'Leandro™

avatar
Fundador
Aceito: Movido para o local correspondente.

Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
Hide Messenge: Eu peço por favor que utilize o Modo Hide Messenge em seus tutoriais.

Ver perfil do usuário

#6
 JessiKa

avatar
Membro
Muito Belo tutorial!
Ver perfil do usuário

#7
 'Fusion

avatar
Membro
vlw estava procurando

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#8
 'Fusion

avatar
Membro
Estou postando denovo porque não esta dando para ver o código.
Ver perfil do usuário samuca_akira@hotmail.com

#9
 Chorão

avatar
Membro
Vou testar tomara que fique bom !
Ver perfil do usuário

#10
 Zoster

avatar
Membro
Ótimo Tutorial Grato !
Ver perfil do usuário

#11
 Publigos

avatar
Membro
Perfeita combinação de códigos.
Ver perfil do usuário

#12
 BangBang

avatar
Membro
Irei testar...
Ver perfil do usuário

#13
 Ryse

avatar
Membro
sensacional.
Ver perfil do usuário

#14
 Master Publicitario

avatar
Membro
Muito bom!
Ver perfil do usuário

#15
 Conteúdo patrocinado