Caixa de busca

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

Resolvido Caixa de busca

Mensagem por Jpjupa em 27/03/12, 04:21 pm

Qual é minha questão:
Olá, estava visitando alguns tópicos quando acessei esse fórum:
http://pokedea.forumeiros.com/

Gostei bastante da search box no logo + um efeito de ampliação ao clicar para pesquisar.

Queria saber como fazer tal efeito, e como posicionar a search box no logo.
Aguardo.

Medidas que eu tomei para corrigir o problema:
N/A

Links e imagens do meu problema:
N/A

Endereço do meu fórum:
www.rb-forum.net/

Versão do meu fórum:
PUNBB
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Caixa de busca

Mensagem por MateusV. em 27/03/12, 04:44 pm

Olá, aceda a sua Folha de estilo CSS cole o codigo e salve.
Código:
#search #keywords {
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 150px;
}
#search-box #keywords {
background-color: #;
width: 95px;
}
#search-box input {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-width: 1px;
color: black;
height: 23px;
}
input.search {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-image: initial;
border-width: 1px;
color: black;
height: 23px;
}
input.search {
background: url(http://illiweb.com/fa/sprite_prosilver_navbar.png) no-repeat top left;
background-position: 0 -701px;
padding-left: 17px;
}
input.inputbox {
width: 85%;
}
.inputbox {
background-color: #;
border: 1px solid #BCBCBC;
color: #00191C;
cursor: text;
padding: 2px;
}
Melhores cumprimentos. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Caixa de busca

Mensagem por Jpjupa em 27/03/12, 04:53 pm

http://www.rb-forum.net/forum
Não funcionou.

Deixei o código ativo para você ver.
Aguardo.
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Caixa de busca

Mensagem por Lukas' em 27/03/12, 07:22 pm

@jpjupa escreveu:http://www.rb-forum.net/forum
Não funcionou.

Deixei o código ativo para você ver.
Aguardo.

por favor,como voce deixou seu menu assim ?
sem acabar
avatar

Lukas'
Nível 8

Masculino
Inscrito dia : 26/03/2012
Mensagens : 119
Pontos Ativos : 199

Ver perfil do usuário http://maniacoscheats.forumais.com

Resolvido Re: Caixa de busca

Mensagem por Jpjupa em 27/03/12, 08:06 pm

Não dou suporte á duvidas relacionadas ao estilo de meu fórum.
Para evitar plágios.

Até mais.


----------------------------------

Aguardo respostas sobre minha duvida Piscada!
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Caixa de busca

Mensagem por iPrompt em 27/03/12, 08:13 pm

Adiciona este código


Código:
#search-box input.button2 {
    background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    color: #666666;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 29px;
    line-height: 27px;
    margin: 11px 6px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
p.nomargin {
    font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: 0;
}

#search-box #keywords {
    background-color: #FFFFFF;
    width: 95px;
}

#search-box input {
    -moz-box-sizing: content-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    color: #000000;
    height: 23px;
}

#search-box {
    float: right;
    margin-right: 5px;
    margin-top: 10px;
    white-space: nowrap;
}
#search-box{margin-bottom:5px}search-box input.button2{-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f5f5f5;background-image:-o-linear-gradient(top,whiteSmoke,#F1F1F1);border:1px solid rgba(0,0,0,0.1);border-radius:2px;color:#666;cursor:pointer;font-size:11px;font-weight:700;height:29px;line-height:27px;margin:11px 6px;min-width:54px;padding:0 8px;text-align:center}#search-box input{-moz-box-sizing:content-box;background:#fff;border:1px solid #D9D9D9;border-width:1px;color:#000;height:23px}#search #keywords:focus{width:290px}#search #keywords{-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;width:150px}
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Caixa de busca

Mensagem por Jpjupa em 27/03/12, 08:18 pm

Não funcionou.
Deixei o código no css, para você checar.
Aguardo!
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Caixa de busca

Mensagem por ShockWave™ em 28/03/12, 01:00 pm

Eu, Tamben Gostaria.



avatar

ShockWave™
Nível 10

Masculino
Inscrito dia : 04/03/2011
Mensagens : 296
Pontos Ativos : 449

Ver perfil do usuário http://habboajudaforum.forumeiros.com

Resolvido Re: Caixa de busca

Mensagem por Jpjupa em 29/03/12, 05:27 pm

UP!
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Caixa de busca

Mensagem por ShockWave™ em 30/03/12, 01:41 pm

Up aew pessoal. !
avatar

ShockWave™
Nível 10

Masculino
Inscrito dia : 04/03/2011
Mensagens : 296
Pontos Ativos : 449

Ver perfil do usuário http://habboajudaforum.forumeiros.com

Resolvido Re: Caixa de busca

Mensagem por Troubleshoot em 03/04/12, 10:05 am

Dando um UP ...
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2200
Pontos Ativos : 2943

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Caixa de busca

Mensagem por iPrompt em 03/04/12, 10:09 am

Tente este código


Código:
#search #keywords {
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 150px;
}
#search-box #keywords {
background-color: #;
width: 95px;
}
#search-box input {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-width: 1px;
color: black;
height: 23px;
}
input.search {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-image: initial;
border-width: 1px;
color: black;
height: 23px;
}
input.search {
background: url(http://illiweb.com/fa/sprite_prosilver_navbar.png) no-repeat top left;
background-position: 0 -701px;
padding-left: 17px;
}
.inputbox {
background-color: #;
border: 1px solid #BCBCBC;
color: #00191C;
cursor: text;
padding: 2px;
}
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

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

- Tópicos similares

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