Edição das caixas de busca Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Edição das caixas de busca

2 participantes

Ir para baixo

Tópico resolvido Edição das caixas de busca

Mensagem por AlfaBeta. 12.07.13 7:33

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 13.07.13 2:27, editado 1 vez(es)
AlfaBeta.
AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por MateusA 12.07.13 18:12

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.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. 12.07.13 23:28

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
AlfaBeta.
AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por MateusA 12.07.13 23:36

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.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. 13.07.13 0:25

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;
}
AlfaBeta.
AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por MateusA 13.07.13 0:27

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.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. 13.07.13 1:36

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

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por MateusA 13.07.13 1:40

Olá!

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

Até mais.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. 13.07.13 2:04

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.
AlfaBeta.
AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por MateusA 13.07.13 2:05

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.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. 13.07.13 2:22

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.
AlfaBeta.
AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por MateusA 13.07.13 2:24

Olá!

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

Até mais.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Edição das caixas de busca

Mensagem por AlfaBeta. 13.07.13 2:26

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.
AlfaBeta.
AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos