Início
Curtir
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!
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
Agora devemos utilizar o ' display ' para que o botão de busca não apareça! (Essa caixa não precisa do botão)
Agora vamos as partes importantes!
Para que a caixa fique de um estilo mais moderno vamos utilizar:
Agora você deve adicionar:
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:
Pronto!
Espero que gostem! =)
Código já pronto:
--> Resultado Final <--
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
Agora devemos aplicar o código:Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Aba ' Folha de Estilo CSS '
Vermelho: Será a cor do fundo da caixa, você pode mudá-la para outra cor.#search-box {
position: center;
bottom: 55px;
height: 30px;
width: 190px;
right: -150px;
display: inline;
background-color: #ffffff;
border: 1px solid #d6d6d6;
background-image: url('https://i.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 */
}
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:
Azul: Você pode mudar para mais ou menos o padding! (É aconselhaveu a deixar do jeito que está)#search-box {
padding-bottom: 5px !important;
}
Agora você deve adicionar:
Amarelo: Você pode mudar para mais ou menos width!#search-box #keywords {
width: 122px;
color: #a6a6a6;
font-family: Verdana;
font-size: 16px;
font-style: italic;
font-weight: italic;
background: transparent;
}
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:
E agora o nosso querido hover:#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;
}
- 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;
}
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 */
Desenvolvido por Extreme (Diskete) | (S)Imple - Index
Editado e Postado por 2012 © Staffer Group BR™
Editado e Postado por 2012 © Staffer Group BR™
