Edição das caixas de busca

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

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.

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: https://i.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)
https://i.servimg.com/u/f34/18/40/06/56/imagem13.jpg

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.

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;
}

Olá!

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

Até mais.

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

Olá!

Acrescente este código:

Código:

#search_keywords {
margin-top: -10px !important
}

Vai modificando o numero 10.

Até mais.

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.

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.

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.

Olá!

Troque por esse:

Código:

#search_keywords, #search-box input.button2 {
 margin-top: -10px !important;
}

Até mais.

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.