Edição das caixas de busca

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

Resolvido Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 03:33 am

Qual é minha questão:
Olá,
Anteriormente foi sanada minha duvida quanto a mudança das caixas de busca, da pag. principal e a dos topicos.
Agora, gostaria de uma ajuda, pra fazer poucos retoques nelas.

Assim, como faço para:
- Caixa pg. principal (cor e efeito quando se começa a digitar): gostaria que ficasse como da Caixa de busca dos topicos... bem suave...e não trepidando.
- Caixa dos topicos: altura da caixa e do botao 'Buscar' iguais... como na Caixa da pag. principal. Isso é possivel?

Codigo já usado:
Código:
#search_keywords {
-moz-box-sizing: content-box;
background: none repeat scroll 0 0 #FFF;
border: 1px solid #D9D9D9;
border-radius: 4px 4px 4px 4px;
color: #000;
height: 23px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
color: #515151;
cursor: text;
display: inline-block;
font-size: 13px;
line-height: 18px;
outline: 0 none;
padding: 4px;
}
#search_keywords:hover {
transition: all 1s ease-in-out 0;
width: 150px;
border: 1px solid #000;
}
.button2 {
background-color: #F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px 2px 2px 2px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
min-width: 54px;
padding: 0 8px;
text-align: center;
}
#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 11px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
#search-box {
    float: right;
    margin-right: 5px;
    margin-top: -7px;
    white-space: nowrap;
}
#search #keywords:focus {
    width: 290px;
}
#search #keywords {
    transition: all 1s ease-in-out 0s;
    width: 150px;
}
#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;
    border-radius: 4px 4px 4px 4px;
    color: #000000;
    height: 23px;
}

.conteneur_container_IE{position: relative;bottom: -3px;margin-top: -2px;padding: 1px;}


Agradeço.

Endereço do meu fórum:
http://carrosegames.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por AlfaBeta. em 12/07/13, 10:27 pm, editado 1 vez(es)
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

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

Resolvido Re: Edição das caixas de busca

Mensagem por MateusA em 12/07/13, 02:12 pm

Olá!

Troque por esse:
Código:
        #search_keywords, #keywords {
        -moz-box-sizing: content-box;
        background: none repeat scroll 0 0 #FFF;
        border: 1px solid #D9D9D9;
        border-radius: 4px 4px 4px 4px;
        color: #000;
        height: 23px;
        background-color: #FFF;
        border: 1px solid #CCC;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
        color: #515151;
        cursor: text;
        display: inline-block;
        font-size: 13px;
        line-height: 18px;
        outline: 0 none;
        padding: 4px;
        }
        #search_keywords:hover, #keywords:hover {
        transition: all 1s ease-in-out 0;
        width: 150px;
        border: 1px solid #000;
        }
        .button2, .nomargin .button2 {
        background-color: #F5F5F5;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 2px 2px 2px 2px;
        color: #666;
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
        height: 29px;
        line-height: 27px;
        min-width: 54px;
        padding: 0 8px;
        text-align: center;
        }
        #search-box input.button2, .nomargin .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 11px;
            min-width: 54px;
            padding: 0 8px;
            text-align: center;
        }
        #search-box {
            float: right;
            margin-right: 5px;
            margin-top: -7px;
            white-space: nowrap;
        }
        #search #keywords:focus {
            width: 290px;
        }
        #search #keywords {
            transition: all 1s ease-in-out 0s;
            width: 150px;
        }
        #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;
            border-radius: 4px 4px 4px 4px;
            color: #000000;
            height: 23px;
        }

        .conteneur_container_IE{position: relative;bottom: -3px;margin-top: -2px;padding: 1px;}

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 07:28 pm

Opa, muito bom, Crazy. Obrigado.
Vejo que arrumaste a caixa de busca principal: ficou sem o dourado e não 'trepida' mais. E ainda diminuiu a fonte. Otimo.

E quanto a caixa de busca dos topicos, como mencionei no inicio. Haveria como encurtar sua altura...pra ficar na mesma altura do botão...como está na caixa principal, colocando ainda mais cima?
Porque agora ela está desparelha...como visto nas imagens:

Img1) ex de como está alinhado a altura da caixa principal: http://i34.servimg.com/u/f34/18/40/06/56/imagem12.jpg

Img2) Como está a caixa dos topicos: em vermelho= indica sobre a altura, em azul=indicando a direção e como ficaria a posição da caixa (mais pra cima)
http://i34.servimg.com/u/f34/18/40/06/56/imagem13.jpg
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

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

Resolvido Re: Edição das caixas de busca

Mensagem por MateusA em 12/07/13, 07:36 pm

Olá!

Troque por este:
Código:
        #search_keywords, #keywords {
        -moz-box-sizing: content-box;
        background: none repeat scroll 0 0 #FFF;
        border: 1px solid #D9D9D9;
        border-radius: 4px 4px 4px 4px;
        color: #000;
        height: 17px;
        background-color: #FFF;
        border: 1px solid #CCC;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
        color: #515151;
        cursor: text;
        display: inline-block;
        font-size: 13px;
        line-height: 18px;
        outline: 0 none;
        padding: 4px;
        text-align: center !important;
        }
        #search_keywords:hover, #keywords:hover {
        transition: all 1s ease-in-out 0;
        width: 150px;
        border: 1px solid #000;
        }
        .button2, .nomargin .button2 {
        background-color: #F5F5F5;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 2px 2px 2px 2px;
        color: #666;
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
        height: 29px;
        line-height: 27px;
        min-width: 54px;
        padding: 0 8px;
        text-align: center;
        }
        #search-box input.button2, .nomargin .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 11px;
            min-width: 54px;
            padding: 0 8px;
            text-align: center;
        }
        #search-box {
            float: right;
            margin-right: 5px;
            margin-top: -7px;
            white-space: nowrap;
        }
        #search #keywords:focus {
            width: 290px;
        }
        #search #keywords {
            transition: all 1s ease-in-out 0s;
            width: 150px;
        }
        #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;
            border-radius: 4px 4px 4px 4px;
            color: #000000;
            height: 23px;
        }

        .conteneur_container_IE{position: relative;bottom: -3px;margin-top: -2px;padding: 1px;}

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 08:25 pm

Ok, Crazy. Grande ajuda. Foi encurtada a altura da caixa dos topicos.
E resolvi testar varios comandos, no entanto ainda não consegui empurrar essa caixa dos topicos mais pra cima. Não achei o comando pra isso. Sabes me dizer?

E uma curiosidade: Porque há esses comandos repetidos? Vejo que mudei itens no 1ºparagrafo e q surtiram efeito. Precisaria mudar tambem no 2ºparagrafo... ou deixo assim?
Código:
.button2, .nomargin .button2 {
background-color: #F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px 2px 2px 2px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
min-width: 54px;
padding: 0 8px;
text-align: center;
}
#search-box input.button2, .nomargin .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 11px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

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

Resolvido Re: Edição das caixas de busca

Mensagem por MateusA em 12/07/13, 08:27 pm

Olá!

Os comandos, cada um serve para uma coisa, peço que não modifique nada que não saiba. Piscada
Seta O comando e "margin-top: -15px !important;" sem as aspas.

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 09:36 pm

Mas onde está esse comando? Ou devo acrescentar?
Lembrando que só queremos mexer na caixa dos topicos.
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

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

Resolvido Re: Edição das caixas de busca

Mensagem por MateusA em 12/07/13, 09:40 pm

Olá!

Acrescente este código:
Código:
#search_keywords {
margin-top: -10px !important
}
Seta Vai modificando o numero 10.

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 10:04 pm

Obrigado, Crazy.
Pra terminar, como faço pra fazer a mesma coisa na 'caixinha buscar' que fica a direita. Pois com o codigo, trabalho apenas a altura da caixa buscar.
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

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

Resolvido Re: Edição das caixas de busca

Mensagem por MateusA em 12/07/13, 10:05 pm

Olá!

Não sei se eu entendi corretamente, mais troque pelo código abaixo:
Código:
        #search_keywords, keywords {
        margin-top: -10px !important;
        }

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 10:22 pm

O que quis dizer é o codigo apenas mexe na caixa onde voce coloca o texto. Esse ultimo codigo tambem só faz isso.

E por isso pergunto como mexo, tambem, na caixinha [Buscar] que fica ao lado. Se não ficará desparelho.
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

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

Resolvido Re: Edição das caixas de busca

Mensagem por MateusA em 12/07/13, 10:24 pm

Olá!

Troque por esse:
Código:
#search_keywords, #search-box input.button2 {
 margin-top: -10px !important;
}

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. em 12/07/13, 10:26 pm

Não. Agora esse mexe com a caxinha [Buscar] na pag. principal.

Mas tudo bem. Acho que ja incomodei o bastante com isso. É só um detalhe. Podemos dar como resolvido.

Muito obrigado.
avatar

AlfaBeta.
Nível 9

Masculino
Inscrito dia : 12/07/2013
Mensagens : 208
Pontos Ativos : 342

Ver perfil do usuário http://carrosegames.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